Page Rendering is Faster
Bootstrap 3 introduced a new “flat” design. Yes, it’s trendy, but it dramatically improves the page rendering time, which is basically how long it takes the browser to “draw” all the elements on a webpage.
How much faster, exactly? Paul Irish demonstrates in this video:
Improvements in Grid System
Here’s the grid system documentation, but here’s the some overview:
- .col-xs- When two or more of these columns are in the same row, they will always remain side-by-side, even on the smallest mobile screens. Most of the time you’ll want your columns to stack on mobile devices, so use this only when you have a very specific reason to maintain columns on mobile devices. These are also the only column type that cannot be nested.
- .col-sm- These columns are collapsed to start, but become horizontal at widths of 768px and above.
- .col-md- These columns are collapsed to start, but become horizontal at widths of 992px and above. These are a good default to use for just about every column. Once you have your rough layout, you can start to tweak things with some of the other column types.
- .col-lg- Again, collapsed to start, but horizontal at 1200px and above. This is useful if you have an element that normally stretches the full width of the page, but might look ridiculous across a 27″ iMac screen.
Turn Off Responsive Features
Bootstrap 3 was designed with responsive approach, but if you have more specific needs and responsive design not need, you can always turn it off.
It’s not as simple as an off button, but just follow these step-by-step instructions and you can disable the responsive features of Bootstrap. Nice!
There’s such a nice documentation for migrating from Bootstrap 2.x to 3.0. and lots more cool stuff, so be sure to check out the Bootstrap site and read the docs. If you have any learnings or tips, share them in the comments!