Bootstrap Flushing Columns to the right

Question

I need some help figuring out why bootstrap is not spacing my columns out correctly. I created a fiddle below with the slide show row and the next row with that has the 3 columns. For some reason the three columns are flush right instead of centered like they should be.

Can anyone tell me what I am doing wrong?

<header class="header">
<div class="container">
    <div class="row" id="header">
        <div class="span12">
             <h1> Header</h1>
        </div>
    </div>
</div>
</header>
<br><br>
<div class="container">
<div class="row">
    <img src="http://dummyimage.com/1200x425/000/fff&text=Slide+Show+1200+x+425" style="margin: 0px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
</div>
<div class="row">
    <div id="user1" class="span4 ">
        <img src="http://dummyimage.com/370x150/000/fff" style="margin: 10px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
    </div>
    <div id="user2" class="span4">
        <img src="http://dummyimage.com/370x150/000/fff" style="margin: 10px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
    </div>
    <div id="user3" class="span4 ">
        <img src="http://dummyimage.com/370x150/000/fff" style="margin: 10px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
    </div>
    <div class="clear"></div>
</div>
</div>

http://jsfiddle.net/yoderman94/ccnfu/

score 2 · Accepted Answer · answered Apr 26 '13 at 14:01

2

I hope I got your question right. Bootstrap class row has a margin left of about -20px. So the convention is to have an element with a class span inside it which gives it margin-left of 20px.

Your issue is not with the three boxes rather its with the row above it.

<div class="row">
    <img src="http://dummyimage.com/1200x425/000/fff&text=Slide+Show+1200+x+425" style="margin: 0px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
</div>

In the above code the row doesn't have a span class inside hence the image doesn't have 20px margin-left. You need to give a class say span12 to img and remove the inline style margin.

 <div class="row">
    <img class="span12" src="http://dummyimage.com/1200x425/000/fff&text=Slide+Show+1200+x+425" style=" border: 0px solid rgb(0, 0, 0);" />
</div>

See fiddle

answered Apr 26 '13 at 14:01

anpsmn

7,217
2
28
44

Thanks anpsmn! I was so used to using 960.gs and I could make something stretch to the entire width of the container. Is there a way to do it in bootstrap? – Chad J Treadway Apr 26 '13 at 14:20
In 960gs, you get content width of 940px which is also the case with bootstrap. In bootstrap container is 940 and row is 960 while in 960gs container is 960. This [link](http://stackoverflow.com/questions/10962032/i-dont-understand-twitter-bootstrap-span-and-row) may help you – anpsmn Apr 26 '13 at 14:29
I was that when I was digging earlier but it didn't make much sense to me till I went and reread it with your example. Thanks again! – Chad J Treadway Apr 26 '13 at 14:38

score 0 · Answer 2 · answered Apr 26 '13 at 14:18

Using row-fluid show-grid to locate them to middle like following

<div class="container">
    <div class="row-fluid show-grid">
        <img src="http://dummyimage.com/1200x425/000/fff&text=Slide+Show+1200+x+425" style="margin: 0px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
    </div>
    <div class="row-fluid show-grid">
        <div id="user1" class="span4 ">
            <img class="span12" src="http://dummyimage.com/370x150/000/fff" style="margin: 10px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
        </div>
        <div id="user2" class="span4">
            <img class="span12" src="http://dummyimage.com/370x150/000/fff" style="margin: 10px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
        </div>
        <div id="user3" class="span4 ">
            <img class="span12" src="http://dummyimage.com/370x150/000/fff" style="margin: 10px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
        </div>
        <div class="span4"></div>
        <div class="clear"></div>
    </div>
</div>

Bootstrap Flushing Columns to the right

2 Answers2