Чтобы заставить кнопку Bootstrap быть встроенной в элемент ввода, вы можете использовать различные методы. Вот несколько подходов:

1. Использование системы сеток Bootstrap: поместите кнопку и элемент ввода внутри общего родительского контейнера и используйте классы сетки Bootstrap для управления их размещением. Например, вы можете использовать классы «col», чтобы равномерно разделить доступную ширину между элементами.

<div class="row">
  <div class="col">
    <input type="text" class="form-control">
  </div>
  <div class="col">
    <button class="btn btn-primary">Button</button>
  </div>
</div>

2. Использование Flexbox: примените свойства Flexbox к родительскому контейнеру, чтобы сделать кнопку и ввод встроенными. Установите для свойства displayконтейнера значение flexи используйте соответствующие значения flexдля кнопки и ввода.

<div >
  <input type="text" class="form-control" >
  <button class="btn btn-primary">Button</button>
</div>

3. Настройка CSS. Если вы предпочитаете собственный CSS, вы можете переопределить стили Bootstrap по умолчанию, чтобы выровнять элементы по горизонтали. Используйте свойства CSS, такие как display: inline-blockили float: left, для кнопки и элементов ввода.

<input type="text" class="form-control" >
<button class="btn btn-primary" >Button</button>