In many situations a 2,3,4 grid layout is not enough and you would like to layout columns in 5s. With Bootstrap this is easily accomplished. If you are using LESS or SASS it is even easier with Bootstrap thanks to a helpful mixin functions.

Below are some examples of how to create a 5 column grid using Twitter Bootstrap framework. We have provided examples using LESS, SASS and CSS.

The mixin solutions below work using a 2.4 column which is a 5th. (2.4 * 5 = 12 )

LESS Example


.col-lg-2-4{
    .make-lg-column(2.4)
}
.col-md-2-4{
    .make-md-column(2.4)
}
.col-sm-2-4{
    .make-sm-column(2.4)
}

/* There are also mixins available to add the push, pull and offsets for columns */
.col-md-push-2-4{
  .make-md-column-push(2.4)
}
.col-md-pull-2-4{
  .make-md-column-pull(2.4)
}
.col-md-offset-2-4{
  .make-md-column-offset(2.4)
}

You can also make 5 column grids using SASS with Bootstrap mixins.

SASS Examples


.col-lg-2-4{
    @include make-lg-column(2.4)
}
.col-md-2-4{
    @include make-md-column(2.4)
}
.col-sm-2-4{
    @include make-sm-column(2.4)
}

/* There are also mixins available to add the push, pull and offsets for columns */
.col-md-push-2-4{
    @include make-md-column-push(2.4)
}
.col-md-pull-2-4{
    @include make-md-column-pull(2.4)
}
.col-md-offset-2-4{
    @include make-md-column-offset(2.4)
}

CSSExamples

CSS is the less powerful approach and may require additional tweaking.


.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

The above CSS could then be used with the following HTML layout.

col-md-5ths col-xs-6

This tutorial can be used to make different size column grid layouts using the Twitter Bootstrap Framework. If you found it useful please leave a comment below. Thanks



© 2017 Morris Projects Ltd. Paschal Way, Chelmsford, Essex, CM27NX. 01245 206566. Company Reg: 06837962

Our Friends: Chelmsford Web Design, Chelmsford Music Studio.