Grids

Use the bootstrap grid column classes to create responsive grids. Rules to follow:

Always wrap rows in a container
Combine column classes to create responsive grids
Keep the context in mind, modals behave different from #region-main
Don’t add to much styles to the grid container, us an inner div

Lorem ipsum dolor sit amet

Lonsectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

ascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu.

Lretium quis, sem. Nulla consequat massa quis enim.

Aenean commodo massa quis enim.

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Aenean commodo ligula eget dolor. Aenean massa. Cu quis enim.

Loltricies nec, pellentesque eu, quis enim.

Ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis.

<div class="container-fluid">
  <div class="row">
    <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-3">
      <div class="inner h-100 border p-1">
      Lorem ipsum dolor sit amet
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-3">
      <div class="inner h-100 border p-1">
      Lonsectetuer adipiscing elit. Aenean commodo ligula eget dolor.
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-3">
      <div class="inner h-100 border p-1">
      Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-3">
      <div class="inner h-100 border p-1">
    ascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu.
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-3">
      <div class="inner h-100 border p-1">
    Lretium quis, sem. Nulla consequat massa quis enim.
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-3">
      <div class="inner h-100 border p-1">
    Aenean commodo massa quis enim.
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-3">
      <div class="inner h-100 border p-1">
    Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-3">
      <div class="inner h-100 border p-1">
    Aenean commodo ligula eget dolor. Aenean massa. Cu quis enim.
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-3">
      <div class="inner h-100 border p-1">
    Loltricies nec, pellentesque eu, quis enim.
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-3">
      <div class="inner h-100 border p-1">
    Ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis.
      </div>
    </div>
  </div>
</div>

If needed