Bootstrap can be really helpful in designing your website. It gives you so many predefined rules which you can easily follow to have clean, beautiful, responsive layouts. But sometimes you may feel that it’s lacking some feature like having a 5-columns grid system. No worries, we can easily create this.
First we need to create default column definition the way that Bootstrap does and lets call it col-…-20 like col-xs-20, col-sm-20, col-md-20, col-lg-20.
.col-xs-20,
.col-sm-20,
.col-md-20,
.col-lg-20 {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
}
Next we need to define width of new classes in case of different media queries.
.col-xs-20 {
width: 20%;
float: left;
}
@media (min-width: 768px) {
.col-sm-20 {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-20 {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-20 {
width: 20%;
float: left;
}
}
We are ready to combine these new classes with original Bootstrap classes. For example, if one would like to create div element with five columns layout on medium screens, then use the following piece of html:
<div class="row"> <div class="col-md-20"> ... </div> <div class="col-md-20"> ... </div> <div class="col-md-20"> ... </div> <div class="col-md-20"> ... </div> <div class="col-md-20"> ... </div> </div>
Please note that I have done this for the 1st column only i.e. col-..-20. You need to define for others like col-..-40, col-..-60, col-..-80. I hope this will be helpful.
You can check demo here.