🌐 Facebook :https://goo.gl/TXKEV7
🌐 Twitter :https://goo.gl/IQtLzQ
🌐 Google+ :https://goo.gl/iXO3xk
🌐 My Blogger:https://goo.gl/ebM0Wj
bootstrap 3 grid example
bootstrap 3 grid system
bootstrap 3 columns layout
bootstrap grid system example
bootstrap 3 page layout
bootstrap page layout examples
bootstrap 3 layout examples
bootstrap page layout tutorial
bootstrap grid layout tutorial
bootstrap column layout
how to use bootstrap 3 grid system
Bootstrap includes a powerful mobile-first grid system for building layouts of all shapes and sizes. It’s based on a 12 column layout and has multiple tiers, one for each media query range. You can use it with Sass mixins or our predefined classes.
Bootstrap’s grid system allows up to 12 columns across the page.Bootstrap’s grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.
The Bootstrap grid system has four classes:
xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)
The classes above can be combined to create more dynamic and flexible layouts.
Some Bootstrap grid system rules:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
Use rows to create horizontal groups of columns
Content should be placed within columns, and only columns may be immediate children of rows
Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows
Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4
Some important points to keep in mind when working with the bootstrap grid system to create page layouts
1. Rows must be placed within a container for proper alignment and padding.
2. Use rows to create horizontal groups of columns.
3. Content should be placed within columns, and only columns may be immediate children of rows.
4. If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
5. Grid columns are created by specifying the number of twelve available columns you wish to span. For example, to create four equal columns we would use four .col-xs-3.