Menu
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?
640
First example: create a row ( <div class="row"> ). Then, add the desired number of columns (tags with appropriate .col-*-* classes).
The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
Populate the 'row' div with 5 divs with class 'col'. Because Bootstrap 4.0+ grid system has now shifted to Flexbox, the columns will arrange by themselves into five equally sized DOM elements.
Go to the Customize menu on Bootstrap website and choose your preferred size. In Less Variables -> Grid system you can find a form to input your preferred sizes. Then you can easily download the preferred grid. Hope this will help.
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.
99
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
