Grid System
Bootstrap is undoubtedly one of the most popular front-end frameworks, which is the one we are using for our digital services.
Understanding the Bootstrap Grid System
Like any grid system, the Bootstrap grid is a library of HTML/CSS components that allow you to structure a website and place a website’s content in desired locations easily. Think of graph paper, where every page has a set of vertical and horizontal lines. When these lines intersect, we get squares or rectangular spaces.
As a user, it allows you to create rows and columns and then placed content in the “intersected” areas. The main question to ask is how many rows and columns you can create using this Grid system. The next pages in this section give you the optimum idea how you could utilise the grid systems and which type of layouts are available to you.
The Grid
We use a 12-column grid that has percentage-based columns, fixed margins and gutters. The columns are used to adjust the layout, making the best use of the space available.
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
| Extra small devices Phones (<768px) |
Small devices Tablets (≥768px) |
Medium devices Desktops (≥992px) |
Large devices Desktops (≥1200px) |
||
|---|---|---|---|---|---|
| Container width | None (auto) | 750px | 970px | 1170px | |
| # of columns | 12 | ||||
| Column width | Auto | ~62px | ~81px | ~97px | |
| Gutter width | 15px margin for extra small devices |
60px (30px on each side of a column) | |||