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-xs-15,
.col-sm-15,
.col-md-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">
...
</div>
</div>
Original Source: http://bit.ly/1j1EkjD
Written by Zura Jijavadze
Related protips
1 Response
You can totally set how many columns for Grid System by Customize at http://getbootstrap.com/customize/#grid-system
over 1 year ago
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#