Tag Archives: CSS

Twitter Bootstrap CSS – box-sizing issue

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

Tagged ,