In this series on Bootstrap 3, we're taking you through all the new features in the latest version of this popular framework. In the last tutorial we looked at some changes to components, and this time we'll finish off by looking at changes to other components, such as labels, badges, list groups, and panels.
Label and Badge Changes
This is going to be a very short section, because there have only been two changes to the labels, and one big one to the badges.
To make a label in BS2, we simply gave it a label-xxxx class name, where xxxx represents the state the label was to portray. Under BS3, we now have a two-part class definition, and a rename from error to danger for the red color class, so that the naming now matches everything else, and that's pretty much it.
There are also no sizing classes/options for these in BS3, as labels take on the size of the surrounding container. So, if you create a <span> with an appropriate label class, and then wrap it in a <H1>, the size of that label will be much larger than the rest.
The following code sample demonstrates this:
<h1><span class="label label-default">Default</span></h1><h2><span class="label label-primary">Primary</span></h2><h3><span class="label label-success">Success</span></h3><h4><span class="label label-info">Info</span></h4><h5><span class="label label-warning">Warning</span></h5><h6><span class="label label-danger">Danger</span></h6>
Badges, on the other hand, have undergone a bigger change.
In BS3, badges no longer have contextual color classes. That is, there is no longer a label-success or label-warning, as there is with the previous labels and with other elements.
This means you can't color badges in the same way you could in BS2, and any label you create can only be rendered using the standard grey color. Well, at least officially you can't.
If you apply an alert-xxxxx alongside a label class on the <span> being used for your label, then the label will take on the coloring of that alert class, and while this is not a supported way of doing things, it does work, and allows you to use the labels as you did in BS2.
To mark up a standard label, all you need to do is add a label and 'label-default' class to a <span>, and you’re ready to go:
<span class="label label-default">This is a label</span>
If you want to hack your labels to use the different colors, then you can do so as follows:
<span class="badge">Normal</span><span class="badge alert-success">Success</span><span class="badge alert-info">Info</span><span class="badge alert-warning">Warning</span><span class="badge alert-danger">Danger</span>
One nice feature the badge component does still have, however, is its use of the empty: pseudo-selector, allowing it to automatically vanish from display if its inner text is empty. This helps with the internal changes designed to work on List groups and Pill lists, because it now means that it's immensely easy to create things like inbox notification lists, where the values disappear when the <span> contents are removed. Here’s an example:
<div class="col-md-4"><ul class="nav nav-pills nav-stacked"><li class="active"><a href="#"><span class="badge pull-right">42</span>
Inbox</a></li><li class="active"><a href="#"><span class="badge pull-right">10000</span>
Spam</a></li><li class="active"><a href="#"><span class="badge pull-right"></span>
Lottery Wins</a></li></ul></div>
If you examine the code, you'll see that the last option in the list has no value inside its span tag, which, because of the empty: pseudo-selector, causes the browser not to render it. However, the second you put anything in there using JavaScript or any method that can manipulate the DOM, that badge will pop right back into existence without missing a beat. Notice also the use of the pull-right alignment class to make sure the label sits on the right side of the element, making everything look nice and aligned.
List Group Changes
List groups are a new thing added in BS3, designed to replace the BS2 navigation lists, and have far more capabilities than their BS2 counterpart.
Once you start to use them, you'll realize that list groups are more like fully styleable list-item boxes, and to be honest, all it would take to create a fully styleable list box would in fact be to wrap them in their own div and set the overflow to scroll appropriately.
A basic list group component can be created with markup similar to the following:
<ul class="list-group"><li class="list-group-item">Cheese</li><li class="list-group-item">Burger</li><li class="list-group-item">Bun</li><li class="list-group-item">Pickles</li><li class="list-group-item">Tomato</li></ul>
As you saw previously in the badges section, you can add badges to lists and other objects, and if you add them to a list group, they line up perfectly:
<ul class="list-group"><li class="list-group-item"><span class="badge pull-right">4</span>Cheese</li><li class="list-group-item"><span class="badge pull-right">2</span>Burger</li><li class="list-group-item"><span class="badge pull-right">1</span>Bun</li><li class="list-group-item"><span class="badge pull-right"></span>Pickles</li><li class="list-group-item"><span class="badge pull-right">2</span>Tomato</li></ul>
The most observant of you may be thinking, “Ok, so list groups look good, but they're still just <ul>s underneath the surface, there's really nothing that special about them.”
Well, maybe you’re right about that… or maybe we need to experiment a bit more.
List groups, unlike the classes we saw in the navigation sections, cannot just be applied to an unordered list. A list group can be applied to any parent container, and when done so, the styling will cause all of the children of that container to become linked. Take a look at the following example:
<div class="list-group"><a class="list-group-item">Cheese</a><a class="list-group-item">Burger</a><a class="list-group-item">Bun</a><a class="list-group-item">Pickles</a><a class="list-group-item">Tomato</a></div>
As this code sample shows, we can create a list of links using nothing more than a <div> surrounding the list, and that list then instantly becomes a list-style menu with a light grey hover effect. However, because the inner tags are <a> tags, we can now go even further:
<div class="list-group"><a class="list-group-item active"><strong>Cheese</strong><p>A delicious slice of ...</p><img src="images/cheese.jpg" /></a><a class="list-group-item"><strong>Burger</strong><p>Prime Aberdeen angus beef ...</p><img src="images/burger.jpg" /></a><a class="list-group-item"><strong>Bun</strong><p>A freshly baked soft sesame seed bun ...</p><img src="images/bun.jpg" /></a><a class="list-group-item"><strong>Pickles</strong><p>The finest pickles from the finest purveyors ...</p><img src="images/pickle.jpg" /></a><a class="list-group-item"><strong>Tomato</strong><p>Fresh organic tomatoes picked directly from the vine ...</p><img src="images/tomato.jpg" /></a></div>
Notice that we still get the full, cell-hover effect when your mouse hovers over a link, and by simply adding the active class, as we have in other examples, we can mark an item as being the active one, and all while maintaining a single set of borders and the appearance of each item behaving just like a regular <ul> element.
But why stop there?
Just as with any other element in BS3, list groups also have their own contextual classes to give them meaning in the standard color set:
<div class="list-group"><a class="list-group-item list-group-item-success"><strong>Cheese</strong><p>...</p><img src="images/cheese.jpg" /></a><a class="list-group-item list-group-item-success"><strong>Burger</strong><p>...</p><img src="images/burger.jpg" /></a><a class="list-group-item list-group-item-success"><strong>Bun</strong><p>...</p><img src="images/bun.jpg" /></a><a class="list-group-item list-group-item-danger"><strong>Pickles</strong><p>...</p><img src="images/pickles.jpg" /></a><a class="list-group-item list-group-item-warning"><strong>Tomato</strong><p>...</p><img src="images/tomato.jpg" /></a></div>
As you can see, what use is a burger without cheese and a bun? Tomatoes I can take or leave, but please hold the pickle!
Media Objects and Custom Thumbnail Changes
We covered the basic thumbnail changes for the styling back in the tutorial on CSS, but what we didn’t get into are the changes in the surrounding components.
The amalgamation that now exists in BS3 allows us to combine the thumbnail classes with the grid classes to create easy-to-use image lists. The most basic way we can use them is to use the row class and grid spans, along with the basic thumbnail classes, to make perfectly lined-up thumbnails, as the following shows:
<div class="row"><div class="col-md-3"><a href="#" class="thumbnail"><img data-src="holder.js/100%x180" /></a></div><div class="col-md-3"><a href="#" class="thumbnail"><img data-src="holder.js/100%x180" /></a></div><div class="col-md-3"><a href="#" class="thumbnail"><img data-src="holder.js/100%x180" /></a></div><div class="col-md-3"><a href="#" class="thumbnail"><img data-src="holder.js/100%x180" /></a></div></div>
For those who are wondering, I'm using holder.js to produce the image place holders. I'll let you Google the location (it'll come up as the first available); it's a great tool for reserving image space, especially when doing mockups for clients.
This example is nothing really special; if you've been reading the rest of this series, you've likely already figured out how easy it is to do this. However, if we add a little more markup and work with the same idea, we can easily produce something like the following:
<div class="row"><div class="col-md-3"><div class="thumbnail"><img data-src="holder.js/100%x180" /><div class="caption"><h3>Ecstasy requires exploration</h3><p>The planet is radiating pulses. This life is nothing short of a blossoming oasis of transformative potentiality outside of the being.</p><p><a href="#" class="btn btn-success" role="button">Like</a><a href="#" class="btn btn-danger" role="button">Dislike</a></p></div></div></div><div class="col-md-3"><div class="thumbnail"><img data-src="holder.js/100%x180" /><div class="caption"><h3>We exist as frequencies</h3><p>This life is nothing short of a blossoming uprising of frequency aspiration. Potential is the richness of conscious living, and of us.</p><p><a href="#" class="btn btn-success" role="button">Like</a><a href="#" class="btn btn-danger" role="button">Dislike</a></p></div></div></div><div class="col-md-3"><div class="thumbnail"><img data-src="holder.js/100%x180" /><div class="caption"><h3>To traverse the myth is to become one</h3><p>It can be difficult to know where to begin. The totality is calling to you via sub-atomic particles. Can you hear it?</p><p><a href="#" class="btn btn-success" role="button">Like</a><a href="#" class="btn btn-danger" role="button">Dislike</a></p></div></div></div><div class="col-md-3"><div class="thumbnail"><img data-src="holder.js/100%x180" /><div class="caption"><h3>We reflect, we heal, we are reborn</h3><p>Through reiki, our essences are nurtured by purpose. You will soon be guided by a power deep within yourself.</p><p><a href="#" class="btn btn-success" role="button">Like</a><a href="#" class="btn btn-danger" role="button">Dislike</a></p></div></div></div></div>
Creating vertical lists is just as easy, but instead of using the thumbnail classes, we now need to use the media object classes. These classes and the associated markup create a layout similar to the previous example, but instead of appearing underneath the thumbnail, the text is lined up to the right.
The primary design motive here is in comment and message lists with an avatar image, but they can be used for news items, product lists, and many other things.
To mark up a media object, simply use an outer div with a class of media. Then, inside of that, use the media-object, media-body, and media-heading classes to mark up the individual bits, as the following example shows:
<div class="media"><a class="pull-left" href="#"><img class="media-object" data-src="holder.js/64x64" /></a><div class="media-body"><h4 class="media-heading">To follow the journey is to become one with it</h4><p>The goal of ultrasonic energy is to plant the seeds of awareness rather than stagnation. You and I are beings of the quantum matrix. Purpose is a constant.</p></div></div>
As you can probably already imagine, it wouldn't take much to add these into a List group, or some other structure built up using the BS3 grid system. BS3 actually makes it much easier than that by providing a dedicated media object list class and supported markup.
By changing your markup just a little, you can generate full lists of media objects, as follows:
<ul class="media-list"><li class="media"><a class="pull-left" href="#"><img class="media-object" src="holder.js/64x64" /></a><div class="media-body"><h4 class="media-heading">Humankind has nothing to lose</h4><p>Awareness is the growth of synchronicity, and of us. This life is nothing short of an unfolding explosion of infinite truth. We exist as sonar energy.</p></div></li><li class="media"><a class="pull-left" href="#"><img class="media-object" src="holder.js/64x64" ></a><div class="media-body"><h4 class="media-heading">It is a sign of things to come</h4><p>Humankind has nothing to lose. We are at a crossroads of rebirth and discontinuity. We are in the midst of a consciousness-expanding maturing of guidance that will clear a path toward the quantum soup itself.</p></div></li><li class="media"><a class="pull-left" href="#"><img class="media-object" src="holder.js/64x64" ></a><div class="media-body"><h4 class="media-heading">Only a traveller of the galaxy may generate this canopy of life</h4><p>We must learn how to lead unified lives in the face of delusion. Eons from now, we warriors will reflect like never before as we are reborn by the quantum soup. We must beckon ourselves and fulfill others.</p></div></li></ul>
If you nest the <li>s and <ul>s inside the media list, BS3 will automatically indent them to give the effect of a parent/child hierarchy. You can also use different combinations of pull-right and pull-left where needed to position the image on the opposite side, for example. Or, to line things up slightly differently, you can combine them with panels (which we'll see shortly) and other similar structures to put borders and other contextual hints around the entire list and wrap them inline to produce composite components.
Panel Changes
Like list groups, panels are a new addition to BS3—and what an addition they are!
We’re all familiar with things like forms, for example, being in group boxes, or sections of a website being logically divided up from each other. BS3 panels allow you to easily control this logical separation.
You can have plain old panels, panels with headers, panels with titles in headers, panels with footers, and panels with their own set of contextual colors.
A basic panel is constructed using just two <div> elements and three CSS classes:
<div class="panel panel-default"><div class="panel-body">
Panel content goes here</div></div>However, it's not much good without a title, and really as it stands in this code sample, it's nothing more than a div with padding and a border around it.
If we add a third <div> element, however, and give that <div> a class of panel-heading, then we start to get something a bit more interesting:
<div class="panel panel-default"><div class="panel-heading">Panel Header</div><div class="panel-body">
Panel content goes here</div></div>
Your panel header doesn't have to be just a simple <div>, either; you can include <hx> tags along with any other regular tag, such as an <img>, and things will resize as required:
<div class="panel panel-default"><div class="panel-heading"><h1 class="panel-title">Panel Header</h1><p>Panel sub header</p></div><div class="panel-body"><p>Panel content goes here</p><p>Panel content goes here</p><p>Panel content goes here</p></div></div>
You can also apply a panel footer by adding a <div> element after your panel body and applying the class panel-footer. If you want to give your panels meaning, you can also use the contextual colors that are used for everything else. You do this simply by replacing the panel-default class in the previous code samples with panel-primary, panel-success, panel-info, panel-warning, or panel-danger.
panel-primaryOne thing to be careful of, though—if you're using panel-footer and contextual colors, the footer will NOT adopt the panel’s color scheme. This is deliberate, as the BS3 developers felt that contextually, only the contents of the panel were important. Any buttons, controls, or footer information to respond to that information did not need to be highlighted in the same way, thus allowing the developer freedom to add different contextual colors for different controls as required.
Panels can also work fluidly with list groups and tables. If you join a table with a panel inside of the parent div, you get a panel as shown previously, and a seamless join to the table below it, as the following shows:
<div class="panel panel-primary"><div class="panel-heading"><h1 class="panel-title">Panel Header</h1><p>Panel sub header</p></div><div class="panel-body"><p>Panel content goes here</p><p>Panel content goes here</p><p>Panel content goes here</p></div><table class="table"><thead><tr><th>#ID</th><th>Name</th><th>Twitter Handle</th></tr></thead><tbody><tr><td>1</td><td>Peter Shaw</td><td>@shawty_ds</td></tr><tr><td>2</td><td>Digital Solutions UK</td><td>@digitalsolut_uk</td></tr></tbody></table></div>
If you remove the <div> containing the panel body from your markup, the whole thing will collapse down, leaving just the panel header and border, and leading straight into the table— great for just providing tables with headers, if that’s what you need.
Adding a list group into your panel is also just as easy, and performed in exactly the same way. I'll leave that as an exercise to the reader to play with, however.
Other Changes
Before we finally leave the tutorial on components behind, there are a few more things to cover: the jumbotron, alert boxes, progress bars, and wells.
The jumbotron is not a new element, but its use in BS2 was slightly more messy than it now is in BS3. Creating a jumbotron is very simple; you simply use a <div> with the class jumbotron applied, and then add some optional markup inside. What markup you use is entirely up to you, but to get the intended effect, the recommended markup is:
<div class="jumbotron"><h1>Bootstrap 3</h1><p>Don't you just love this framework? It's elegant, simple to use, and frees you from so much boilerplate code.</p><p><a class="btn btn-primary btn-lg" role="button">Heck yes I do</a></p></div>
And that’s it. You can remove the rounded corners and make it full-width by swapping the order and moving it outside its container, but there are no special classes or optional colors for this— it's designed to be big and bold, and catch your attention.
Speaking of catching attention, we also have a number of alert classes, and the only real change between the BS2 version and BS3 is the renaming of the class name alert-error to alert-danger. Other than that, the markup to produce alerts is still as simple as using a standard <div> with the appropriate contextual classes added:
<div class="alert alert-success">You did something ...</div><div class="alert alert-info">Something happened you ...</div><div class="alert alert-warning">Something happened that wasn't ...</div><div class="alert alert-danger">You did something that was not liked ...</div>
If you want to add links in your alerts using a standard <a> tag, make sure you apply the class alert-link to the anchor tag; this will ensure that the link coloring remains consistent with the contextual color class being used.
You can also add a cross/dismiss icon to the alert, allowing the user to close it and make it vanish from the display. To do this, we need to add a <button> element marked up with a sprinkle of data attributes and extra classes as follows:
We added the extra class alert-dismissable to the outer <div>, and then used a dismiss data attribute to connect the JavaScript action to the alert’s dismiss method, using a simple button.
If alerts provide operational feedback, then there's one other feedback-related component that's a must-have—the progress bar.
No feedback element has produced so much hatred or salutation as this humble, little colored bar. From BS2 to BS3, the only changes made here, like with the alert classes, are the renaming of the contextual colors to match the overall scheme renames elsewhere in the framework.
The base HTML markup to produce them remains exactly the same:
<div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60% Complete</span></div></div>
One thing you really should pay attention to, however (and something that I have reiterated at various points in this series), is the group of attributes and extras used to make this element friendly to screen readers and similar equipment.
Since a progress bar often tends to be purely graphical in nature, it means nothing to someone who's unable to read the screen. Most other elements have at least enough text to give the reader an idea of what's there; progress bars need all the help they can get. You'll see from the previous example that we've added extra aria values to report on what percentage the value is at, and we've also marked up a span that's for screen readers only, specifically to give an audible report.
If we remove the sr-only class, however, it makes our bar look a bit better to those who can see it too:
sr-only class removed from the inner spanIt goes without saying that you can also add progress-bar-success, progress-bar-info, progress-bar-warning, and progress-bar-danger to the inner <div> with the progress-bar class, in order to take advantage of the contextual colors available.
You can also add progress-striped and/or active to the outer <div> alongside the progress class in order to get striped and animated effects on your progress bars. A stacked progress bar effect can be obtained by placing multiple progress-bar<div>s inside of the outer progress container and setting their values appropriately.
The final element that's left, is the humble well. No changes have been made to this since BS3, but it does now have an extra class called well-sm. There's no magic involved here— if you want a simple, boxed-off area with a shaded background, simply create a <div> element, add the well class to it, and then add your content inside. Wells are useful for sidebars and/or footers, or anything too simple to warrant being put in a full panel or other fenced off area. There are no contextual colors or special actions, either; it’s simple, effective, and easy to use:
<div class="well">Hello World!</div>
This tutorial represents a chapter from Bootstrap 3 Succinctly, a free eBook from the team at Syncfusion.
