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 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.