Adding borders to span divs in Bootstrap messes up layout
layout, twitter-bootstrap
Solution
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;
}
Problem
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: 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)