Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get column size smaller than col-xx-1

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?

like image 964
Pradeep Saini Avatar asked Oct 13 '14 10:10

Pradeep Saini


People also ask

How do I change the size of a column in bootstrap?

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.

How do I change the grid size in bootstrap?

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.

How do I change the width of a row in bootstrap?

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.


1 Answers

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

like image 75
tmg Avatar answered Oct 02 '22 23:10

tmg