Home

How to Make 5 Column Layout in Bootstrap?

The best and easiest way to make 5 column layout in bootstrap

Bootstrap grids are easiest way to make responsive layouts for web pages. We can define grid upto 12 in a row normally but what do you do when you need when 5 columns, 7 columns and 9 columns in a row? May be you use column inside column, make your own custom css?

In this short tutorial, I will guide you to make five column  layout with minimum code (custom codes based on bootstrap).
bootstrap 5 column

For 5 Columns in Bootstrap
To make 5 columns inside row, we do't need to write all css as we do in custom site because we don't need 5 columns in small devices. We have to use col-sm-x or col-xs-x in our columns. I am making 5 columns only on devices with minimum width of 992px if you can make for minimum width of 768px by adding col-xs-x in html and changing min-width value in CSS.





<div class="container"> <div class="row"> <div class="col5 col-sm-6"> </div> <div class="col5 col-sm-6"> </div> <div class="col5 col-sm-6"> </div> <div class="col5 col-sm-6"> </div> <div class="col5 col-sm-6"> </div> </div> </div>
We are making 5 columns, so I haved divided whole row into 5 column (i.e 20% width), float will be left, position will be relative, minimum height 1px and padding 15px in left and right as default in bootstrap. Now check this code in your browser. It's working for me. if you have confusion, comment bellow.



@media(min-width: 992px){ .col5{ width: 20%; float: left; position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } }
How to Make 5 Column Layout in Bootstrap? Reviewed by Prem Regmi on 9:37:00 PM Rating: 5

No comments:

Designed by Next Bootstrap

Contact Form

Name

Email *

Message *

Powered by Blogger.