Алексей Голягин

Причем здесь модальное окно? Вам нужна выпадающая по клику поисковая строка (обычный скрытый div с формой поиска, который становится не скрытым при клике на иконку). По факту это к bootstrap не относится, обычный JS и CSS.
Загуглите как добавить/убрать класс при клике. Вот описана верстка шапки на бутстрап, как раз с выпадающей формой поиска.

Чет прям какой то трэш с html и css )))

.container-fluid .row {
  margin-left: -5%;
}

.img-fluid {
  padding-left: 50%; /* Отступы в процентах */
  max-width: 200%; /* Максимальная ширина 100% */
  max-height: auto; /* Максимальная высота автоматически */
  left: 0;
  width: 200%;
  height: 600px; ...

- это вас кто так научил?)))

<div class="col-md-6">
              <div class="col-12">
                  <div class="img-fluid" alt="Image"></div>
              </div>
          </div>

- col в col обычно не вкладывают (надо .row > .col)
В общем либо у вас учителя прям печальные, либо верстка это не ваше)

Вариант 1 (скорее всего не подойдет):
<div class="row row-cols-auto">
Вариант 2:

<div class="row row-cols-3 row-cols-md-4 row-cols-xl-6 row-cols-xxl-8">

т.к. класса для 8 колонок нет, придется немного расширить сетку:

@media (min-width: 1400px) {
  .row-cols-xxl-8 > * {
    flex: 0 0 auto;
    width: 12,5%;
  }
}

Написано для bootstrap 5.1

<div class="promo row g-0">
    <div class="col-3">
      <div class="block">Промо текст</div>
    </div>
    <div class="col-9">
      <div class="block">Клиент</div>
    </div>
  </div>

Если используете бутстрап версии 5.1

5я версия бутстрапа не использует jquery. Взял Starter template вставил код вашего меню - бургер работает

Это обычный слайдер как я понял из диалога выше: https://bootstrap5.ru/docs/components/carousel#wit... - вот с дотс слайдер из его разметки убрать (удалить) боковые стрелки:

<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </a>

Загугните DateTimePicker, вот например https://xdan.ru/samij-udobnij-datetimepicker.html

class="col-md-4 col-6"

Нравится MODX? берите MODX! Закалку сделайте ему нормальную и не вскроют его не кто! Можно так закалить что не одна определялка и умный глаз не определит что сайт на модх.

Странный у вас вопрос. Они и без классов left и right, col-lg-2 и так станет слева, и col-lg-10 справа

Я бы сделал примерно так:

<div class="container">
    <div class="row">
        <div class="col-md-3">дата</div>
        <div class="col-md-8 col-md-offset-1">хлебные крошки</div>
    </div>
    <div class="row">
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-3">Поделится</div>
                <div class="col-md-8 col-md-offset-1">Название статьи</div>
            </div>
            <div class="col-md-10 col-md-offset-1">Текст статьи</div>
        </div>
        <div class="col-md-3 col-md-offset-1">содержимое</div>
        
      </div>
</div>

col-md-offset-1 - для отступов - можно без них, тогда нужно оборачивать содержимое в отдельные контейнеры и давать им отступы при помощи css и в col-md-цифра увеличится где offset

<a class="ставим класс" href="#">содержимое</a>

Сделайте сами. Font-avesome + немного css + open graph разметка + немного кода prntscr.com/j4msif . Код можно взять из яндекс кнопок к примеру https://yastatic.net/share2/share.js prntscr.com/j4mtly ну соответственно подгоняем под modx

Можно! Но правильность зависит от реализации, к примеру делаем 2х колончатый шаблон: 1 в первой колонке разкладка еще из 2х колонок:

<section>
    <div class="content">
        <div class="row">
            <div class="col-sm-8">
               <div class="row">
                   <div class="col-sm-6">
                       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam qui ut aut dolore nulla, quibusdam. Possimus laborum molestias harum officia laudantium! Et libero quis, architecto distinctio esse iure commodi vero.
                   </div>
                   <div class="col-sm-6">
                       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam qui ut aut dolore nulla, quibusdam. Possimus laborum molestias harum officia laudantium! Et libero quis, architecto distinctio esse iure commodi vero.
                   </div>
               </div>                
            </div>
            <div class="col-sm-4">
                контент сайтбара
            </div>
        </div>
    </div>
</section>