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.
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|
|# of columns||12|
|Gutter width||30px (15px on each side of a column)|