Skip to main content

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-4 bg-secondary">
      <div class="inner h-100">
      Lorem ipsum dolor sit amet
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-4 bg-secondary">
      <div class="inner h-100">
      Lonsectetuer adipiscing elit. Aenean commodo ligula eget dolor.
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-4 bg-secondary">
      <div class="inner h-100">
      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-4 bg-secondary">
      <div class="inner h-100">
    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-4 bg-secondary">
      <div class="inner h-100">
    Lretium quis, sem. Nulla consequat massa quis enim.
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-4 bg-secondary">
      <div class="inner h-100">
    Aenean commodo massa quis enim.
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-4 bg-secondary">
      <div class="inner h-100">
    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-4 bg-secondary">
      <div class="inner h-100">
    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-4 bg-secondary">
      <div class="inner h-100">
    Loltricies nec, pellentesque eu, quis enim.
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-4 bg-secondary">
      <div class="inner h-100">
    Ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis.
      </div>
    </div>
  </div>
</div>

If needed