Сергей delphinpro

Зачем привязка к бутстрапу, если на css вам хватит двух-трех строк кода для описания желаемого?

мобильники - вообще ничего не делаете. Блоки и так уже идут в столбик.

Дальше простой запрос

@media (min-width: 768px) /* ширина по вашему хотению */ {
  .block {  
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .yellow {
    grid-column: span 3;
  }
}

Добавить несколько строк своих стилей и не пытаться натянуть сову на глобус.

<div class="my-grid">
  <div class="my-cell"></div>
  <div class="my-cell"></div>
  <div class="my-cell"></div>
  <div class="my-cell"></div>
  <div class="my-cell"></div>
</div>

.my-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  height: 100vh;
}
.my-cell:first-child {
  grid-row: span 2;
}

https://getbootstrap.com/.../modal/#via-javascript
https://getbootstrap.com/.../modal/#methods

Если вы хотите использовать именно бутстраповскую сетку, то есть два пути.

1. Попытаться разделить ваш макет на 12 колонок и как-то примерно распределить картинки по колонкам.

2. Измерить ширины картинок в вашем макете, перевести их в процентное выражение от общей ширины и потом используя доступные scss-миксины сетки, сгенерировать необходимые классы.

Лично мне оба варианта кажутся совершенно не подходящими для данного случая.
Просто возьмите и сверстайте этот блок на гридах. Bootstrap не запрещает вам использовать собственные css-классы.

Взять и убрать всё

<nav class="navbar">
      <div class="container-fluid">
          <div class="navbar-nav">
            <a class="nav-link" href="#">Н</a>
            <a class="nav-link" href="#">О</a>
            <a class="nav-link" href="#">П</a>
            <a class="nav-link" href="#">Н</a>
          </div>
      </div>
</nav>

Зачем всё это?
Посмотрите на картинку иначе: кнопка просто висит поверх линии.

<hr>
<button>Наверх</button>

button {
  transform: translateY(-50%);
}

В BS не продумано такое поведение. Штатными средствами не решается.
Тут лучше отказаться от дата-атрибутов и вручную через js управлять модалками. То есть, написать небольшой менеджер модалок.

https://getbootstrap.com/docs/5.2/layout/css-grid/
Никак. Сетки в пятом бутстрапе экспериментальные. Вероятно в шестой версии появится что-то адекватное.

так же как и без бутстрапа.

button.addEventListener('click', ()=>{
  input.disabled = !input.disabled;
});

<div>
  <input className="form-control" id="inputFilter" />
  <icon>
</div>

div {
  position: relative;
}

icon {
  position: absolute;  
  right: 0;
  top: 0;
  pointer-events: none;
}

В документации есть пример переключения между модальными окнами
https://getbootstrap.com/docs/5.2/components/modal...