Bootstrap 3 grid system
Bootstrap has one of the most sophisticated 12 column layout for responsive web layouts.
Points that you should remember while making grids in Bootstrap
- All rows are placed inside the parent element .container (Fixed) or .container-fluid (Full-Width) as child elements for proper alignments within multiple elements.
- Adding more rows in main parent elements results in further horizontal group respectively.
- Columns are placed inside rows with specific class names for getting design specific results.
- Standard grid design follow the 12 column layout in every row so there sum must be 12 for better results.
- There are gutters(gaps between columns) using CSS padding and there are extra given(negative) on both sides for better spacing
- Multiple Column classes are simultaneously used for getting specific results.
Note : If there are more than 12 columns than each extra group of column stands as one unit and wrapped into new line respectively.
Bootstrap 3 Grid Classes
There are four basic classes which are followed in Bootstrap 3
- xs : Smart devices sizes(Less than 768px)
- sm : Tablet sizes(Sizes between 768px to 992px)
- md : Medium Devices (Desktop, PC’s)(Sizes 992px and more
- lg : Large Desktop & Screens (More than 1200px)
Understanding Grids with rows and column behaviour
| Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | |
|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | ||
| Container width | None (auto) | 750px | 970px | 1170px |
| Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| # of columns | 12 | |||
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | |||
| Nestable | Yes | |||
| Offsets | Yes | |||
| Column ordering | Yes | |||
