How to Make 1/5 Column Grid in Bootstrap 3

Question

I have a layout which I need to put three Div beside each other as:

<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 it possible to get the legend and icon div inside one row but I need to keep them separate while the legend will be slide-able and in that case I have to replace the col-md-10 from map with col-md-11.5.

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

Answer 1

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's a 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 the 5 colums to wrap witin the same .row using a clearfix break such as <div class="col-12"></div> or <div class="w-100"></div> very 5 columns.