bootstrap .row inside a .row-fluid container

Question

I want to have the ability to place a fixed span div ( span1..span12) inside a .row-fluid container.

<div class="row-fluid">
<div class="span5 red">

    <div class="row">
         <div class="span3 gray">
             I need this to span exactly 300px, not 31% of its parent
        </div>
    </div>
</div>

<div class="span5 blue">
</div>

here is the working jsbin ( sadly you need to enlarge the output pane )--> http://jsbin.com/uwecuv/1/edit

The idea is that the css selector (.row-fluid span3) would take precedence in this case.

Do you guys have any ideas how I can make the 'div.span3.gray' span 300px?

The reason is that in the real scenarion it will be an absolutely positioned div, and I don't want it to inherit the parent's size ( which btw will be just a div with an input box ).

Thanks!

sody sody · Accepted Answer · 2013-04-17T13:39:54

Bootstrap grid system is designed so that span3 means that element has width=3/12 of the container width (row or row-fluid). So if you need div with fixed width=300px(not 3/12 of container width) you need to use your own css class with width=300px. Or you can use fixed layout without responsive css.

bootstrap .row inside a .row-fluid container

1 Answers