The folks behind the popular Bootstrap framework recently announced the release of Bootstrap 3. Since its original release two years ago, Bootstrap has grown into an indispensable tool for scores of developers, and while it’s a tool for rapid prototyping, it’s also on the front end of thousands of production websites.
Let’s take a look at Bootstrap’s features and see what’s new since version 2.
Before you can dive into Bootstrap, you have to download it, which may cause confusion right off the bat. When you first visit getbootstrap.com, you’ll see some basic navigation, a large title and subtitle, and a big “Download” button. If you click it, you’ll download a .zip archive from Github. Unzip it, and you’ll see quite a lot of files and folders.
It took me a while to figure out what I was even looking at. I saw the usual /js and /less folders, but what was all the other stuff?
Then it dawned on me that I was looking at a static Jekyll site. Once I ran ‘jekyll build' on the folder, it generated a /_gh_pages folder, which is a fully functional version of the Bootstrap documentation site. While certainly cool, I’m not sure that particular download should be the default. I can see novice users being completely baffled as to what to do with it.
However, once you click on “Getting Started”, there are links to a couple other download options, one of which is a pre-compiled and minified version of the Bootstrap CSS and JavaScript files, along with a folder for Glyphicon fonts. Unfortunately, there’s no download option to just grab the framework’s LESS, JavaScript and font files. You’ll have to download the whole shebang and grab what you need.
One of the biggest departures from previous versions of Bootstrap is the move to a “mobile first” approach to the CSS architecture. In other words, all baseline CSS targets the smallest screen sizes first, then scales up. With no media queries specified (or on browsers incapable of handling media queries), the browser will be served mobile style. This allows for a more future-proof application and ensures that mobile users will get the functionality they need without the overhead of larger desktop apps. Then, as you expand outward to larger devices, you can add in more functionality, larger images, etc.
The new grid system in Bootstrap 3 appears to be quite good. Where the old system was pixel-based, the new one uses percentages for widths. This aids in responsive design and makes it easier to recalculate column and gutter widths.
I’ve mentioned previously that I like how Foundation’s grids have two breakpoint-based classes, so that you can add a column and specify two different widths based on screen size. Turns out, Bootstrap 3 has four of them:
So if you want a row that spans two columns on desktop, but stacks the columns on a phone, you might write something like this:
<div class="row">
<div class="col-xs-12 col-md-6">Column One</div>
<div class="col-xs-12 col-md-6">Column Two</div>
</div>
Note that Bootstrap’s .row class does not have to be augmented by an additional .columns class, as Foundation’s does.
In addition, you can use similarly named breakpoint variables in your media queries, like so:
// Styles for 768px and up
@media (min-width: @screen-sm) { ... }
The Bootstrap grid also has the usual support for offsetting, pushing and pulling columns for various layout solutions.
So far in my research into Bootstrap 3, the biggest head-scratcher has got to be the continued inclusion of LESS as its CSS preprocessor. While I don’t wish to start a war, I think it’s generally accepted that SASS is becoming the dominant player in this space. Having used SASS exclusively since I started using the Foundation framework, I was very hopeful that Bootstrap 3 would also adopt it. Alas, they’re sticking with LESS, which is unfortunate. Happily, SASS ports have already begun to appear.
That said, I do understand there are legitimate benefits to LESS, including its faster compile speed. Here’s one of the creators’ justification for continuing to stick with LESS in Bootstrap. I’m sure it was a tough decision, and likely one that favored ease of use over the additional power of SASS.
Bootstrap 3 supports the latest versions of the most common browsers: Chrome, Safari, Firefox, Opera. IE 8 and 9 _are _supported, with some exceptions: IE8 doesn’t support certain CSS3 properties, and requires the use of something like Scott Jehl’s respond.js for media query support. (Note: Foundation 4 says it doesn’t support either IE7 or 8, but I think that at least media query support could be added with respond.js.)
In addition to its grid system, Bootstrap also includes some good baseline CSS and helper classes. There are typography styles and classes for blocks of code. It also comes with a nice array of table styles, including an interesting take on responsive tables. By wrapping a table in a .table-responsive class, once it’s scaled down to a certain point, the table is scrollable horizontally so you can still see every column, without them being crunched. The trick is that it’s not always apparent that the table is now scrollable horizontally, if scroll bars don’t show up automatically in your browser.
The framework also provides some pretty good form defaults. Stylistically, they’re nothing earth-shattering, but they provide a good starting point towards making usable forms. Additionally, there are some really nice-looking, flexible button presets.
There are also several helper classes, most of which are standard parts of other frameworks, such as .pull-left, pull-right, and .clearfix. They also include a cool helper class called .sr-only, which stands for “screen-reader-only”, and allows you to hide elements from sighted users offscreen while keeping them available to vision-impaired users.
Bootstrap also includes responsive utility classes to control when elements should be hidden or visible. For example, if there’s an element you’d like to have hidden on a phone display you’d use:
<div class="hidden-xs">
Bootstrap 3 includes 12 jQuery plugins:
I won’t go over them here, but one very nice feature is that each can be completely configured via data-attributes in the HTML, without having to write a single line of JavaScript. For example, to launch a modal dialog with a button:
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
…would be identical to:
$('#myModal').modal();
This makes it easier for more novice developers to implement plugins without having to do a lot of configuration in JavaScript. Note that Foundation 4 also supports configuration via data attributes, but not for all its plugins.
Bootstrap includes the usual plugin suspects, such as modals, tooltips and alerts. But it also includes some nifty stuff like Scrollspy, which tracks the scroll bar position of an object (or the whole page) and can update things like navigation highlights automatically.
Like Foundation, it also includes plugins for collapsing accordions and tabbed content. However, where Foundation has Bootstrap beat is the fact that these are part of the same plugin in Foundation and can be switched on the fly, for instance on device orientation change.
Overall, Bootstrap’s plugins seem useful and well-crafted, but they’re not terribly unique or groundbreaking. What they have going for them is their ease of configuration and that all public API methods are available and chainable, and the events for most plugins’ unique actions (like, show, hide, etc) are readily available.
All in all, Bootstrap 3 is a pretty solid, yet basic framework. There have been definite improvements over the last version, notably the move to mobile first and the improved grid system. I’ve not had a chance to build anything with it yet, but if one of the SASS conversions is any good, I may give it a try. I still think my framework of choice at this point is Foundation 4, but if I need something simple and lightweight, Bootstrap is a good option.
Previously on (https://nerdranchighq.wpengine.com/blog/css-sprite-management-with-gulp/), we learned how to automatically generate a sprite sheet and accompanying CSS from a folder of images. That’s...
CSS sprites provide the ability to pack multiple small images into a single file, which is then used as a background on multiple HTML...
I’m a front-end developer, which means I write HTML, CSS and JavaScript code all day. But I also frequently work with back-end developers on...
