Bootstrap 3 Succinctly: Changed Components Features

In this series on Bootstrap 3, we’re taking you through all the new features in the latest version of this popular framework. In this tutorial we’ll take a look at the changes to components, including Glyphicons, buttons, and navigation.

Glyphicon Changes

The biggest news with the components provided by BS3 is the Glyphicons icon set.

When V3.0 beta was first released, the Glyphicons font that forms the core of the icon set in BS3 was removed. The community was up in arms about this, especially when the icon set was split into its own repository.

The split was short-lived, however, and from the production release onwards, the Glyphicons font was reinstated into the main branch, but with one new bonus.

No longer is the icon set made up of a set of bitmapped pngs in white and black—it’s now a full-scale, vector-based font set, with ttf, svg, wot and other formats. Because it’s a vector now, it can easily be colored using standard CSS-based color techniques, and can now be scaled to any size required.

In the current build of BS3, there are 200 or more icons to choose from, covering lots of different use cases. To use an icon, you simply add the class glyphicon and a glyphicon-xxxxx to select the actual icon you want to use. Then, you add this to a span class that’s nested inside of the element you wish to display the icon in.

One rule you must obey with glyphicons is that you cannot mix the icon content with any other element. You must make sure that the icon class is applied only to its own element, and with enough padding around it to ensure sufficient space between it and any other content next to it.

The following code gives you a simple overview on how to use the glyphicon classes:

Output produced by code sample

Output produced by code sample

There are far too many available icons to list them all here, but if you go to the Bootstrap Glyphicons page, you’ll find a grid complete with all the class names required to get the icon you need.

The icons work correctly in any container you add them to, and they respect the sizing classes too. So, for example, if you add one inside a <button> element that has a btn-lg class attached to it, the icon will scale as required to match the button size.

Button Changes

Changes to buttons in BS3 are very minimal from a component point of view. There are a few new classes and recommendations, and some changes to their look and feel as mentioned, but otherwise, everything you did in BS2 should still work as expected.

From a component point of view, the btn-group and btn-toolbar classes are still the same, but it is now recommended that where possible, you try to ensure that you group buttons using btn-group. Also, when marking up toolbars, you should try to make sure you have a role of toolbar applied to them to assist screen readers and other equipment.

There is one thing you need to be aware of: due to changes in how BS3 handles button groups, and if you are using tooltips or popovers on your buttons, you will now have to add the option container:body to the tooltip or popover when you create it. The container doesn’t have to be body, however; it can be any container in which the popover/tooltip/button arrangement is nested. The container needs to be there though; this, unfortunately, means that you now have no option but to create popovers and tooltips using JavaScript.

In line with the rest of the new sizing classes comes the new btn-group-lg, btn-group-sm, and btn-group-xs. As with the other size classes, there is no btn-group-md, since medium is the default size with no extra styling added.

The following code shows a basic example of button grouping, toolbars, and different sizes.

Output generated by code sample

Output generated by code sample

Button nesting is still performed in the same manner as it was in BS2, thus allowing you to add drop-down button menus inside groups of normal buttons, as the following code shows (but remember, this is JavaScript functionality, so you will need to make sure JQuery is included, as well as the BS3 JS file):

Output generated by code sample

Output generated by code sample

Notice in the last code sample that I altered the button color of the drop-down button; all you need to do in order to achieve this is add individual button colors on the classes for individual buttons. This works across all button groups and toolbars—not just when nesting them—meaning that you can vary the colors of the buttons in your group depending on your usage.

Two new classes used for button layouts are the btn-group-vertical and the btn-group-justified classes.

In BS2, it was very difficult to stack your buttons vertically, or to make them take up the full width of the available space while maintaining a balanced size. These two new classes in BS3 solve both of these tricky situations. Be aware, though, that to make the justified groups work correctly, you need to mark your button groups with a little more markup than you might expect.

The next code sample shows how to use vertical groups:

Output produced by code sample

Output produced by code sample

As I just pointed out, marking up the justification classes is a little more involved, but is necessary to smooth out some of the few browser inconsistencies that, unfortunately, still exist. If you use the pattern shown in the following code to mark up your justified groups, then you should find that none of these inconsistencies present a problem for you:

Output produced by sample

Output produced by sample

The golden rule with the markup is that each individual button has to be wrapped in its own <div> with a btn-group class applied to it. Each of these single groups then need to be wrapped in an outer div, which has both btn-group and btn-group-justified applied to it.

There’s one thing to note if you’re using justified groups: because the buttons are rendered out as a block element, the button group-sizing classes won’t work as expected. This shouldn’t really come as a surprise, because they won’t work on single buttons that have the btn-block-level class added either, just as inline elements marked and styled using block can’t be fluidly controlled in general.

If your buttons are made up of <a> tags, then you don’t need all this extra markup—you just need the outer div with the btn-group-justified class added to it, and regular buttons inside of it.

A drop-down button with a menu attached is still created in the exact same manner as it is in BS2. First, you create an outer <div> with a btn-group class applied to it. Immediately inside this, you create a regular set of button styling classes applied to it, along with a class of dropdown-toggle and a data attribute called toggle with the value of dropdown applied to it. Immediately after the button element, but before you close the group <div>, you then define the actual menu using a standard, unordered list with a class of dropdown-menu and a role or menu applied to it.

Note: One of the new features that the HTML 5 specification brings to the table is something called data attributes. BS3 (and for that matter BS2) uses these attributes in many different places to allow elements and JavaScript functions to be joined together without the developer ever having to write a single line of JavaScript. Data attributes always take the form of data-name, where name is the name the developer wishes to assign to that attribute. Using data- ensures that the attributes you define will never interfere with anything the WHATWG standards body adds to the spec, giving developers utmost flexibility in what they wish to use them for.

In most cases, these data attributes are used the way BS3 uses them: in order to pass information from the element into the JavaScript routines working on it. They can be used to pass in ID names, options, parameters for sizes, and many other things, meaning that you often don’t actually have to write any boilerplate code in your app. Throughout this tutorial, you’ll be introduced to many more of these data attributes.

In order for the drop-down buttons to work, you MUST have the drop-down JavaScript plug-in added to your BS3 build. If you’ve just downloaded the default set, then this won’t be a problem, as dropdown.js is already part of the main bootstrap.js file. If you’ve done a custom build, or even compiled from the Less sources yourself, you’ll need to make sure it’s present.

The following code shows a basic drop-down button example:

Output generated by code sample

Output generated by code sample

By making a simple modification to code sample 37, you can easily turn the button into a split drop-down menu, where the action of the button remains a single action in its own right, but still allowing the menu to appear when the caret is clicked.

To do this, simply add another button element just before the button element, then move the text (but not the caret) from the (now) second button into the first, so the new button tag looks like this:

If you then re-render the output in your browser, you should see the following:

Output generated by code sample after its been amended  to produce a split drop-down menu

Output generated by code sample after it’s been amended to produce a split drop-down menu

The final things to mention before moving on are the sizing and drop-up variations.

The sizing is simple; the sizing classes mentioned in the CSS tutorial work just as expected with drop-down buttons, in exactly the same manner as they do on normal buttons (lg for large, no md since medium is the default, sm for small, and xs for extra small).

Drop-up is a class name that you apply to the outer element with the btn-group class when constructing a drop-down or split drop-down button, which, as its name implies, causes the menu to pop upwards rather than downwards.

A final note on drop-down menus

Drop-down menus aren’t only attached to buttons—ANY element that can be wrapped in an outer parent can be used.

You can apply a class of dropdown to the wrapped element with a data attribute of toggle, and the value of dropdown, which will cause that element to become the trigger for the drop-down menu to display.

Input Group Changes

In short, there have been no changes to the input group functionality between BS2 and BS3.

Input groups are still marked up exactly as before, with the same caveats, namely:

  • You cannot add multiple additions on one side, only one on each end.
  • Multiple elements in one input group are not supported.
  • You cannot mix input groups with other components; you must nest them.
  • If you’re attaching tooltips and popovers, you must add a container option, as previously mentioned under button changes.
  • Where possible, avoid using input groups with select lists, especially when targeting WebKit-based browsers.

To create an input group, simply wrap your input control and its [pre|suf]fix (which will generally be a <span>) in a <div> or other block-level element with a class type of input-group applied to it. Next, make sure that the additional <span> has a class of input-group-addon applied to it.

For example, the following code will create an input box for a Twitter handle, and an input box for money where you’re not entering a decimal part.

The output produced by code sample

The output produced by code sample

The normal sizing classes also apply to these, just as they apply to other form inputs, so adding input-group-lg and input-group-sm (again, there is no md) to the outer input group will size the entire control set accordingly.

One thing that’s not new in BS3, but has been made easier to do, is adding checkboxes, radio buttons, regular buttons, and drop-down menus to input groups.

Each of these options require a bit more markup than when you’re using a regular <span>, but the resulting effect is that you can add interactivity to your fields. For example, you might use these inputs to create your own file upload control, or a button that creates a random password.

The following code shows how to achieve this:

Output produced by code sample

Output produced by code sample

Navigation Changes

The navigation components have had their own share of changes, but much like the other groups, this is mostly to tie common class names together and basically tidy things up so they are more meaningful.

There are two main sections when it comes to the navigation components: basic navigation and nav-bars. Of these two components, nav-bars have changed the most.

To begin with, in BS2, all you really had were nav-bars; there were no button classes or text classes—only the brand-label. This led to much confusion among developers and many questions, such as “How do I centrally line text up in a nav-bar?” and “How do I stop my buttons from increasing the height of my nav-bar?”

BS3 has now introduced many new classes designed especially for these kinds of scenarios, which we’ll introduce soon. But first, let’s look at what’s different in the basic navigation components.

Basic Navigation

First things first: the navigation list component that was in BS2 is gone. Not just deprecated, but taken away never to be seen again—and this is a good thing.

While it was easy to work with (you created an unordered list, added a sprinkle of bootstrap magic, and were good-to-go), it was messy, didn’t work consistently in all browsers, and had a few rendering problems.

What do we have in its place?

We have List groups, which we’ll cover in detail later on. For now, let’s talk about what remains, as it will set the groundwork for using List groups a little later on.

So what is the base class then? It may surprise you to learn that it’s simply a class called nav, which along with nav-tabs, nav-pills, and nav-stacked, can be used to make tab, pill, and sidebar-based navigation structures in the same way you used to make nav lists in BS2.

The markup is now much simpler. You don’t need to worry about any extra padding or browser quirks, and you certainly don’t need any custom stuff to get things done.

To use tabs, simply take an unordered list, and add a nav and nav-tabs class, as the following code shows:

Output produced by code sample

Output produced by code sample

The markup needed now consists of nothing more than a handful of <li> elements; the only place the classes need to be applied is on the outer <ul> itself. You’ll also see that we have an active class on the first <li> in the list, to show us which tag is the active tag.

If you want BS3 to provide the entire tab’s experience (that is, to actually change the content as required), then there’s more work you need to do. For that, as we’ll see in the JavaScript section, you need to use one of the JavaScript add-ons. If, however, you want to handle the tab switching and content yourself, all you need to do to switch tabs is move the active class from one <li> to the next.

Things are no more complicated with pills: just exchange the nav-tabs in code sample 40 for nav-pills and you should see your output change to this:

Output from code sample when changed to pill mode

Output from code sample when changed to “pill” mode

And if we add nav-stacked to either of them, our navigation will stack neatly one on top of each other:

Code sample changed to pill mode and with nav-stacked added

Code sample, changed to “pill” mode, and with nav-stacked added

As with most other components and changes in the framework, the output now renders as a block element occupying all of the available space. Again, you just need to use the grid system and other available classes to make sure it takes up only the space you need. Now, any parent container that changes size because of differing screen resolutions will now cause its child elements to responsively resize as needed.

By the way, this also works with tabbed navigation, but the output is most likely not what you would expect:

Code sample rendered as stacked tabs

Code sample, rendered as stacked tabs

In fairness, though, it wasn’t really designed to work that way: tabs generally run left to right, and while BS2 did have some classes for putting tabs on the side and along the bottom of elements, these have been removed in BS3. The JavaScript plug-in for making full, tab-based outputs still has the ability to position the tabs, but the general navigation no longer does.

As with the changes made in the button components, the navigation aids also now have a new justified class added to them, called nav-justified, and just as with the button version, it will cause a navigation class to span the full width of a container, giving each sibling an equal size.

If we take the code in sample 40 and add nav-justified to the two classes already there, we get the following result:

Navigation tabs from code sample with full-width justification applied

Navigation tabs from code sample with full-width justification applied

The navigation aids have another thing in common with the button classes and components: the state-based changes, which are used to show a given state, as well as the ability to take drop-down menus and sub navigation.

Simply adding a class of disabled to the <li> inside a navigation set will disable and dim that link with the muted-text look. Remember though, it does not actually disable the link—the link will still be clickable, and it’s up to you to code things so the link does not react.

To add a drop-down menu to any pill- or tab-based navigation item, just use the same layout and classes as shown in the section on buttons. Nest an <a> inside an <li>, followed by another <ul>, with the appropriate classes and data attributes to make it all work.

In a bit of a cross-over between the basic navigation and navigation bars, we also have breadcrumbs and page/pagination navigation aids.

Breadcrumbs are typically used to mark your position in a site’s hierarchy, and as we’ve seen above, using them is simply a case of adding them to an unordered list, as the following code shows:

Output produced by code sample

Output produced by code sample

The final controls, before we move onto full navigation bars, are the pagination controls. These controls take a huge amount of the grunt work out of lining up a bar with previous/next and before/after, and a sequence of numbers in the middle.

Typically used where you have a data-heavy site and want to display records one page at a time, rather than all at once, pagination bars are both simple to use and easy to line up with the rest of your output.

Just as with the other basic elements, creating pagination bars is as simple as adding the appropriate classes to an unordered list, as the following code shows:

Output produced by code sample

Output produced by code sample

Just as with the other basic navigation aids, applying active and disabled classes where needed to individual <li> elements within the list enables you to mark links as disabled and selected.

Output produced by code sample with active and disabled classes added

Output produced by code sample with active and disabled classes added

Pagination controls can be sized just as easily as the other controls using the new sizing options, and like the others, they now all follow the same naming scheme: pagination-lg and pagination-sm. As with some of the others, there is no pagination-xs, and no hint that there should be one; likewise there’s no -md size either, since medium is the default.

To use the pagination controls, just add the appropriate sizing class alongside the pagination class on the parent <ul> holding the list, as the following code shows:

Output produced by code sample

Output produced by code sample

The pagination classes have one final trick up their sleeve—the generation of Previous and Next page buttons.

You’ll see that in many wiki- or blog-style sites, there is usually an Older/Newer, or Previous/Next button pair at the foot of a page.

To make the default version of this, simply create a <ul> as we have throughout this entire section, and add a class of pager to it like so:

Output from code sample

Output from code sample

A pager will automatically place its buttons in the center of the available space, as seen in Figure 44, but you can also justify them left and right by adding the previous and next classes to the inner <li> elements.

If you change code sample 44 so that the <li> holding the previous button has a class of previous assigned, and the <li> holding the next button has a class of next, and then re-render the output, you should see your browser change to the following:

Code sample with optional previous and next classes applied

Code sample with optional previous and next classes applied

You’ll see that, again, the output expands responsively to fill all of the available space, and as before, you can easily control this using grids, spans, and other containers as needed.

Navbar Navigation

If there’s one thing that BS3 does way better than any of the other frameworks I’ve seen out there, it’s navigation bars. Whether it’s a drop-down menu, a title with sign-in/out controls, or just a decoration, there’s no denying that navigation bars in Bootstrap are powerful.

Unfortunately, in BS2 there was quite a bit lacking. There were many hacks published to allow things to be lined up, but some of the CSS used was a little rough around the edges. BS3 changes all of this.

The basic navigation bar now starts its life as a collapsed item in your pages display. This means that if the first display is on a mobile device, your design will start out with a nicely collapsed menu bar, ready to be expanded exactly as a mobile user would expect. In BS2, the opposite was the case, and you had to take extra steps to collapse the display before making it visible.

The navigation bar will progressively become visible as the display width increases, until the entire unit in full has enough space to render horizontally across the page.

Be careful though—even with a non-fluid column width of 1024px, and a fluid width of your entire display, it’s still possible to run out of space. When this happens, you could end up with some major content-overflow scenarios. For example, it’s not difficult to push your navigation bar two or more rows in height.

The recommended way to ensure this doesn’t happen is to use custom styling to control the width of your elements, and/or to use the responsive visibility classes to control what is and is not shown for different screen sizes.

If you’re using Less, you can now also customize the @grid-float-breakpoint variable to control the trigger point where your navigation bar collapses, or you can just customize the appropriate media queries in the base CSS.

Navigation bars require JavaScript to be enabled to work correctly; if it’s not enabled, the bar should still display, but the collapsing won’t work correctly. You also need to ensure that if you’ve done a custom build, you’ve also included the collapse JavaScript plug-in.

The following code sample shows how to create a basic empty, collapsible navigation bar:

Blank nav bar produced by code sample

Blank nav bar produced by code sample

It may not look like much, but this bar will collapse and expand as needed for different sizes, and all we need to do now is to add some content to it. Let’s start with branding.

If you’re going to brand your navigation using the navbar-brand class on an <a> link, then the BS3 best practice is to group this element with the navbar-toggle element that builds the three-line collapse icon. This ensures that, when collapsing, the text shrinks down as far as it can before becoming invisible and stacking vertically.

To make this change, in the code sample, simply add:

Add the code immediately after the closing button tag that holds the three <span> elements with a class of icon-bar, and then refresh your browser. The result should now look like this:

Blank nav bar with a brand added

Blank nav bar with a brand added

If you hover over the brand text, you’ll see that it’s also an active link, generally used to return to a site’s home page. You can also put an image in here too, but there are no specific classes here to help you. I’ve done this in some designs, but unfortunately, it still takes a bit of manual work. If you make the image about the same height as the <H1> element, things stay lined up nicely. Otherwise, the best way I’ve found to make it work is to put some padding in front of the element holding the brand name, then absolute-position your logo with suitable bottom margins/padding so that it does not hide any content below.

Moving on from the brand class, we also have specific classes for forms, buttons, and text, as follows:

  • navbar-nav: for creating a main <ul> of navigation links and dropdowns
  • navbar-form: for creating inline miniature forms
  • navbar-btn: for marking button components up to be navbar friendly
  • navbar-text: for including independent lines of text in your bar
  • navbar-link: for adding independent links that are not part of the regular navigation items

You can use them all together, on their own as needed, or combine them with the new emerging web components specification and create a single bar that takes a configuration and draws what it needs, as it needs.

The following code sample expands the previous sample to include some navigation links:

Output produced by code sample

Output produced by code sample

As with all the other navigation, link classes, and elements, you’ll see we’ve employed the active class to mark the first link as active, and like the others, you can apply the disabled and other similar classes to mark up items as needed.

It’s just as easy to create a menu that expands down from any of the buttons. All you have to do is use the same pattern of markup as you do when creating drop-down menus on buttons, except you wrap it in a navbar-nav parent element like so:

Drop-down menu produced by code sample

Drop-down menu produced by code sample

You can combine each of these, so it’s simple to have drop-down and non-dropdown links in one navbar-nav <ul> just by marking up each <li> element as needed.

Another common requirement in navigation bars is the obligatory sign-in form, generally used to sign in to a protected area on a site.

BS3 makes these forms even easier to construct using the navbar-form class. So far, we’ve seen that all our elements are left-aligned in the navigation bar’s inner-content area. Since sign-in forms are usually right-aligned, the BS3 team has provided the navbar-right class to allow you to do just such a thing. The following code illustrates an example:

Navigation bar with sign-in form produced by code sample

Navigation bar with sign-in form, produced by code sample

Along the same lines, it’s often also required that when a person is signed in to your application, they have their name shown instead of the form, and optionally, a link and/or button to sign-out, or change options.

The button, text, and link classes have all of this covered, as shown in the following code:

Navigation bar with information display produced by code sample

Navigation bar with information display produced by code sample

The navigation bar itself also has a few clever tricks. You can place your navigation bar inside a container or other alignment class, then add navbar-fixed-top to it, and your navigation bar will stick to the top of its container, aligning itself perfectly with it.

You can also add the navbar-fixed-bottom class, which will stick your navigation bar to the bottom of the page, and the navbar-static-top class, which will stick the bar to the top of the container, but will allow it to scroll with the page content.

Finally, if you want a darkened navigation bar, then you can use the navbar-inverse class, which will invert the color set used by the entire component:

Navbar with the inverse class set

Navbar with the inverse class set

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