Bootstrap Grid System

SGDS leverages on Bootstrap’s grid system that enables developers to design dynamic and visually appealing interfaces that will captivate users and enhance their overall experience.


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

Learn more

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

Learn more
Flexbox grid

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 more

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.

Learn more

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

Learn more

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

Learn more
CSS Grid

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

Learn more

Last updated 10 June 2024

Latest version 2.3.3