CODEWITHSUNDEEP
twitter-bootstrap-3
joe
joe

Reputation: 1135

Bootstrap Gutters seem not to be working

Am trying Bootstrap 3.

2 columns but they are not between gutters. 

    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-6 box">
        <div>
          <h3 class="green size-16">Test</h3>
        </div><!--first stack-->
        <div class="col-md-12">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tellus cursus, porttitor nisi vitae, laoreet metus. Pellentesque felis sapien, ullamcorper vel massa vel, pharetra efficitur diam.
        </div><!--second stack-->
      </div><!--first box-->
      <div class="col-xs-12 col-sm-6 col-md-6 box">
        <div>
          <h3 class="green size-16">Test</h3>
        </div><!--first stack-->
        <div class="col-md-12">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tellus cursus, porttitor nisi vitae, laoreet metus. Pellentesque felis sapien, ullamcorper vel massa vel, pharetra efficitur diam.
        </div><!--second stack-->
      </div><!--second box-->
</div>

Bootstrap css in head and js at bottom of the body. I do see the padding showing on inspect element, but all boxes are glued to one another so it looks like all in a box.

I might have overlooked smthing, but I tested on jsfiddle and it showed that it worked correctly. It is strange that on html file, it wasnt working as it should.

help appreciated

One more thing Even with cheating addition to css: margin: 15px, the col-md-4 boxes becomes 2 columns instead of 3 columns. Is it because of the wrapper being in max-width: 1200px?

Upvotes: 0

Views: 711

Answers (1)

Shawn Taylor
Shawn Taylor

Reputation: 15750

Actually, this is correct and it's how Bootstrap is designed. The padding affects the content within the grid divs, not the div themselves. I've tweaked your example and made a bootply (my prefered tool - sorry) http://www.bootply.com/8hj7p5Engy.

The content is nicely "guttered" and padded away from neighbor content, but when you add a background or border to the div, then it looks off.

If you're looking for bordered or colored containers around your content, you should probably look at using a Bootstrap .well or .panel

Upvotes: 2

Related Questions