12 Column Grid System

A responsive, flexible 12-column grid system with multiple breakpoints.

Basic Grid Example

Column 12
Column 6
Column 6
Column 4
Column 4
Column 4
Column 3
Column 3
Column 3
Column 3
Column 2
Column 2
Column 2
Column 2
Column 2
Column 2
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
<div class="grid-example"> <div class="row"> <div class="col-12">Column 12</div> </div> <div class="row"> <div class="col-6">Column 6</div> <div class="col-6">Column 6</div> </div> <div class="row"> <div class="col-4">Column 4</div> <div class="col-4">Column 4</div> <div class="col-4">Column 4</div> </div> <div class="row"> <div class="col-3">Column 3</div> <div class="col-3">Column 3</div> <div class="col-3">Column 3</div> <div class="col-3">Column 3</div> </div> <div class="row"> <div class="col-2">Column 2</div> <div class="col-2">Column 2</div> <div class="col-2">Column 2</div> <div class="col-2">Column 2</div> <div class="col-2">Column 2</div> <div class="col-2">Column 2</div> </div> <div class="row"> <div class="col-1">1</div> <div class="col-1">1</div> <div class="col-1">1</div> <div class="col-1">1</div> <div class="col-1">1</div> <div class="col-1">1</div> <div class="col-1">1</div> <div class="col-1">1</div> <div class="col-1">1</div> <div class="col-1">1</div> <div class="col-1">1</div> <div class="col-1">1</div> </div> </div>

Mixed Column Sizes

Column 8
Column 4
Column 3
Column 6
Column 3
Column 2
Column 8
Column 2
<div class="grid-example"> <div class="row"> <div class="col-8">Column 8</div> <div class="col-4">Column 4</div> </div> <div class="row"> <div class="col-3">Column 3</div> <div class="col-6">Column 6</div> <div class="col-3">Column 3</div> </div> <div class="row"> <div class="col-2">Column 2</div> <div class="col-8">Column 8</div> <div class="col-2">Column 2</div> </div> </div>

Row Without Gutters

Column 6 (No Gutter)
Column 6 (No Gutter)
Column 4 (No Gutter)
Column 4 (No Gutter)
Column 4 (No Gutter)
<div class="grid-example"> <div class="row-no-gutters"> <div class="col-6">Column 6 (No Gutter)</div> <div class="col-6">Column 6 (No Gutter)</div> </div> <div class="row-no-gutters"> <div class="col-4">Column 4 (No Gutter)</div> <div class="col-4">Column 4 (No Gutter)</div> <div class="col-4">Column 4 (No Gutter)</div> </div> </div>

Column Offsets

Column 4
Column 4 with offset 4
Column 3 with offset 3
Column 3 with offset 3
Column 6 with offset 3
<div class="grid-example"> <div class="row"> <div class="col-4">Column 4</div> <div class="col-4 offset-4">Column 4 with offset 4</div> </div> <div class="row"> <div class="col-3 offset-3">Column 3 with offset 3</div> <div class="col-3 offset-3">Column 3 with offset 3</div> </div> <div class="row"> <div class="col-6 offset-3">Column 6 with offset 3</div> </div> </div>

Flexbox Alignment

Horizontal alignment (justify-content-start)
Column 4
Column 4
Horizontal alignment (justify-content-center)
Column 4
Column 4
Horizontal alignment (justify-content-end)
Column 4
Column 4
Horizontal alignment (justify-content-between)
Column 4
Column 4
Horizontal alignment (justify-content-around)
Column 4
Column 4
<div class="example-label">Horizontal alignment (justify-content-start)</div> <div class="grid-example"> <div class="row justify-content-start"> <div class="col-4">Column 4</div> <div class="col-4">Column 4</div> </div> </div> <div class="example-label">Horizontal alignment (justify-content-center)</div> <div class="grid-example"> <div class="row justify-content-center"> <div class="col-4">Column 4</div> <div class="col-4">Column 4</div> </div> </div> <div class="example-label">Horizontal alignment (justify-content-end)</div> <div class="grid-example"> <div class="row justify-content-end"> <div class="col-4">Column 4</div> <div class="col-4">Column 4</div> </div> </div> <div class="example-label">Horizontal alignment (justify-content-between)</div> <div class="grid-example"> <div class="row justify-content-between"> <div class="col-4">Column 4</div> <div class="col-4">Column 4</div> </div> </div> <div class="example-label">Horizontal alignment (justify-content-around)</div> <div class="grid-example"> <div class="row justify-content-around"> <div class="col-4">Column 4</div> <div class="col-4">Column 4</div> </div> </div>

Column Auto-Layout

Auto column
Auto column
Auto column
Auto column
Fixed column (6)
Auto column
<div class="grid-example"> <div class="row"> <div class="col">Auto column</div> <div class="col">Auto column</div> <div class="col">Auto column</div> </div> <div class="row"> <div class="col">Auto column</div> <div class="col-6">Fixed column (6)</div> <div class="col">Auto column</div> </div> </div>

Containers

Container with responsive max-width
.container - Responsive fixed width container
Max-widths at different breakpoints:
sm: 540px | md: 720px | lg: 960px | xl: 1140px | xxl: 1320px
Container fluid (full-width)
.container-fluid - Full width container (100% width at all breakpoints)
<div class="example-label">Container with responsive max-width</div> <div class="container"> <div class="demo-box"> .container - Responsive fixed width container<br> Max-widths at different breakpoints:<br> sm: 540px | md: 720px | lg: 960px | xl: 1140px | xxl: 1320px </div> </div> <div class="example-label">Container fluid (full-width)</div> <div class="container-fluid"> <div class="demo-box"> .container-fluid - Full width container (100% width at all breakpoints) </div> </div>

Responsive Grid

Responsive Column
xs: 12 columns
sm: 6 columns
md: 4 columns
lg: 3 columns
Responsive Column
xs: 12 columns
sm: 6 columns
md: 4 columns
lg: 3 columns
Responsive Column
xs: 12 columns
sm: 6 columns
md: 4 columns
lg: 3 columns
Responsive Column
xs: 12 columns
sm: 6 columns
md: 4 columns
lg: 3 columns
<div class="grid-example"> <div class="row"> <div class="col-12 col-sm-6 col-md-4 col-lg-3"> Responsive Column<br> <small> xs: 12 columns<br> sm: 6 columns<br> md: 4 columns<br> lg: 3 columns </small> </div> <div class="col-12 col-sm-6 col-md-4 col-lg-3"> Responsive Column<br> <small> xs: 12 columns<br> sm: 6 columns<br> md: 4 columns<br> lg: 3 columns </small> </div> <div class="col-12 col-sm-6 col-md-4 col-lg-3"> Responsive Column<br> <small> xs: 12 columns<br> sm: 6 columns<br> md: 4 columns<br> lg: 3 columns </small> </div> <div class="col-12 col-sm-6 col-md-4 col-lg-3"> Responsive Column<br> <small> xs: 12 columns<br> sm: 6 columns<br> md: 4 columns<br> lg: 3 columns </small> </div> </div> </div>