Twitter Bootstrap has 12 columns grid layout by default which allows you to create responsive layout for your website but you can’t create 5 equal columns without using offset in this setup as sum of those column never meet with 12. But in this tutorial we have created some CSS rules to make five equal columns Bootstrap grid layout. Furthermore you can also have 1/5, 2/5, 3/5 and 4/5 sized columns combined with Bootstrap 12 columns grid layout after reading this post.
Method I: Using offset classes in Bootstrap 3.0 and above
This html will make 5 equal columns with default available Twitter Bootstrap default grid system while leaving space for one column each to the left and right end. To overcome this issue, follow the next method.
Method II: Put some classes in your stylesheet
5 equal columns Bootstrap grid layout
Here we need to create default column definition in the way that Bootstrap do it. I called my classes col-XX-1-5
1 2 3 4 5 6 | .col-xs-1-5, .col-sm-1-5, .col-md-1-5, .col-lg-1-5 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } |
And need to apply media queries to handle width with varying viewport sizes as each of the column would have to occupy 20% space from available width within row:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .col-xs-1-5 { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-1-5 { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-1-5 { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-1-5 { width: 20%; float: left; } } |
Now we are ready to combine these classes with original Bootstrap classes. For example, if we want to create div element which behaves like five columns layout on medium screens and like four columns on smaller ones, we just need to use something like this:
By using the example above you can extend & create a full flash 5 columns layout and use grid with 1, 2, 3, 4 of the five columns layout along with default 12 columns layout.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | .col-xs-1-5, .col-sm-1-5, .col-md-1-5, .col-lg-1-5, .col-xs-2-5, .col-sm-2-5, .col-md-2-5, .col-lg-2-5, .col-xs-3-5, .col-sm-3-5, .col-md-3-5, .col-lg-3-5, .col-xs-4-5, .col-sm-4-5, .col-md-4-5, .col-lg-4-5 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } .col-xs-1-5 { width: 20%; float: left; } .col-xs-2-5 { width: 40%; float: left; } .col-xs-3-5 { width: 60%; float: left; } .col-xs-4-5 { width: 80%; float: left; } @media (min-width: 768px) { .col-sm-1-5 { width: 20%; float: left; } col-sm-2-5 { width: 40%; float: left; } col-sm-3-5 { width: 60%; float: left; } col-sm-4-5 { width: 80%; float: left; } } @media (min-width: 992px) { .col-md-1-5 { width: 20%; float: left; } .col-md-2-5 { width: 40%; float: left; } .col-md-3-5 { width: 60%; float: left; } .col-md-4-5 { width: 80%; float: left; } } @media (min-width: 1200px) { .col-lg-1-5 { width: 20%; float: left; } .col-lg-2-5 { width: 40%; float: left; } .col-lg-3-5 { width: 60%; float: left; } .col-lg-4-5 { width: 80%; float: left; } } |
And HTML for the image shown in beginning is:
And to combine our 5 equal columns layout with bootstrap default grid system:
You forgot the dots to show it’s a class name @
@media (min-width: 768px) {