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

Причем здесь модальное окно? Вам нужна выпадающая по клику поисковая строка (обычный скрытый 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)
В общем либо у вас учителя прям печальные, либо верстка это не ваше)

Чтобы человек при заходе на сайт сразу увидел модальное окно, то в верхний div добавьте класс show и стиль display: block как подсказал выше Nik Faraday. Но вам судя по комментариям нужно немного другое: чтоб когда человек заходил на сайт оно автоматом открывалось при помощи JS ... и скорее всего не прям тут же, а с задержкой к примеру в пару секунд (по таймеру), тогда есть как минимум 3 варианта (JS):

1. использование функции setTimeout
   
2. использование события DOMContentLoaded
   
3. использование события load
   

Вот пример JS 1го варианта, конкретно под Bootstrap 5:

// Получите ссылку на модальное окно
const myModal = new bootstrap.Modal(document.getElementById('myModal'));
// Откройте модальное
myModal.show();

Источники: web-revenue.ru, bootstrapdocs.ru (раздел FAQ).

<div class="row ">
   <div class="col-sm-6">
        логотип
    </div>

    <div class="col-sm-6">
       <div class="row">
             <div class="col ">
                  CONTACTS
             </div>
              <div class="col">
                  форма поиска
              </div>
       </div>
     </div>
</div>

Это мой бывший проект (продан). Там просто залиты оригинальные примеры и частично переведены (вот ссылка на свежие примеры с гитхаба) - скачивайте, и смотрите в редакторе)

Вариант 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

Примерно так, разметку только подгоните под свою

<?php
     $args = array(
     'post_type' => 'slide',
     'posts_per_page' => -1,
     'order' => 'ASC',
   );
$slide = new WP_Query($args);?>
<?php if ($slide->have_posts()): ?>
<div id="slider">
        <div class="bd-example">
            <div id="carouselExampleCaptions" class="carousel slide carousel-fade" data-ride="carousel" data-interval=10000>
                <div class="">
                    <ol class="carousel-indicators">
                        <?php $i = 0;while ($slide->have_posts()): $publicity->the_post();?>
                            <li data-target="#carousel-example-generic" data-slide-to="<?php echo $i ?>" class="<?php if ($i === 0): ?>active<?php endif;?>"></li>
                        <?php $i++; endwhile;?>
                    </ol>
                    <div class="carousel-inner">
                        <?php $i = 0;while ($slide->have_posts()): $slide->the_post();?
                                <div class="carousel-item <?php if (0 == $i) {echo ' active';}?>" style="background:url('<?php the_post_thumbnail_url('full');?>') center center no-repeat; background-size: cover; min-height: 100vh;">
                                    <div class="carousel-caption d-none d-md-block">
                                        <div class="row align-items-center ">
                                            <div class="col-lg-4 title">
                                                <span><?php the_title();?></span>
                                                <h2><?php the_content();?></h2>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        <?php $i++;endwhile;?>
                    </div>
                </div>
            </div>
        </div>
    </div>
   <?php wp_reset_postdata();endif;?>

<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 вставил код вашего меню - бургер работает

Вывод data-атрибутов в модальном окне

Это обычный слайдер как я понял из диалога выше: 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"

Код меню вы берете с 5 бутстрапа, а JS подключаете с 4го и хотите чтобы у вас работал бургер) Вы либо чисто 5я версию используйте (работает без jquery), либо 4ю)

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