Home/ Questions/Q 8695519
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T01:03:31+00:00

I am starting with Twitter Bootstrap and have a question about how layout functions

  • 0

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)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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;
}
    • 0