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-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">

  • Jade

    I have literally looked at thousands of solutions for the 5 column layout with Bootstrap, and yours is by far the most effective. Other solutions are usually just hacks that leave blank spaces and are not responsive for the Bootstrap layout and framework. Well done, will definitely be incorporating this into my projects!

    • Hey Jade, thanks for comment, I really appreciate 🙂 if you need some additional info please let me know !

      • Jade

        Bootstrap columns are very limited since if I needed to have 7 or 8 equal columns for example, that would be impossible without a modification such as yours. How would I achieve columns of 7, 8, 9, 10 and 11? All these numbers are impossible since Bootstrap only allows divisions of 12 to have equal columns. Therefore, any number between 6 and 12 is absolutely impossible, to have them equal in length of course. I do think that a Bootstrap plugin would be fantastic to offer columns of 5, 7, 9, 10 and 11. Would definitely attract a a lot of interest, possibly even from the Bootstrap developers themselves. I will be posting your answer on a question that was asked at Stock Overflow so that others can see your solution. I will also include a link to this page. Thanks again!

  • hedi

    Hi, it’s nice thank you, but this solution does not work when the 5 columns are in a .fluid-container. There are some overflow on each sides (left and right).

    • Hi, could you bring some example ? If you still need it, maybe we can solve it together

  • Erick Acevedo

    Thanks!! i was looking for a solution about this for long time!!

  • This was extremely helpful and straight to the point. Thank you.

  • Jimmy Sarasa

    Great solution! Thanks for sharing!
    One question. It shouldn’t be 15px for side paddings instead of 10px?

    • Hey, thanks for comment, the padding of 10px it’s because of our project specification, my bad to not set default values before posting 🙂

  • ApuestoKid

    Awesome solution!!
    I recommend to include this css styles:
    .col-xs-25 {
    width: 40%;
    float: left;

    .col-xs-35 {
    width: 60%;
    float: left;

    .col-xs-45 {
    width: 80%;
    float: left;
    And the other @media To get all de 1/5, 2/5, 3/5 & 4/5 sizes

  • Nip

    The easiest and best way IMO is to create a 20 columns grid using the bootstrap customization tool or LESS/SASS variables. So you can have 4 aswell as 5 columns in your templates : http://i.imgur.com/Px7GbuF.png

    • Yeah it’s nice, but we needed also 3 colums, so in our case 60 only columns grid will do the work 🙂 It’s easy to generate but can be nightmare to manage

      • Tanbin Islam Siyam

        How about 30 column grid then? 😛

        • Chaosrock

          30 column could not be split 4 ways evenly.

    • Levan Lacroix

      you have a tutorial for this?

      • unfortunately not, but let me know what you are looking for exactly and I will try to find something that can help 🙂

      • Nuclearcoil

        What kind of tutorial do you need? Just go to the official Bootrap site and there ckick customise option menu. Then change the amount of grid columns from 12 to 20.

  • That’s why I prefer the percentage grid systems like https://github.com/csswizardry/csswizardry-grids. I would just use one-fifth and that’s it. It’s a lot more flexible than having fixed columns grid systems.

    • Choquo

      What about nested columns?…

  • Mark

    Thank you for this solution! Appreciated!

  • knyki12

    Thanks for the solution! However the better (future-proof) solution would be customizing with Bootstrap’s mixin functions. I have created a bower component for an easier access. Feel free to check it out: https://github.com/kennyki/bootstrap-5-columns

  • Sapto Prasojo

    Thanks …

  • Guest

    col-xs-15 should be 100% and not 20% as other columns.

    • Grzegorz Zawadzki

      Indeed. It acually messes whole cocept of boostrap. 12 is 100%. 1 is 1/12. You would need to redo whole of your grid or make:
      col15-xs-[1..15] grid system as alternative.
      15 Would be 125% of width.

  • Thanks for the great solution! Also, the current controlled scrolling on this page sucks.

    • redneckbob

      Yes it does, I thought the batteries in my trackpad were dead because the scrolling doesn’t work at all. However, just a nit-pick.

      For me, the 5 column fix worked brilliantly!

  • michaeldotco

    This solution is for the css files only and not the less files as this uses mixins to create the columns.

  • Thanks, I was banging my head on this for a couple of days, worked like a charm.

  • Michał Wójcik

    You make my day 🙂

  • Good work on this solution, very helpful to me in my project.

  • Daniel Troko

    My fucking god, this worked like a charm, you are the real MVP.

  • Federico Maiorini


  • Bootstrap lets you to customize the whole CSS style including Grids within its Customize section. Visit: http://getbootstrap.com/customize/ and find “Grid system” in the page and put any number of columns you want, rest of the thing will arrange Bootstrap itself. But the solution you’ve provided is excellent for using 5 columns row within a 12 columns Bootstrap template.

  • Rasmus

    Awesome ! Thank you.

    Tweaked it a bit to:

    .custom-grid div[class^=”col-“] { // Hate to repeat myself 🙂
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;

    .col-xs-1-5th { // I didnt quite get the naming before, as it implied a 125% width as other mentioned. Now instead its 1/5th
    width: 20%;
    float: left;


  • Parsi Man

    thank you
    but why using

    i used

    and it is working ok !!!

    • Yeah, I have same question. works fine then why additional class ” col-sm-3″ ?

  • Fathan Rohman

    thanks you gan 😀

  • Rameshwar Shashtri

    how to api set google search to the domain

  • Rapha Guasta

    Really Awesome! Thanks!

  • great!

  • Bruno Giubilei

    tks man!

  • Why don’t you use the less/sass mixins?

  • Андрей Ткачук

    Nice Solution! Thank You!

  • Jinukala Raju

    Thanks its really awesome very helpful to me

  • Martin Haryanto

    perfectly done, thank you

  • Neil Pursey

    I was reading this trying to do a 5 column layout.
    Looking through the bootstrap (v3) mixins and decided to try this…

    12 / 5 = 2.4 so

    .make-xs-column(12); // 1 column
    .make-sm-column(4); // 3 columns
    .make-md-column(2.4); // 5 columns
    .make-lg-column(2.4); // 5 columns

    This also works, which helps readability…
    .make-lg-column( (12 / 5 ) * 3) // 12 bootstrap columns divided by 5 for the base width multiplied by 3 for 3 of 5 columns.

    It working for me! Not sure if there are any downsides to the approach.

  • THANK YOU!! Works perfect!

  • sisim1337

    Just amaze. Quick and clean. (Y)

  • George Peter

    Thanks! that is work!

  • Gilbert Onuzuruike

    I tried this but instead of arranging the divs vertically, it did so horizontally. Making them appears as rows instead of coloums

  • Lucretia Rinker

    my husband was requiring a form earlier today and came across a company that has 6 million forms . If you want it also , here’s https://goo.gl/pL7vud

  • Dennis Castro

    It worked, just had to change “float:left” for “display: inline-block” and worked perfectly!

  • Phil Terrell

    If you create five columns each with col-md-2 and then add col-md-offset-1 to only the first column you can have a five column layout. The offset-1 moves your first column to the left one column, leaving an equal space after the fifth and final column. For most people trying to figure out how to balance five columns, this is more than sufficient. To clarify, column one will have two classes – col-md-2 AND col-md-offset-1. The rest of your columns will simply have a col-md-2. On mobile these columns will collapse normally.

  • Thank you for this!

  • Níssius Ribas

    Muito Bom, orbigado 😉

  • Marija Karin

    Thank you…this really helped 🙂

  • Thanks for sharing. This one is just simple perfect

  • João Pedro Rodrigues

    3 years old and still the best solution! thank you 🙂

  • Thank you man 🙂

  • Thank you, Man 🙂

  • Kenneth Koppervik


Having a nice project to code?

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