Quick tips: 5 columns layout with Twitter Bootstrap

, ,

This article refers to Bootstrap 3, if you are looking for a solution for Bootstrap 4 please visit an updated version of this post: Quick tips: 5 columns layout with Bootstrap 4

By default Bootstrap does not provide grid system that allows us to create five columns layout, but as you can see it’s quite simple.
At first, you need to create default column definition in the way that Bootstrap do it. I called my classes col-..-15.


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

Next, you need to define the width of new classes in case of different media queries.


.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;
    }
}

Now you are ready to combine your classes with original Bootstrap classes. For example, if you would like to create div element which behaves like five columns layout on medium screens and like four columns on smaller ones, you just need to use something like this:


<div class="row">
    <div class="col-md-15 col-xs-3">
    ...
    </div>
</div>


Having a nice project to code?

pawel@polarbits.co // +48 606 115 330