Bootstrap Grid System

Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap.

Containers are a fundamental building block of Bootstrap that contain, pad, and align your content within a given device or viewport sizes in Bootstrap.

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system. Plus, see how to use column classes to manage widths of non-grid elements.

Gutters are the padding between your columns, used to responsively space and align content in the Bootstrap grid system.

For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.

Learn how to enable, use, and customize our alternate layout system built on CSS Grid with examples and code snippets.