Advertisement
  1. Web Design
  2. Bootstrap 3
Webdesign

Bootstrap 3 Succinctly: Additional Changed Components Features

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Bootstrap 3 Succinctly.
Bootstrap 3 Succinctly: Changed Components Features
Bootstrap 3 Succinctly: Changed JavaScript 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 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:

Output produced by code sample
Output produced by code sample

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:

Label produced by code sample
Label produced by code sample

If you want to hack your labels to use the different colors, then you can do so as follows:

Output produced by code sample
Output produced by code sample

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:

Output produced by code sample
Output produced by code sample

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:

Output produced by code sample
Output produced by code sample

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:

Output from code sample
Output from code sample

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:

Output produced by code sample
Output produced by code sample

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:

Output produced by code sample
Output produced by code sample

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:

Output produced by code sample
Output produced by code sample

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:

Thumbnails produced by code sample
Thumbnails produced by code sample

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:

Output produced by code sample
Output produced by code sample

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:

Media object produced by code sample
Media object produced by code sample

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:

Full media object list generated by code sample
Full media object list generated by code sample

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:

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:

Panel produced by code sample
Panel produced by code sample

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:

Output produced by code sample
Output produced by code sample

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.

Output produced by code sample with the type set to panel-primary
Output produced by code sample, with the type set to panel-primary

One 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:

Output produced by code sample
Output produced by code sample

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:

umbotron produced by code sample
Jumbotron produced by code sample

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:

Alert boxes produced by code sample
Alert boxes produced by code sample

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:

Dismissible alert produced by code sample
Dismissible alert produced by code sample

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:

Progress bar produced by sample
Progress bar produced by sample

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:

Progress bar with the sr-only class removed from the inner span
Progress bar with the sr-only class removed from the inner span

It 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:

Well example produced by sample
Well example produced by sample

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.