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

Метод 1: использование системы сеток
Система сеток Bootstrap основана на макете из 12 столбцов. Вы можете создать две строки, равномерно разделив доступные столбцы между ними. Вот пример:

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <!-- Content for the first row -->
    </div>
    <div class="col-md-6">
      <!-- Content for the first row -->
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <!-- Content for the second row -->
    </div>
    <div class="col-md-6">
      <!-- Content for the second row -->
    </div>
  </div>
</div>

В этом примере класс containerсоздает адаптивный контейнер, а класс rowсоздает внутри него строку. Класс col-md-6используется для равномерного разделения столбцов между двумя строками. Настройте часть md, чтобы указать желаемую точку останова, при которой столбцы должны располагаться вертикально.

Метод 2: использование Flexbox
Bootstrap также предоставляет утилиты Flexbox, которые позволяют создавать гибкие макеты. Вот пример использования Flexbox для создания двух строк со столбцами одинаковой ширины:

<div class="d-flex">
  <div class="flex-fill">
    <!-- Content for the first row -->
  </div>
  <div class="flex-fill">
    <!-- Content for the first row -->
  </div>
</div>
<div class="d-flex">
  <div class="flex-fill">
    <!-- Content for the second row -->
  </div>
  <div class="flex-fill">
    <!-- Content for the second row -->
  </div>
</div>

В этом примере класс d-flexсоздает гибкий контейнер, а класс flex-fillиспользуется для равномерного заполнения столбцами доступного пространства.

Метод 3: использование классов сетки Bootstrap
В качестве альтернативы вы можете использовать предопределенные классы сетки Bootstrap для создания двух строк. Вот пример:

<div class="container">
  <div class="row">
    <div class="col-6">
      <!-- Content for the first row -->
    </div>
    <div class="col-6">
      <!-- Content for the first row -->
    </div>
  </div>
  <div class="row">
    <div class="col-6">
      <!-- Content for the second row -->
    </div>
    <div class="col-6">
      <!-- Content for the second row -->
    </div>
  </div>
</div>

В этом примере класс col-6используется для создания двух столбцов одинаковой ширины в каждой строке.