Getting Started

## Grid System

Use Bootstrap's powerful mobile-first flexbox grid to build layouts of all shapes and sizes. Read the Official Bootstrap Documentation for a full list of instructions and other options.

##### How It Works

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

1 of 3 Column
2 of 3 Column
3 of 3 Column

##### Setting One Column Width

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it.

1 of 3 Column
2 of 3 Column
3 of 3 Column

##### Variable Width Content

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it.

1 of 3 Column
Variable width content
3 of 3 Column

##### Stacked To Horizontal

Using a single set of classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint.

1 of 2 Column
2 of 2 Column

##### Row columns

Use these row columns classes to quickly create basic grid layouts or to control your card layouts.

1 of 4 Column
2 of 4 Column
3 of 4 Column
4 of 4 Column