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 behaviorHorizontal at all timesCollapsed to start, horizontal above breakpoints
Container widthNone (auto)750px970px1170px
Class prefix.col-xs-.col-sm-.col-md-.col-lg-
# of columns12
Column widthAuto~62px~81px~97px
Gutter width30px (15px on each side of a column)
Column orderingYes
Bootstrap Fixed Layout
Bootstrap Fluid Layout

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *