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

{{< example>}}

<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> {{< /example >}}

If needed