Bootstrap 3 Succinctly: Introduction

Welcome to this series covering the Twitter Bootstrap (BS) UI and CSS framework.

In my book, Twitter Bootstrap Succinctly, I laid down the initial groundwork and got you started with Bootstrap 2.

Since that book was released, however, Bootstrap 3 has become the mainstream version.

In this series we’re going to continue to build on that groundwork and move forward into using BS v3. We’ll look to see where things are different, and as we explore the new features, we’ll see that a big chunk of what was present in v2 is still applicable to v3.

If you’ve not yet read the book on Bootstrap 2, then I encourage you to do so, as I will be referring to it at various points throughout this series. 

Why? I believe that in order to understand the entire Bootstrap landscape, you need to examine it from the beginning. You need to be able to understand what it set out to achieve and how.

You will be able to follow just this series and learn the basics of BS v3, but you’ll get a much deeper, better understanding if you read the v2 book first.

What’s Changed

So what’s changed from v2 to v3?

Quite a lot.

The major change between the two versions is that v3 is now "Mobile First". Bootstrap v2 was a responsive layout CSS kit, but its mobile and responsive features were always second place to its rich UI features. In fact, in order to make the responsive stuff work correctly, you had to include a second CSS file whose sole purpose was to enable the responsive, mobile features and nothing else.

In v3 this whole situation has been completely reversed. The entire framework is now mobile-friendly and responsive out of the box, and it now takes extra work to adapt your layouts for larger screen formats. Don’t get me wrong—it’s by no means a huge amount of work. Most of what you need to change is still simply swapping classes about and structuring your HTML mark-up correctly.

The other major change is in the naming of classes and API calls. Many of the class names that were introduced in v2 are now either deprecated or have been renamed to something more suitable to their intended purpose.

There has also been a major effort to rename classes to be more consistent. For example, in v2, for items that targeted the RED error color, we had the following classes:

• Buttons: btn-danger
• Text: text-error
• Table Rows: tr.error
• Labels: .important
• Badges: .important
• Alerts: .error
• Progress Bars: progress-danger

Now, in v3, these have be consolidated so that naming is similar across all components as follows:

• Buttons: btn-danger
• Text: text-danger
• Table Rows: .danger
• Label, Badge, Alert: .danger
• Progress Bars: progress-bar-danger

As you can see, consistency is now a major player in the v3 classes, and many other similar changes have been made across the entire framework.

There have been quite a few minor changes too. For example, the box-model used by Bootstrap has now been improved considerably, with all elements now using border-box as the default CSS box sizing model.

The grid system has been extended and improved too, and instead of being one monolithic grid system with optional classes, it’s now comprised of four tiers of grid sizes specifically aimed at phones, tablets, desktops, and large desktops.

All the JavaScript stuff has also now been name-spaced to reduce conflict with other JavaScript code; the available events are now better named to reflect their purpose and are much more clearly documented.

Modals and Navbars have been vastly improved in terms of responsiveness, and along with the class-naming changes, the sizing classes for all of the components (Inc Nav Modals) have now been aligned.

Component-wise, some of the older, less frequently used components have been deprecated and removed, the most notable of which is the Accordion component. But don’t despair—the accordion has been replaced with a brand new collapsible-panel component that’s much more flexible than its predecessor.

We also have a new, narrow jumbotron, new panel types, list groups, and much more.

Finally, the one change that everyone will notice is the look and feel: TWB V3 is flat. It has a single colored, new interface, but with rounded corners flat.

The hover classes no longer have nice graduated effects in them, and the progress bars and buttons no longer look semi-3D as they did in v2. Instead, what the maintainers of Twitter Bootstrap have decided to do is to make it easier to customize the look and feel of the elements that are in the CSS.

The maintainers have even made available a “Bootstrap” theme that makes v3 look like the original v2 design to get you started. In the last part of this series, I’ll show you how simple it now is to override the various classes, and show you how to overhaul the flat theme to take on your own look and feel.

For now though, if you want the v2 experience, you’ll need to make sure that you also include the appropriate CSS file as required. If you want to stick with the v3 default, you don’t need anything extra.

New Installation Methods

When BS2 was first released, the only way of getting it was via a download from the project website. This was covered extensively in the first book with an in-depth discussion of exactly which files were in the zip file and why.

Because so many people were using Bootstrap, it didn’t take long before it was made available for free on a CDN by the folks who run MaxCDN. This tradition has continued into the v3 code base, and you can now simply get your chosen standard v3 installation by using the following HTML script tags:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"><script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

If you use the CDN versions, please remember that you will also need to make sure you include a recent copy of JQuery; none of the BS3 JS functionality will work unless you do.

As well as the CDN link, there is now also a direct download on the getbootstrap.com site, not only for the standard JavaScript & CSS bundle as described in the previous book, but also a direct link to a zip file of the original “Less” sources and a conversion to “Sass” for those folks who would like to be able to include a fully variable-based, customizable version of the kit in your own build system using tools like Grunt to automate things.

In addition to the new sources, you can now also use Bower to install everything you need using the following from your project folders command line:

bower install bootstrap

Bower is an HTML scaffolding and package system designed to automate much of the application boiler plate. You don’t need to understand it to understand BS v3, but a quick Google search for “Bower” will turn up many references to deepen your understanding.

On a similar note, BS v3 can also be installed using the NuGet package manager if you’re working in Visual Studio. Like Bower, this will automate much of the process for installing and setting up the required files. Be careful though—there are many Bootstrap packages available in NuGet, some of which will cause you more work than they save you.

Finally, the TWB customizer is still available. It’s been greatly restructured and rebuilt to provide more options and an easier, more intuitive look at what you’re changing and why.

In fact, it’s now so easy to change things using the customizer that your designer or design team can do 90 percent of the work needed to set the colors and branding of your download before the files required are even downloaded. This enables your design department to start making color and layout choices immediately, while you work on the page layouts and additional code for the required interactivity. Then, all that’s required is for you to simply replace your default files with the files provided to you by your designers, and an instant theme change should occur.

Device Support

Officially, BS v3 only supports the latest round of HTML 5-compliant browsers and Internet Explorer 10 and above.

In reality, the framework also supports IE8 and IE9; however, there are some features of CSS3 and HTML5 that don’t quite work as expected. In particular, if you want the responsive elements to work correctly, you’ll need to use respond.js, which you can download from this GitHub repository.

Once you add respond to your project, it’s basically just a general expectation to what was and was not added to the various browsers, at various times.

The parts that will be most noticed as missing are as follows:

For IE8:

• border-radius is not supported.
• box-shadow is not supported.
• transform is not supported.
• transition is not supported.
• placeholder text is not supported.

This essentially means that placeholder text in input elements won’t show, and anything that uses rounded corners or drop shadows, or has any kind of transition or transformation on the element, won’t display correctly.

For IE9:

• border-radius is supported.
• box-shadow is supported.
• transformis supported (but only with -ms prefix).
• transition is not supported.
• placeholder text is not supported.

Things are slightly improved where IE9 is concerned—rounded corners and drop shadows are now fine, and transformations will also work, as long as they also have a -ms prefix version.

Transitions and placeholders on the input elements, however, are still sadly missing.

The official support matrix for the current version of BS3 in current browsers looks like this:

If you are targeting IE9 and IE8, and are using respond.js to support those efforts, then please be aware of the following points:

You will need to refer to the respond.js docs if you’re hosting CSS, etc. on a different domain (for example a CDN) to mitigate cross-domain problems.

Browser security will cause you problems with file:// and @import based resource references.

Specific to @import is that respond.js cannot read the rules properly, which is important to Drupal users, as Drupal uses @import quite heavily.

Older IE compatibility modes will stop Bootstrap from working completely, not just with respond.js, so be careful if you’re testing for backwards compatibility using a modern IE in emulation mode—the results will most likely not be what you expect.

This tutorial represents a chapter from Bootstrap 3 Succinctly, a free eBook from the team at Syncfusion.