A Note on Twitter Bootstrap 3

Alexander Geßler, Creative ConsultantPosted on
designcssbootstrap

Twitter tells us in their release notes:

Better box model by default. Everything in Bootstrap gets box-sizing: border-box, making for easier sizing options and an enhanced grid system.

This sounds so cool. But in real life this could lead to problems with old-fashioned CSS apps. They did not apply the new box-model to single elements, they changed it hard and global for everything:

*,
*:before,
*:after { box-sizing: border-box; }
/* <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing">box-sizing</a> */

When you use a hard-coded height or width in combination with a padding or border for elements, you need to check if it still looks the same.

Previously styled form elements are now a bit smaller if you don't fix them. When starting with new Bootstrap 3 stylesheets, there are no problems to be expected.

More great blog posts from Alexander Geßler

  • Choosing a Color Theme in the Scrivito Example App

    As of recently, the Scrivito Example App comes with several color themes. If one of them is perfect for your website based on this app, you can simply use it as is. But you can also change the colors individually to give your site the look and feel you want it to have. Switching the color theme...

    Read more

  • Let’s Talk Bootstrap 4

    A detailed guide to upgrading from BS3 to BS4

    The following is a wrap-up of the biggest changes and what you might need to know when transitioning your project from BS3 to BS4, and of some things I learned while upgrading the Scrivito Example App. For a quick overview of how we implemented these changes check out our "The Scrivito Example...

    Read more