Search within TutorialsPark

Twitter Bootstrap Grid System


To Create page layouts with a series of rows and columns i.e grids


Twitter Bootstrap: Grid System

one one one one one one one one one one one one
Two Two Two Two Two Two
Four Four Four
Four Two Six
Six Six
Eight Four
Twelve

Twitter Bootstrap: Grid System

Bootstrap provides a responsive and fluidic grid system with special emphasis for Mobile Devices. The grid system can scale upto 12 columns when the size of the viewport or the Device increases.

Bootstrap provides a set of predefined classes to create easy layouts. Eg class .col-xs-*, .col-sm-*, .col-md-* and .col-lg-*

Bootstrap Grid System are used to create page layouts using a series of rows and columns to organise your content.The working is as explained under:

1. There are 12 Columns available in the Grid. The size of a particular grid is defined by the number of columns is spans of the total available 12.Eg: Three equal size grids spanning 4 columns each(4 x 3 = 12)

2. Grid Classes are applied to devices with screen width greater than or equal to the breakpoint widths, if the width reduces below the specified breakpoints. Override classes are applied.

Eg: If an element has two classes .col-xs-* and .col-md-*, two different classes are applied to element for medium devices(md) and small devices(xs)

Table:Twitter Bootstrap Grid System Grid Options

Extra Small Devices
Phones(<768px)
Small Devices
Tablets(>=768px)
Medium Devices
Desktops(>=992px)
Large Devices
Desktops(>=992px)
Grid Behaviour Horizontal always Collapsed at beginning, horizontal above breakpoints Collapsed at beginning, horizontal above breakpoints Collapsed at beginning, horizontal above breakpoints
Container Width None 750px 970pxs 1170px
Class Prefix .col-xs- .col-sm- .col-md- .col-lg-
No of Columns 12 12 12 12
Column Width Auto ~62px ~81px ~97px
Gutter Width 30px 30px 30px 30px
Nestable Yes Yes Yes Yes
Offsets Yes Yes Yes Yes
Column Ordering Yes Yes Yes Yes

Twitter Bootstrap Grid : Stacked-to-Horizontal

See Full Page View

The stacked-to-Horizontal configuration of grids can be created using the classes .col-md-*.

It creates a layout in which elements are stacked one above the another for mobile and tablet devices(i.e extra small to small) and a horizontal layout for large desktop screens i.e medium devices

Example: Twitter Bootstrap Horizontal Stacked-to-Horizontal

Give it a TRY! »


Twitter Bootstrap Grid : Mobile and Desktop

See Full Page View

To make your column to stack up in smaller displays, use the class .col-xs-* ( for extra small) and .col-md-* (for medium columns)

Example:Twitter Bootstrap Grid Mobile and Desktop

Give it a TRY! »

Twitter Bootstrap Grid : Mobile, tablet, desktop

See Full Page View

To create a seperate layout for tablets in addition to small devices and desktop devices. Using class .col-sm-*

Example:Twitter Bootstrap Grid Mobile, Tablet, Desktop

Give it a TRY! »

Twitter Bootstrap Grid : Column Wrapping

See Full Page View

Bootstrap Grid System Supports Column Wrapping Feature, i.e if there are more than 12 column within a single row, each extra column group wraps into a new line as a single unit.

Example:Twitter Bootstrap Grid Column Wrapping

Give it a TRY! »

Twitter Bootstrap Grid : Responsive Column Resets

See Full Page View

The responsive grids can have certain issues at certain breakpoints, if the size of one of the column is taller than others.

To fix this issue we use the class .clearfix and responsive utility classes.The example changes the layout from 4 x 3 (sm i.e tablets) to 6 x 2 (xs i.e phones ).

But the space to the right of the taller column is cleared in the configuration of 6 x 2 for smaller devices.

Example:Twitter Bootstrap Grid Responsive Column Reset

Give it a TRY! »

Twitter Bootstrap Grid : Offsetting Columns

See Full Page View

In order to move columns to the right use the grid classes .col-md-offset-*. The classes increase the left margin of the columns by by specified * columns.

If the class used is .col-md-offset-3, it moves the element with .col-md-3 by three columns.

Example:Twitter Bootstrap Grid Offsetting Columns

Give it a TRY! »

Twitter Bootstrap Grid : Nesting Columns

See Full Page View

In order to nest content with the default grid, use a new .row and a set of columns with class .col-sm-* inside an existing column with class .col-sm-*.

Any Nested column should have a set of column maximum upto 12, if not mandatory that all the 12 available columns are used.

Example:Twitter Bootstrap Grid Nesting Column

Give it a TRY! »

Twitter Bootstrap Grid : Column Ordering

See Full Page View

The order of the build-in grids can be changed using the modifier classes .col-md-push-* and .col-md-pull-*

Example:Twitter Bootstrap Grid Column Ordering

Give it a TRY! »