Как спозиционировать правильно данные элементы элеенты с помощью Bootstrap или css?

Question

Я столкнулся с проблемой при позиционировании элементов. Используя библиотеку Bootstrap я создал данную структуру:

<section class="reasons">
  <div class="container">
    <div class="row">
      <div class="col-md-8 offset-md-2">
        <h2 class="reasons__h2">8 причин начать работать с нами</h2>
      </div>
      <div class="reasons__items col-md-6"></div>
      <div class="reasons__items col-md-6 "></div>
      <div class="reasons__items col-md-6 "></div>
      <div class="reasons__items col-md-6 "></div>
      <div class="reasons__items col-md-6"></div>
      <div class="reasons__items col-md-6"></div>
      <div class="reasons__items col-md-6"></div>
      <div class="reasons__items col-md-6"></div>
    </div>
  </div>
</section>

И у меня получилось вот что.

Но должно получится вот так:

Подскажите пожалуйста как спозиционировать данные элементы элементы? Может быть есть такие функции в Bootstrap, или какие css свойства можно применить?

Answer 1

я бы сделал это так в родительском блоке прописал

   display: flex;
        flex-direction: column;
        flex-wrap: wrap;

при этом поднял

<div class="col-md-8 offset-md-2">
                    <h2 class="reasons__h2">8 причин начать работать с нами</h2>
</div>

на уровень выше или так же если используется свойство display: grid; вместо display: flex; то просто прописал

.parent {
  display: grid;
  grid-auto-flow: column;
}

есть конечно множество способ как это сделать

БЛОГ НА HUSL

Как спозиционировать правильно данные элементы элеенты с помощью Bootstrap или css?

Ответы (1 шт):