Grid Layouts
Various grid layouts to support page content
6-6 layout (2 columns)
<div class="container-xxl">
<div class="row gy-2">
<!-- BEGIN: Optional section opening content area -->
<div class="col-md-12">
...
</div>
<!-- END: Optional section opening content area -->
<div class="col-md-6">
...
</div>
<div class="col-md-6">
...
</div>
<!-- BEGIN: Optional section closing content area -->
<div class="col-md-12">
...
</div>
<!-- END: Optional section closing content area -->
</div>
</div>
5-5 layout (centered)
<div class="container-xxl">
<div class="row gy-2 justify-content-center">
<!-- BEGIN: Optional section opening content area -->
<div class="col-xl-10">
...
</div>
<!-- END: Optional section opening content area -->
<div class="col-md-6 col-xl-5">
...
</div>
<div class="col-md-6 col-xl-5">
...
</div>
<!-- BEGIN: Optional section closing content area -->
<div class="col-xl-10">
...
</div>
<!-- END: Optional section closing content area -->
</div>
</div>
5-5 layout (space between)
<div class="container-xxl">
<div class="row gy-2 justify-content-between">
<!-- BEGIN: Optional section opening content area -->
<div class="col-md-12">
...
</div>
<!-- END: Optional section opening content area -->
<div class="col-md-6 col-xl-5">
...
</div>
<div class="col-md-6 col-xl-5">
...
</div>
<!-- BEGIN: Optional section closing content area -->
<div class="col-md-12">
...
</div>
<!-- END: Optional section closing content area -->
</div>
</div>
5-5 layout (space around)
<div class="container-xxl">
<div class="row gy-2 justify-content-around">
<!-- BEGIN: Optional section opening content area -->
<div class="col-xl-11">
...
</div>
<!-- END: Optional section opening content area -->
<div class="col-md-6 col-xl-5">
...
</div>
<div class="col-md-6 col-xl-5">
...
</div>
<!-- BEGIN: Optional section closing content area -->
<div class="col-xl-11">
...
</div>
<!-- END: Optional section closing content area -->
</div>
</div>
4-4-4 layout (3 columns)
<div class="container-xxl">
<div class="row gy-2">
<!-- BEGIN: Optional section opening content area -->
<div class="col-md-12">
...
</div>
<!-- END: Optional section opening content area -->
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<!-- BEGIN: Optional section closing content area -->
<div class="col-md-12 pt-4">
...
</div>
<!-- END: Optional section closing content area -->
</div>
</div>
3-3-3-3 layout (4 columns)
<div class="container-xxl">
<div class="row gy-2">
<!-- BEGIN: Optional section opening content area -->
<div class="col-md-12">
...
</div>
<!-- END: Optional section opening content area -->
<div class="col-md-6 col-xl-3">
...
</div>
<div class="col-md-6 col-xl-3">
...
</div>
<div class="col-md-6 col-xl-3">
...
</div>
<div class="col-md-6 col-xl-3">
...
</div>
<!-- BEGIN: Optional section closing content area -->
<div class="col-md-12">
...
</div>
<!-- END: Optional section closing content area -->
</div>
</div>
6-3-3 layout (3 columns uneven)
<div class="container-xxl">
<div class="row gy-2">
<!-- BEGIN: Optional section opening content area -->
<div class="col-12">
...
</div>
<!-- END: Optional section opening content area -->
<div class="col-xl-6">
...
</div>
<div class="col-md-6 col-xl-3">
...
</div>
<div class="col-md-6 col-xl-3">
...
</div>
<!-- BEGIN: Optional section closing content area -->
<div class="col-12 pt-4">
...
</div>
<!-- END: Optional section closing content area -->
</div>
</div>