Как растянуть блок до конца экрана в bootstrap5?

В Bootstrap 5 универсальной класс для растяжения блоков на всю ширину экрана (от края одного края экрана до другого) больше нет. Вместо этого в Bootstrap 5 предлагается новый класс "container-fluid", который позволяет создавать контейнеры на полную ширину. Ниже я подробно опишу, как использовать этот класс для растяжения блоков до конца экрана.

1. Во-первых, вам нужно создать контейнер с классом "container-fluid". Например, если вы хотите растянуть блок <div> до конца экрана, можно создать следующий HTML-код:

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <!-- Ваше содержимое здесь -->
    </div>
  </div>
</div>

2. Затем вы можете использовать класс "row" для создания строки внутри контейнера. Например:

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <!-- Ваше содержимое здесь -->
    </div>
  </div>
</div>

3. Внутри строки вы можете использовать класс "col" для создания колонок. В примере ниже я создаю одну колонку, которая займет всю доступную ширину экрана:

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <!-- Ваше содержимое здесь -->
    </div>
  </div>
</div>

4. Теперь блок будет растянут на всю ширину экрана. Вы можете добавить свои стили и контент внутри этого блока по вашему усмотрению.

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <h1>Пример</h1>
      <p>Этот блок растягивается на всю ширину экрана.</p>
    </div>
  </div>
</div>

Важно отметить, что класс "container-fluid" создает блок, который полностью растянутый на всю ширину экрана, но содержимое внутри этого блока все равно будет ограничено стандартной шириной контента в Bootstrap, что составляет около 1140 пикселей. Если вам нужно растянуть контент на всю ширину экрана без ограничений, вам придется добавить свои пользовательские стили или использовать другие инструменты.