5 Columns Layout in Twitter’s Bootstrap – How to

5 columns grid in Twitter Bootstrap. Technique to make Equal 5 columns layout using bootstrap.Implement new grid in bootstrap 3 for five columns. Beat bootstrap columns and make your own 5 columns col-lg-15.

Grid layout is an efficient technique to distribute website layout. Twitter bootstrap divide their layout in 12 columns grid. Layout can divide and manage in desired number of columns. Forums are full of question about the need of 5 columns layout in bootstrap (e.g. col-md-5) . Framework loaded with offset class to get desired number of column layout.  Learn how to make 5 column responsive grid with bootstrap 3.

5 Columns Layout in Bootstrap

  • Integrate Five equal columns in twitter bootstrap Copy/ paste the code in stylesheet.
  •  Use classes to make 5 columns layout col-sm-15, col-md-15, col-xs-15, col-lg-15.
  • This will make five columns responsive layout in bootstrap 3.
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

we have define media queries to melt it according to bootstrap. These columns will adjust their widths according to the device width. Read meta viewport missing if your bootstrap is failed  to load on mobile devices.

Use 5 Columns Layout – Bootstrap 3

As we have define above the style of five columns responsive grid. These all include the save technique bootstrap 3 uses for their other columns to set them in grid. You can either use it like col-lg-15, col-md-15, col-sm-15, col-xs-15.

<div class="row">
    <div class="col-md-15 col-sm-3">
      Your Content
    </div>
</div>

That’s how you can accomplish 5 columns grid layout by implementing our own layout class and width with responsive mechanism.


Five Columns Grid with Bootstrap Offset:

Bootstrap offset classes helps to achieve layout with 5 columns as well. Offset increases left margin of the column which can set us desired  5 column. Learn how to use col-sm-2 with offset to make 5 columns layout in bootstrap.

<div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>

Above is the simple two type of tutorial to make grid layout with desired columns 5 layout in bootstrap. Have any question or finding about other columns like 7 columns in bootstrap you are free to write an article for us.

Leave a Reply

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