Bootstrap grid system quick guide

Bootstrap ships with 12 grid column system and it prioritize the small screen devices first then up to larger screen devices. The following demonstrate how the twitter bootstrap grid system works. It is one row using various grid system classes comes with it.

Bootstrap's visibility classes

The lg or large grid is now displaying and this grid stacks horizontally at < 1200px.

The md or medium grid is now displaying and this grid stacks horizontally at < 992px.

The sm or small grid is now displaying and this grid stacks horizontally at < 768px.

The xs or extra small grid is now displaying and this should always horizontal.

.col-lg-4 .col-md-1 .col-sm-5 .col-xs-5
.col-lg-4 .col-md-5 .col-sm-1 .col-xs-6
.col-lg-4 .col-md-6 .col-sm-6 .col-xs-1

Bootstrap's grid system classes

Showing col-xs-* grid

.col-xs-5

.col-xs-6

.col-xs-1

Showing col-sm-* grid

.col-sm-5

.col-sm-1

.col-sm-6

Showing col-md-* grid

.col-md-1

.col-md-5

.col-md-6

Showing col-lg-* grid

.col-lg-4

.col-lg-4

.col-lg-4

Tags

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.