Additional menu
Contact information
If you have any questions or you just think that we do a good job - feel free to contact us - we <3 feedback from you!

E-mail: office[at]

Quick tips: 5 columns layout with Twitter Bootstrap

Quick tips: 5 columns layout with Twitter Bootstrap

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 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 behave 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-sm-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 :

    • 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? 😛

    • 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 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:

  • 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: 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