5 columns Bootstrap layout solution

Here at bayledesign.com we love to design websites using bootstrap, we think that this is the most versatile responsive framework, but it had a catch and that was the use of five columns.

The 5 columns Bootstrap layout solution

But thanks to an article on how to implement a five column style for bootstrap we managed to create websites with this new feature !
First you have to write something similar to this:

1
2
3
4
5
6
7
8
9

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

Next, you have to write in your css code the responsive mode for the bootsrap five columns:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

.col-xs-5 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-5 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-5 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-5 {
        width: 20%;
        float: left;
    }
}

and ready ! your 5 columns Bootstrap layout solution is done, get ready to design beautiful websites using twitter bootstrap like the ones we design.

Another valid solution dor the 5 column bootstrap workarround can be found here : Click