Why is bootstrap css using box-sizing: border-box?

Question

I'm using only the bootstrap dropdown component but its css shrinked many of my existent layout elements and the page looks now a like damaged. After a closer look I found out what's causing this:

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

Why are they doing this?

because that way you can define percentages on the layout widths and still be free to add borders and paddings without affecting it.. — Gabriele Petrioli
– Gabriele Petrioli, Commented Dec 9, 2013 at 19:17
Bootstrap is a framework. You're not supposed to be using individual components out of it without the underlying core CSS, or things like this will inevitably happen. — Blazemonger
– Blazemonger, Commented Dec 9, 2013 at 19:25
because box-sizing:border-box is the best thing to happen to CSS since .... a { text-decoration:none } — HaukurHaf
– HaukurHaf, Commented Dec 9, 2013 at 20:21

Christina · Accepted Answer · 2013-12-09 19:35:26Z

Remove the global reset border-box from the scaffolding area and in your dropdown css adjust the math OR in the rest of your site adjust for the border-box, so if something had a padding of 10px and a total width of 200px, the old way you'd have 180px as the width, but now just make the width the actual width and the borders are counted. This is the same for borders too.

Collectives™ on Stack Overflow

Why is bootstrap css using box-sizing: border-box?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related