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

Question

Here is my conclusion: http://jsbin.com/zuxipa/1/

Basically, I want the second div inside the line to be smaller (its currently in col-md-1). How can i do this?

Answer 1

You can insert columns inside <div class="col-md-1"></div> if you wrap them in 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

Answer 2

I know this late, but I was looking for ways to deal with this and ran into this issue, so I decided to share my solution.

As far as I could find, by default there is no way to handle this script in Bootstrap. What I did was remove the .col-x classes, but retained the row class. Then I added a custom class to the sections and used the percentage width for the row I was dealing with. I ended up with the following:

 <style> .section-1, .section-3 { width: 47%; } .section-2 { width: 6%; } </style> <div class="container"> <div class="row"> <div class="section-1"> <!-- Content Here --> </div> <div class="section-2"> <!-- Content Here --> </div> <div class="section-3"> <!-- Content Here --> </div> </div> </div> 

Keep in mind that this does not respond by default, but it would be easy to adjust the percentages of width using media queries in CSS.