Центрирование двух div в Bootstrap: решение без float

Быстрый ответ

Чтобы расположить два div-блока горизонтально рядом и выровнять их по центру, используйте контейнеры .container и .row в Bootstrap. Для определения размера блоков, основанного на равномерном распределении или содержимом, примените классы .col или .col-auto. Для центровки колонок добавьте класс .justify-content-center.

<div class="container">
  <div class="row justify-content-center">
    <div class="col">
      <!-- Первый div -->
    </div>
    <div class="col">
      <!-- Второй div -->
    </div>
  </div>
</div>

Данная структура на основе сеточной системы Bootstrap обеспечивает горизонтальное выравнивание блоков с адаптированностью под разные размеры экрана.

Сеточные классы для адаптивного дизайна

Bootstrap предлагает классы для сеточной структуры (например, col-sm-*, col-md-*), адаптированные под различные разрешения экранов. Примените col-md-6 и col-6 для создания двух колонок в ряду, занимающих по половине ширины каждая.

<div class="container">
  <div class="row justify-content-center">
    <div class="col-6 col-md-6">
      <!-- Первый div -->
    </div>
    <div class="col-6 col-md-6">
      <!-- Второй div -->
    </div>
  </div>
</div>

Отступы для точного позиционирования

С помощью классов отступов Bootstrap (col-md-offset-*) можно точно выравнивать колонки, добавляя пространство слева. Например:

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-4 col-md-offset-2">
      <!-- Первый div -->
    </div>
    <div class="col-md-4">
      <!-- Второй div -->
    </div>
  </div>
</div>

В этом случае, первый div смещается влево на две колонки, что позволяет центрировать оба блока на странице.

В центре внимания: Передовые возможности flex

Bootstrap 4 использует flex-утилиты для гибкого выравнивания. Примените d-flex и justify-content-center для центровки элементов по горизонтали и вертикали.

Визуализация

Два синхронных пловца (🏊‍♂️🏊‍♀️), которые символизируют наши div-блоки, плавают в центре бассейна (что соответствует нашей веб-странице).

Ширина бассейна (веб-страница): [🌊🌊🌊🌊🌊🌊🌊🌊🌊]
Пловцы (Div-блоки):             🏊‍♂️🏊‍♀️

С использованием Bootstrap пловцы (блоки div) идеально центрированы:

С Bootstrap:         🌊🌊🏊‍♂️🏊‍♀️🌊🌊

С помощью Bootstrap наши пловцы (блоки div) находятся в гармонии, расположены сбалансированно и выровнены по центру страницы.

Разнообразные классы колонок для адаптивности

Использование разнообразных сеточных классов col-* позволяет настраивать адаптивность блоков под разные размеры экранов. Классы col-xx обеспечивают общую адаптивность, а col-lg, col-md, col-sm, col-xs — нацелены на определённые брейкпоинты.

<div class="container">
  <div class="row justify-content-center">
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
      <!-- Первый div -->
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
      <!-- Второй div -->
    </div>
  </div>
</div>

Такое адаптивное построение сетки с помощью Bootstrap способствует созданию чёткой и легко поддерживаемой структуры кода.

Когда

В Bootstrap 3 класс .center-block уже не актуален и не слишком хорошо сочетается с сеточными элементами. В Bootstrap 4 для выравнивания рекомендуется использовать flex-утилиты вместо класса .center-block.

Полезные материалы

1. Flex · Bootstrap — официальная документация Bootstrap по flex-утилитам.
2. Полное руководство по Flexbox | CSS-Tricks — подробное описание flexbox в CSS.
3. Система сеток · Bootstrap — подробное объяснение сеточной системы Bootstrap для адаптивного дизайна.
4. Введение в основы CSS Box Model – CSS: Cascading Style Sheets | MDN — разъяснение блочной модели CSS.
5. Шпаргалка Bootstrap 4 – полный список классов и компонентов — справочник по классам и компонентам Bootstrap 4.
6. Адаптивный дизайн – Обучение веб-разработке | MDN — руководство по применению адаптивного веб-дизайна с использованием Bootstrap.