Как сделать такой layout на bootstrap 5?

Для создания такого макета на Bootstrap 5 вы можете использовать сочетание сетки (grid) и классов компонентов.

Вам понадобятся следующие компоненты Bootstrap:

1. Контейнер (Container): Это основной компонент, используемый для обертывания всех элементов вашего макета. Он предоставляет отступы по бокам и обеспечивает выровненность содержимого внутри сетки.

<div class="container">
  <!-- Ваш код -->
</div>

2. Сетка (Grid): Bootstrap предлагает сетку с 12-ти колонками, которую можно использовать для создания адаптивного макета. Вы можете разделить контейнер на строки (rows) и колонки (columns). Например, для создания двух колонок размеров 6 и 6:

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <!-- Превая колонка -->
    </div>
    <div class="col-md-6">
      <!-- Вторая колонка -->
    </div>
  </div>
</div>

3. Навигационное меню (Navbar): Вы можете использовать компонент navbar для создания навигационного меню в верхней части вашего макета.

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <!-- Содержимое навигационного меню -->
  </nav>
</div>

Вы можете использовать дополнительные классы, такие как .bg-light, чтобы задать цвет фона для меню.

4. Список (List): Для создания списков или навигационных панелей можете использовать компоненты списка.

<div class="container">
  <ul class="list-group">
    <li class="list-group-item">Элемент списка 1</li>
    <li class="list-group-item">Элемент списка 2</li>
    <li class="list-group-item">Элемент списка 3</li>
  </ul>
</div>

5. Карты (Cards): Вы можете использовать компоненты карт для создания блоков контента с изображениями, заголовками и текстом.

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="card">
        <img src="..." class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Заголовок карты</h5>
          <p class="card-text">Описание карты.</p>
        </div>
      </div>
    </div>
    <!-- Добавьте дополнительные карты, если нужно -->
  </div>
</div>

Это основные компоненты, которые могут пригодиться при создании указанного вами макета на Bootstrap 5. Конечно, вы можете также использовать другие классы и стили Bootstrap для настройки внешнего вида элементов согласно вашим потребностям.