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

Bootstrap Fixed Layout

Bootstrap Fluid Layout