Here is my output : http://jsbin.com/zuxipa/1/
Basically,I want the 2nd div inside the row to be smaller(its currently at col-md-1).How can I do that?
This is done by adding the class “col-SIZE-SIZE_TO_OCCUPPY”. For example, . col-md-4 which means take 4 columns on the medium-sized screens. If we stack multiple column classes on a single element we can define how we want the layout to look like on other screens and change the columns to rows as we want.
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.
Also, you must use . col-md-6 like class to specify width of your section within a row where md is replaceable by lg and sm as well. md stands for Medium sized devices like laptop,desktop etc.
You can nest columns inside your <div class="col-md-1"></div>
if you wrap them with a row
example:
<div class="col-md-1">
<div class="row">
<div class="col-md-6">
2.1 col
</div>
</div>
</div>
http://getbootstrap.com/css/#grid-nesting
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