twitter bootstrap box-sizing ruined my layout

Question

my layout broken when I implement bootstrap during the half way of my project, fixed that with some css modification, and I had commented out this

/**,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}*/

in bootstrap.css, will that affect its core? I just want to use the grid system in my project..

Answer 1

I used a combination of above solutions to fit my need (I used only the grid system, everything else was already there)

/* *,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*/


[class^="container-"], 
[class^="container-"] *,
[class^="col-"], 
[class^="col-"] *,
[class^="row"],
[class^="row"] * {
  box-sizing:border-box;
}

The grid was taking too much margin and padding so i replaced all the

padding-right:15px;
padding-left:15px;
margin-left=-15px;
margin-right=-15px;

to(I commented out the margins)

.row {
/*  margin-left: -15px;
margin-right: -15px;*/
}

and

.col, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
}

Answer 2

Add this in your mixin or variables less and make sure it loads after scaffolding.less It resets the bs3 box-sizing and applies it again to specific elements and all BS3 required elements. I found that most mess created by the default BS3 box sizing is when it is applied to

a,ul,li

The magic

* {
  .box-sizing(content-box);
}
form,
div,
img,
table,
th,
tr,
td,
p,
article, 
aside, 
details, 
figcaption, 
figure, 
footer, 
header, 
hgroup, 
main, 
nav, 
section, 
summary,
audio,
canvas,
progress,
video,
[class^="container-"], 
[class^="container-"] *,
[class^="col-"], 
[class^="col-"] *,
[class^="form-"],
[class^="form-"] *,
[class^="bg-"],
[class^="bg-"] *,
[class^="navbar"],
[class^="navbar"] *,
[class^="nav"],
[class^="nav"] *,
[class^="row"],
[class^="row"] * {
  .box-sizing(border-box);
}

Answer 3

I have the same problem and bootstrap 3 destroys my existing layouts and third party widgets. Here are something things I've tried in order of increasing difficulty and stability.

Easiest Way

Safe only if you don't use other bootstrap components

Add the following css after the bootstrap css is loaded:

*,
*:before,
*:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

.container .row *,
.container .row *:before,
.container .row *:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

This will use the border-box sizing only for elements within the grid system. This won't work if you have custom widgets within the grid as they would still have border-box applied.

More targeted approach

Safe only if you don't use other bootstrap components

Alternatively, you could add a custom col class to every column div which already have a col-*-* applied like so:

<div class="container">
    <div class="row">
        <div class="col-md-3 col">Grid still works</div>
        <div class="col-md-9 col">:)</div>
    </div>
</div>

Then use the following css instead:

*,
*:before,
*:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

.container .row .col,
.container .row .col:before,
.container .row .col:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

This works fine if you ONLY need to use the bootstrap grid system in your project. If you intend to use other bootstrap components however, I don't recommend this approach either since other bootstrap components would depend on the border-box being set.

Cherry-pick each containing element to fix

A still better way would be to just override the box-sizing as content-box on a specific parent element for a widget like this:

.your-custom-widget-class *,
.your-custom-widget-class *:before,
.your-custom-widget-class *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

This approach offers the best forward compatibility with future bootstrap components, even if it seems to be working for you now.

Answer 4

Yes, don't do that. Removing the box-sizing: border-box will ruin your grid. See also: Why did Bootstrap 3 switch to box-sizing: border-box?

An example to show what happens:

<div class="container" style="background-color:lightblue;"> 
    <div class="row" style="background-color:red;"> 
        <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div>
        <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div>
    </div>
</div>
<br>
<div class="container nonborderbox" style="background-color:lightblue;">    
    <div class="row" style="background-color:red;"> 
        <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div>
        <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div>
    </div>
</div>

With:

.nonborderbox *
{
-webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
      box-sizing: content-box;
} 

The above will result in:

With box-sizing: border-box the gutter construct by padding will be out of the calculating of your column's width.

Try to understand Bootstrap's grid and the box-sizing: border-box and figure out why this will ruin your layout. Fix this problems or consider to don't use Bootstrap at all for your project.