Adding borders to span divs in Bootstrap messes up layout

Question

I am starting with Twitter Bootstrap and have a question about how layout functions in it. Here is the HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap Test</title>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script  src="http://code.jquery.com/jquery-latest.js"></script>
        <script  src="bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="span4">a</div>
                <div class="span8">b</div>
            </div>
            <div class="row">
                <div class="span12">c</div>
            </div>
        </div>
    </body>
</html>

style.css:

div.container
{
    background-color:#aaa;
}
div.span4, div.span8, div.span12
{
    background-color:#eee;
    border: 1px solid #888;
    border-radius:3px;
}

Adding border to span4 and span8 increases their width and I end up with this:

bootstrap span layout

span4 and span8 get stacked while they should be on the same line. I realize I could decrease their width in my .css file and correct this, or use this:

http://paulirish.com/2012/box-sizing-border-box-ftw/

but does Bootstrap provide means to correct this (not adding extra CSS every time I add or remove border, etc)

(maybe OT, apologies) should this even be tagged CSS? It seems that you aren't looking for a CSS solution, just a Bootstrap solution. — tuff, Oct 16 '12 at 20:42
I can remove it if it is a problem, I am a new user here and don't have much experience in tagging. — Anonimista, Oct 16 '12 at 20:49
It does seem to be confusing people :D I was ready to write a CSS answer myself as well. — tuff, Oct 16 '12 at 21:08
This might be a duplicate of http://stackoverflow.com/q/11299089/1478467 — Sherbrow, Oct 17 '12 at 05:27

score 33 · Accepted Answer · answered Oct 16 '12 at 21:00

33

The span classes in bootstrap have specific widths so adding a border throws off the total for the row and forces them to wrap. To get around this I usually put the border styling on a div inside the div with the span class. Something like this:

HTML

<div class="row">
   <div class="span4">
       <div>a</div>
   </div>
   <div class="span8">
       <div>b</div>
   </div>
</div>

CSS

.span4 > div, .span8 > div
{
   background-color:#eee;
   border: 1px solid #888;
   border-radius:3px;
}

answered Oct 16 '12 at 21:00

joshb

5,182
4
41
55

Thanks, that is a reasonable alternative. – Anonimista Oct 16 '12 at 21:19
2

In general, I would try to avoid adding your own styles to the grid classes in bootstrap to avoid conflicts with the grid system. – joshb Oct 17 '12 at 13:03
3

What if you want to add a border to a `row` and then nest `span`s inside it? – spinningarrow Nov 07 '12 at 09:14
Ahah, thanks. This seems like a good solution, although it does add a bit to divitis. – Sean Jun 14 '13 at 14:28

score 5 · Answer 2 · answered May 30 '13 at 12:28

I had exactly the same issue and playing with the box-sizing didn't help at all. The only solution that worked for me in the end was to use row-fluid.

The difference with row-fluid is that they are based on percentages, not fixed pixels. Then the child spans in a row always add up to 12, instead of adding up to their parent span width in the normal pixel width rows.

So for example yours would now be

<div class="container">
    <div class="row-fluid">
        <div class="span4">a</div>
        <div class="span8">b</div>
    </div>
    <div class="row-fluid">
        <div class="span12">c</div>
    </div>
</div>

Now you don't get any issues with changing margins, paddings, or borders.

score 1 · Answer 3 · answered Oct 16 '12 at 20:41

1

It sounds like you want your divs to stay on the same line, yes? To do that you'll have to specify a width and float them. Divs tend to always want to stack on top of each other.

Here's a fiddle: http://jsfiddle.net/me73v/

answered Oct 16 '12 at 20:41

Scott Hillson

900
1
12
30

Thank you for the answer, I realize I could use CSS to adjust the width of the divs. I was just wondering if Bootstrap itself provided a way to correct this. – Anonimista Oct 16 '12 at 20:56

score 0 · Answer 4 · answered Feb 13 '13 at 19:20

0

Another option would be to tweak the span widths with JQuery:

$(".some-bordered-container [class*=span] ").each(function(index) {
    $(this).width($(this).width()-1);
});

It seems to work well for me. I don't miss the pixels.

answered Feb 13 '13 at 19:20

Tony Smith

869
1
11
25

No idea why people are downvoting this. Some people may prefer a jQuery solution. Even though it is not the best approach and CSS should be used when possible, this solution may suit some people better depending on the situation. – Fizzix Mar 09 '15 at 02:22

score 0 · Answer 5 · answered Oct 09 '13 at 10:11

You may also use negative margins :

div.span4, div.span8, div.span12
{
    background-color: #eee;
    border: 1px solid #888;
    border-radius: 3px;
    margin: -1px;
}

It's not as good a solution as using box-sizing: border-box, IMHO, but it's just worth noticing it works, if you're forced to use box-sizing: content-box.

Adding borders to span divs in Bootstrap messes up layout

5 Answers5

Linked