@extends('layouts.master') @section('title', 'Grid') @section('css') @endsection @section('breadcrumb')

Grid

@endsection @section('main_content')

Grid Options

Bootstrap grid system allow all six breakpoints, and any breakpoints you can customize.

Extra small

<576px

Small

≥576px

Medium

≥768px

Large

≥992px

Extra large

≥1200px

Extra extra large

≥1400px
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Max container width None (auto) 540px 720px 960px 1140px 1320px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
# of columns 12
Gutter width 1.5rem (.75rem on left and right)
Nestable Yes
Offsets Yes
Column ordering Yes

Grid for Columns

Use predefined grid classes. Using col-md-* you can set the grid system.

col-md-1
col-md-2
col-md-2
col-md-3
col-md-4
col-md-5
col-md-7
col-md-6
col-md-6
col-md-8
col-md-4
col-md-9
col-md-3
col-md-10
col-md-2
col-md-12

Enable Flex Behaviors

Use d-flex and d-inline-flex classes to set the flex behaviors.

I'm a flexbox container!
I'm an inline flexbox container!
<div class="flex-behaviors">
 <div class="d-flex p-2">I'm a flexbox container!</div>
 <div class="d-inline-flex p-2">I'm an inline flexbox container!</div>
</div>

Horizontal Gutters

gx-* classes can be used to control the horizontal gutter widths. The container or container-fluid parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility.

Custom column padding
Custom column padding
<div class="container px-4 text-center">
 <div class="row gx-5 gy-sm-0 g-3">
   <div class="col">
     <div class="p-3"><span>Custom column padding</span></div>
   </div>
   <div class="col">
     <div class="p-3"><span>Custom column padding</span></div>
   </div>
 </div>
</div>

Vertical Gutters

gy-* classes control vertical space between elements in rows, especially when they wrap and wider spacing can overflow the page and wrap the row with overflow-hidden to prevent this.

Custom column padding
Custom column padding
Custom column padding
Custom column padding
<div class="container overflow-hidden text-center">
 <div class="row gy-3">
   <div class="col-6">
     <div class="p-3"><span>Custom column padding</span></div>
   </div>
   <div class="col-6">
     <div class="p-3"><span>Custom column padding</span></div>
   </div>
   <div class="col-6">
     <div class="p-3"><span>Custom column padding</span></div>
   </div>
   <div class="col-6">
     <div class="p-3"><span>Custom column padding</span></div>
   </div>
 </div>
</div>

Row Columns Gutters

Gutter classes can also be added to row columns. In the following example, we use responsive row columns and responsive gutter classes.

Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
<div class="container text-center">
 <div class="row row-cols-2 row-cols-xxl-5 row-cols-xl-4 row-cols-md-3 g-2 g-lg-3">
   <div class="col">
     <div class="p-10"><span>Row column</span></div>
   </div>
   <div class="col">
     <div class="p-10"><span>Row column</span></div>
   </div>
   <div class="col">
     <div class="p-10"><span>Row column</span></div>
   </div>
   <div class="col">
     <div class="p-10"><span>Row column</span></div>
   </div>
   <div class="col">
     <div class="p-10"><span>Row column</span></div>
   </div>
   <div class="col">
     <div class="p-10"><span>Row column</span></div>
   </div>
   <div class="col">
     <div class="p-10"><span>Row column</span></div>
   </div>
   <div class="col">
     <div class="p-10"><span>Row column</span></div>
   </div>
   <div class="col">
     <div class="p-10"><span>Row column</span></div>
   </div>
   <div class="col">
     <div class="p-10"><span>Row column</span></div>
   </div>
 </div>
</div>

No Gutters

Use g-0 on the row to eliminate spacing between columns. container and use mx-0 on the row to prevent overflow.

col-sm-6 & col-md-8
col-md-4
<div class="row g-0 text-center">
 <div class="col-sm-6 col-md-8">
   <div class="p-3"><span>col-sm-6 & col-md-8</span></div>
 </div>
 <div class="col-6 col-md-4"> 
   <div class="p-3"><span class="col-6">col-md-4</span></div>
 </div>
</div>

Vertical Alignment

Use align-items-* class to set the vertical alignment.

one column
two column
one column
two column
one column
two column
<div class="row">
 <div class="col-lg-4">
   <div class="row grid-vertical align-items-start m-1 g-2">
     <div class="col-6"><span class="bg-white">one column</span></div>
     <div class="col-6"><span class="bg-white">two column</span></div>
   </div>
 </div>
 <div class="col-lg-4">
   <div class="row grid-vertical align-items-center m-1 g-2">
     <div class="col-6"><span class="bg-white">one column</span></div>
     <div class="col-6"><span class="bg-white">two column</span></div>
   </div>
 </div>
 <div class="col-lg-4">
   <div class="row grid-vertical align-items-end m-1 g-2">
     <div class="col-6"><span class="bg-white">one column</span></div>
     <div class="col-6"><span class="bg-white">two column</span></div>
   </div>
 </div>
</div>
Class Value of the class
.align-items-* start / center / end / baseline / stretch

Horizontal Alignment

Use justify-content-* class to set the horizontal alignment.

One column
Two column
One column
Two column
One column
Two column
<div class="row justify-content-start">
 <div class="col-5">
   <span class="bg-white">One column</span>
 </div>
 <div class="col-5">
   <span class="bg-white">Two column</span>
 </div>
</div>
<div class="row justify-content-center">
 <div class="col-5">
   <span class="bg-white">One column</span>
 </div>
 <div class="col-5">
   <span class="bg-white">Two column</span>
 </div>
</div>
<div class="row justify-content-end">
 <div class="col-5">
   <span class="bg-white">One column</span>
 </div>
 <div class="col-5">
   <span class="bg-white">Two column</span>
 </div>
</div>
Class Value of the class
.justify-content-* start / center / end / around / between

Nesting

To nest your content with the default grid, add a new row and set of col-sm-* columns within an existing col-sm-* column.

Level 1: .col-3
Level 2: .col-5
Level 2: .col-7
Level 1: .col-2
Level 1: .col-10
Level 2: .col-4 
<div class="row g-3">
 <div class="col-3"><span>Level 1: .col-3</span></div>
 <div class="col-9">
   <div class="grid-wrapper pb-0">
     <div class="row g-2">
       <div class="col-5"><span class="border border-2">Level 2: .col-5</span></div>
       <div class="col-7"><span class="border border-2">Level 2: .col-7</span></div>
     </div>
   </div>
 </div>
 <div class="col-8">
   <div class="grid-wrapper pb-0">
     <div class="row g-2">
       <div class="col-sm-2 col-4"><span class="border border-2">Level 1: .col-2</span></div>
       <div class="col-sm-10 col-8"><span class="border border-2">Level 1: .col-10</span></div>
     </div>
   </div>
 </div>
 <div class="col-4"><span>Level 2: .col-4</span></div>
</div>

Order

Use order class, you can set the order position.

First Item (order-3)
Second Item (order-first)
Third Item (order-last)
Fourth Item (order-2)
fifth Item (order-5)
sixth Item (order-4)
<div class="row g-2">
 <div class="col-3 order-3"><span>First Item (order-3)</span></div>
 <div class="col-5 order-first"><span>Second Item (order-first)</span></div>
 <div class="col-4 order-last"><span>Third Item (order-last)</span></div>
 <div class="col-3 order-2"><span>Fourth Item (order-2)</span></div>
 <div class="col-sm-2 col-4 order-5"><span>fifth Item (order-5)</span></div>
 <div class="col-sm-6 col-4 order-4"><span>sixth Item (order-4)</span></div>
</div>
Class Value of the class
.order-* first / 2 / 3 / 4 / 5 / last

Offset

Move columns to the right using .offset-sm-* classes. These classes increase the left margin of a column by * columns.

col-5 offset-sm-3
col-2 offset-sm-2
col-4 offset-sm-2
col-3 offset-sm-2
<div class="row g-2">
 <div class="col-sm-5 col-4 offset-sm-3 offset-2"><span>col-5 offset-sm-3</span></div>
 <div class="col-sm-2 col-4 offset-sm-2 offset-1"><span>col-2 offset-sm-2</span></div>
 <div class="col-sm-4 col-5 offset-2"><span>col-4 offset-sm-2</span></div>
 <div class="col-sm-3 col-4 offset-sm-2 offset-1"><span>col-3 offset-sm-2</span></div>
</div>
Class Value of the class
.offset-*-* 1 / 2 / ... / 10 / 11
@endsection @section('scripts') @endsection