Every web developer who uses Twitter Bootstrap for responsive design faces the question – how to create a grid with 5 columns. We know that Bootstrap uses a 12-column grid. It divides into 2, 3, or 4 blocks in one row. But what if we need 5 blocks? Here is an example from when I encountered this issue. Look at the screenshot – I needed to place 5 blocks in one row.
And there is an answer, you just need to do two steps.
1. Add styles
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 | .col-xs-1-5, .col-sm-1-5, .col-md-1-5, .col-lg-1-5 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; } .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; } } |
2. Create the 5-column Bootstrap grid structure like this:
1 2 3 4 5 6 7 | <div class="row"> <div class="col-xs-6 col-sm-1-5 col-md-1-5 col-lg-1-5"><img src="path_to_image" alt="1" /></div> <div class="col-xs-6 col-sm-1-5 col-md-1-5 col-lg-1-5"><img src="path_to_image" alt="2" /></div> <div class="col-xs-6 col-sm-1-5 col-md-1-5 col-lg-1-5"><img src="path_to_image" alt="3" /></div> <div class="col-xs-6 col-sm-1-5 col-md-1-5 col-lg-1-5"><img src="path_to_image" alt="4" /></div> <div class="col-xs-6 col-sm-1-5 col-md-1-5 col-lg-1-5"><img src="path_to_image" alt="5" /></div> </div> |
The 5-column grid in Twitter Bootstrap is ready. Now you can create 5 columns anywhere on your site. Enjoy the result. If you have questions, ask them in the comments.
Leave a Reply