12 Column Grid System

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

Basic Grid Example

Column 12

Column 6

Column 4

Column 3

Column 2

<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 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 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

Horizontal alignment (justify-content-center)

Column 4

Horizontal alignment (justify-content-end)

Column 4

Horizontal alignment (justify-content-between)

Column 4

Horizontal alignment (justify-content-around)

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

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

<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>