Question

What is the best way to apply a border and padding to a containing site wrap div to a site using a grid system like twitter-bootstrap ?

Using bootstrap for example – the grid depends on being within nested containers and rows. Applying a border and padding to the 1st container changes the maths and the contained divs stack vertically – the grid breaks.

placing the 1st container in a seperate wrap div and applying border & padding to the wrap div doesn’t work either – the contained divs break out of the container.

so an example of the mark up is:

<div class=' main'>
    <div class='container'>
      <div class='row'>
        <div class='span12'>              
            <h1>Demo</h1>    
            <div class='row'>
              <section class='span8'>
                blah blah
              </section>
              <aside class='row'>
                links n stuff
              </aside>    
             </div>
         </div>
      </div>
</div>    

and i want to apply a 20 px padding, 1px border to the main wrapper. Bootstrap calculates the widths of spans in px’s – so they are breaking out.

Answer 1

so we don’t want px widths, we want % widths. Other frameworks use %’s. oh. bootstrap fluid uses %’s

<div class=' main'>
<div class='container-fluid'>
  <div class='row-fluid'>
    <div class='span12'>              
        <h1>Demo</h1>    
        <div class='row-fluid'>
          <section class='span8'>
            blah blah
          </section>
          <aside class='span3'>
            links n stuff
          </aside>    
         </div>
     </div>
  </div>
</div>    

and then work out the width of the container using media queries

.main{
  width:1210px;
  margin:20px auto;

  border-radius:3px;
  border:1px solid #eee;
  box-shadow: 2px 2px 8px rgba(6,6,6,0.5);
}


@media (max-width: 1210px) { 
 .main{
    width:80%;
  }
 }

and thats a box around the bootstrap grid. yay.