CODEWITHSUNDEEP
csstwitter-bootstrap-3
SuperUberDuper
SuperUberDuper

Reputation: 9623

bootstrap 3 box-sizing not working

I thought bootstrap 3 used box-sizing:border-box so when I tried to add a margin class to the 2 box-sizing:border-box they stack on top of each other instead of sitting next to each other from sm upwards in size.

   <div class="blueBox col-sm-6">
            <input type="checkbox">foo</input>
        </div>
        <div class="blueBox col-sm-6" >
            <input type="checkbox">boo</input>
        </div>

css

.blueBox {
  background-color: #26a8e0;
  color: white;
  height: 100px;
  margin: 20px;
  box-sizing: border-box;
  padding: 20px;

}

Upvotes: 2

Views: 694

Answers (1)

web-tiki
web-tiki

Reputation: 103750

The box-sizing : border-box; property doesn't include margin in the size of the elements. It includes border width and paddding. That is why they don't stay inline.

border-box
The width and height properties include the padding and border, but not the margin.[...]

source : MDN

To simulate margin, you can use border with the same colour as the background :

.blueBox {
  background-color: #26a8e0;
  color: white;
  height: 100px;
  border: 20px solid #fff;
  box-sizing: border-box;
  padding: 20px;
}

Upvotes: 5

Related Questions