10

I have been using the "border-box box model" in my last projects. This has a lot of advantages that I won't explain here. But you can read about it here: Border-box in css-tricks

Now I'm starting a bigger project and we have decided that twitter bootstrap would be a good solution for our needs. I was wondering if it's possible to make it "border-boxed" without breaking everything. Has anybody tried this and what are/would be the consequences? Too many adjustments? real improvement?

Thank you

Improve this question
5
  • You should have a look at this stackoverflow.com/questions/8793876/twitter-bootstrap-borders Commented Mar 14, 2013 at 10:10
  • thanks I knew this one but they don't really answer my question that is more like *bootstrap*{ box-sizing:border-box } (pseudo code here) Commented Mar 14, 2013 at 11:34
  • 2
    bootstrap does not play well with border-box when it comes to text fields, it seems. they look... squished and bad. Commented Mar 30, 2013 at 4:40
  • Note; Twitter-Bootstrap 3 now asserts box-sizing:border-box on all elements with the universal selector (*) Commented Nov 27, 2013 at 14:53
  • You are right I have updated the title of the question for future readers. Commented Nov 27, 2013 at 15:08

2 Answers 2

Reset to default
16

Yes.

Here's a mixin you can use in Bootstrap. It will automatically add all the vendor prefixes.

*, *:before, *:after { .box-sizing(border-box); } input { .box-sizing(content-box); }

Inputs still need the content-box, otherwise they'll be too small.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

The only problem is with input elements which look "squeezed" after this, so I would also add something like: input { .box-sizing( content-box ); }
I think you should still add the -moz-box-sizing . In last firefox version (21) in Mac OS, it didn't work without it.
@Amida See the dot before box-sizing? That's calling a mixin in LESS, which contains the rule with all the vendor prefixes necessary. It's built into Bootstrap.
Ah ok I know about mixins but I didn't read carefully to see it was one. Thanks :)
Also, you may want to add the class .add-on in the input exception for content-box, because its padding is calculated for content-box.
7

It hugely simplifies working with fluid/responsive designs: there are some complex layouts and cases where consistent spacing is required that would be nigh on impossible without using border-box.

I've recently used this (FTW!):

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

on a fairly large site, and found it has indeed solved a lot of issues. If you require support for IE7, my approach was to serve that browser a fixed-width version of the site, and use this polyfill only where needed.*

I really haven't found any drawbacks - it's a relief to be able to specify two columns of 50% width, add padding and know that it will just work. In places where you might rely on the standard box-model, you can always revert back to it for specific elements.

Bootstrap-specific

Regarding using Bootstrap specifically, you might run into some issues - I would suggest testing it out. Anecdotally, adding the above CSS into the Bootstrap homepage showed no problems.

The main grid system built into Bootstrap 2.x uses float and margin, so changing the box-model will have no impact on that (it will just give you the ability to add padding directly to columns).

Bootstrap 3 is moving to a mobile-first approach (and completely dropping IE7 support). That includes:

[A] new single grid system (still uses .row) utilizes percentage widths, padding, and box-sizing: border-box instead of pixel widths and margins.

So, they clearly believe in the benefits of taking this approach.

* My thinking was that I'm already relying on the HTML shim in Modernizr, so that browser is already reliant on JS for its layout. With SASS to store widths as variables this has worked pretty smoothly. That said, if usage for old IE is higher for any particular project, this approach becomes less appropriate.

Improve this answer

5 Comments

That's funny I also added this to the bootstrap page to see but nothing really happened so I need more detailed feedback than just this. Nice post but I'll wait to see if someone can comment about a real case. :)
I'll almost certainly be proved wrong, but I doubt anyone has done exactly what you're asking - I'm not sure why you would? If you are making use of Bootstrap for layout etc, then what benefit would changing the box-model give you at that point? i.e. the benefit of this approach is in simplifying layout/normalising form elements etc., but that's all been done for you.
I'm just fed up to have to use inner div every time I need padding in my columns or to have to make some calculations like removing margin pixels to add a border or padding without breaking the grid. I feel the border-box model is the way to go but bootstrap 3 is not there yet.
As I put in my edit, the grid structure of Boostrap 2.x won't be affected by making the change - therefore I very much doubt that it will introduce anything but the smallest issues.
I saw your edit later. Just want to say thanks for taking the time investigating :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.