Geek Answers Handbook

How to make a 1/5 grid column in Bootstrap 3

I have a layout that I need to put three divs next to each other, like:

<div class="row"> <div class="col-md-1.5" id="legend"></div> <div class="col-md-0.5" id="icon"></div> <div class="col-md-10" id="map"></div> </div>

I know that you can get the legend and the div icon inside the same row , but I need them to be separated, and legend to be slideable, in which case I need to replace col-md-10 with map with col-md-11.5 .

Can you rent let me know how I can do this?

+8
twitter-bootstrap twitter-bootstrap-3
source share
1 answer

Bootstrap 3

Use nesting like this ..

 <div class="row"> <div class="col-md-2"> <div class="col-md-9" id="legend"></div> <div class="col-md-3" id="icon"></div> </div> <div class="col-md-10" id="map"></div> </div>

http://www.bootply.com/125259

Update for Bootstrap 4

Here is the 1/5 column in Bootstrap 4 ( no extra CSS or SASS ) using the auto-layout grid ..

 <div class="container-fluid"> <div class="row"> <div class="col-2">2</div> <div class="col-2">2</div> <div class="col-2">2</div> <div class="col-2">2</div> <div class="col">1/5</div> </div> </div>

http://www.codeply.com/go/gjmzB4MTMe

This solution works because Bootstrap 4 is now flexbox. You can get 5 columns to wrap with the same .row with a clearfix break, such as <div class="col-12"></div> or <div class="w-100"></div> in total 5 columns.

+9
source share

More articles:


All Articles