BS Grid Structure

BS grid system uses 12 columns in a web page. All the 12 columns can be used in different groups.BS grid structure is responsive and the columns will re-arrange automatically according to the position of the screen.BS grid system has the following structure .


Different Types of Grid Classes

It has four classes. All these classes can also be used combined to create more flexible sites all together.

    • XS (For small Phones)
    • SM For Tablets
    • MD For Desktops
    • LG For Larger Desktops
span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
 span 4  span 4  span 4
span 4 span 8
span 6 span 6
span 12
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 Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints
Max container width None (auto) 750px aprox. 970px aprox 1170px aprox
Class prefix code .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12 12 12 12
Maximum column width Auto 60px 78px 95px
Gutter width

30px

(15px on each side of a column)

30px

(15px on each side of a column)

30px

(15px on each side of a column)

30px

(15px on each side of a column)

Nestable Yes Yes Yes Yes
Offsets Yes Yes Yes Yes
Column ordering Yes Yes Yes Yes

Responsive Column Resets

In the web page you are bound to run into issues where at certain points the colums donot clear quite right as one is different that other or taller than the other. This problem arose some problems in the page. To overcome this Problem a class .clearfix is used.

Offset Columns

It is a very useful feature for more specialized layouts. These are used to push column from one side to other for spacing. The .col-xs = classes donot support offsets, but they are easily replicated by using an empty cell.
To use offsets on large displays, use the .col-md-offset-* classes. These classes increase the left margin of a column by * columns where * range from 1 to 11.

Basics Structure of BS in Code


Example

Try It Yourself