Hour 6. Labels, Badges, Panels, Wells, and the Jumbotron
What You’ll Learn in This Hour:
How to add extra information to elements with labels and badges
How to box up your content in wells and panels
How to feature special content in a Jumbotron
There are lots of ways you can adjust how your website looks in Bootstrap. And the labels, badges, panels, wells, and Jumbotron give you specific tools for designing different sections of your web pages. These are all Bootstrap components to give your site more features.
Labels and Badges
Labels and badges are a way to add extra information to an element. Although you might think of labels in relation to forms, you can put a label on almost anything. And badges are more an iconographic label to display an indicator or a counter.
Labels
Labels are typically an inline element inside another element that adds information about that element. Figure 6.1 shows a sample headline with a label.
To add a label to your content, add the .label class to a <span> element surrounding the text you want in the label. Then you must define the variation of label you want to use. The variation choices are
.label-default
.label-primary
.label-success
.label-info
.label-warning
.label-danger
Caution: Don’t Forget Both Label Classes
To add a label to your content, you need to include both the .label and .label-variation classes. If you leave off the variation, the label won’t display correctly.
The label variations change the color of the labels. Figure 6.2 shows the colors for the different label variations.
If you are a designer at heart, your first thought might be “but I don’t like those colors” or just that those colors don’t fit into your design. But that’s okay because you can easily change them to fit your design using a custom style sheet. Nearly every Bootstrap web page has a custom style sheet associated with it; this isn’t “cheating” or breaking the framework. But there are some things you should remember so that your custom styles show up:
Place your style sheet last in the <head> of your document. Your styles should be loaded after the Bootstrap styles.
Always be as specific as possible with your CSS style rules. The more specific you are, the more likely the style will be applied correctly.
Consider creating your own style classes to add to your HTML.
If you must modify the Bootstrap CSS, do it with Less rather than directly in the CSS. I cover this in Hour 23, “Using Less and Sass with Bootstrap.”
Badges
Badges are similar to labels but are generally used to show a count of something rather than words. To add a badge, add the code class="badge" to the element.
For example, you might have a link to an email inbox with a script to show how many new messages there are in a badge:
<a href="inbox">Inbox <span class="badge">4</span></a>
Note: Keep Empty Badges Empty
If you’re using a script to populate your badges, make sure that when the badge value is zero (0) the badge is empty. In other words: <span class="badge"></span>. When the badge is empty, Bootstrap automatically collapses the display so the badge doesn’t show up. This won’t work in Internet Explorer 8 because this browser does not support the :empty CSS selector.
You can add badges to any part of your web page, but they are most often used in navigation, links, and other dynamic elements.
Wells and Panels
Sometimes you want to add boxes around your content to add different effects. Wells are a fairly simple effect, and panels are more complex.
Wells
Wells are a simple style to give the element an inset effect. Figure 6.3 shows a standard well of content.
Create a well by adding the .well class to the element:
<p class="well">And this content is inside a well</p>
There are two optional classes you can add to your wells to make them smaller or larger than normal:
.well-lg
.well-sm
Wells might seem similar to blockquotes because the standard look and feel for a blockquote is indented slightly. Bootstrap handles blockquotes differently by treating them as a form of pull quote. It styles blockquotes with larger text and a border on the left side as well as indenting them. As you saw in Figure 6.3, wells actually add a gray background color to the indented content. If you add a blockquote inside a well, the blockquote is indented more but the border color is changed to show up inside the well. Figure 6.4 shows how different wells and wells with blockquotes look. Listing 6.5 shows the HTML to get that figure.
LISTING 6.5 Different Styles of Wells
<p>This is standard content.</p>
<p class="well">This content is inside a well</p>
<p class="well well-lg">This content is in a large well</p>
<p class="well well-sm">This content is in a small well</p>
<blockquote>This content is inside a blockquote</blockquote>
<div class="well"><blockquote>This content is inside a blockquote
inside a well</blockquote></div>
Panels
Panels, at first glance, look similar to wells, but they add more features including headers, footers, and contextual alternatives. It’s easy to add a panel to your document. Listing 6.6 shows how.
<div class="panel panel-default">
<div class="panel-body">
This is a panel
</div>
</div>
As with labels, panels use a .panel class and a class that defines the variation. There are six variants:
.panel-default
.panel-primary
.panel-success
.panel-info
.panel-warning
.panel-danger
These variants don’t come into play unless you add a panel header. Figure 6.5 shows the different variations of panels.
A panel header is typically placed above the panel body content and adds a background color to the header. If a panel header has a panel title, that title will also have modified styles. Listing 6.7 shows how to add a panel header with and without a title.
LISTING 6.7 Panels with Headers
<div class="panel panel-default">
<div class="panel-heading">
This is a panel heading without a title.
</div>
<div class="panel-body">
This content is in a panel.
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">This is a Panel Title</h3>
</div>
<div class="panel-body">
This content is in a panel.
</div>
</div>
Note: Panel Footers Do Not Change Colors
Panel footers do not change colors and borders, even if you use the different variations, because they are intended to be part of the background information.
As you can see, you use the class .panel-heading to define the heading and then .panel-title to define the title. You create a footer in the same way with the .panel-footer class. Listing 6.8 shows a panel with a footer.
LISTING 6.8 Panel with a Footer
<div class="panel panel-default">
<div class="panel-body">
This content is in a panel.
</div>
<div class="panel-footer">
This is content in a panel footer.
</div>
</div>
You can place the footer above or below the panel body (defined by .panel-body) and header, but the most common position is at the bottom of the panel.
The Jumbotron
The Jumbotron is a large layout block that can be used to call additional attention to featured content on your website. Figure 6.6 shows how a Jumbotron might look.
The Jumbotron in Figure 6.6 is inside a .container element. This gives it rounded corners and is the full width of the container, but not necessarily the page. If you put it outside all .container elements and put a .container inside it, it will lose the rounded corners and take up the full width of the screen, like in Figure 6.7.
Creating a Jumbotron is easy. Just add the .jumbotron to the container element. Then add the content you want featured into that element. Listing 6.9 shows the code for a Jumbotron.
LISTING 6.9 Code for a Jumbotron
<div class="jumbotron">
<h1>This is a Jumbotron</h1>
<p>This is content inside the Jumbotron</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
If you put it in your grid container, the Jumbotron will take up all 12 columns, with rounded corners. If you put it outside the container, the Jumbotron will fill the width of the window and the corners will not be rounded.
One example the Get Bootstrap site shows is the Narrow Jumbotron. Although it adds a lot of additional CSS to customize the layout, making the entire page narrower than standard bootstrap is done with just a few lines of CSS, as in Listing 6.10.
LISTING 6.10 Narrow the Container with CSS
@media (min-width: 768px) {
.container {
max-width: 730px;
}
}
The key things to notice about this CSS are that it’s inside a media query—@media (min-width: 768px)—and rather than setting a specific width, it sets the max-width for the element. This allows the element to continue to flex within the page in medium and large devices, but it won’t get any larger than 730px wide. This keeps the narrow design while still being responsive.
Summary
This hour covered a lot of components and design features. You learned about labels and badges as ways to include additional information about your content. You also learned about panels and wells as a way to highlight content with background colors, borders, and some indenting. Finally, you learned how to use the Jumbotron to create a large but lightweight feature box on your site.
Table 6.1 covers all the CSS classes learned in this hour.
Workshop
The workshop contains quiz questions to help you process what you’ve learned in this hour. Try to answer all the questions before you read the answers.
A. Badges are often used to display automated features such as the number of new messages in an inbox. That automation is usually done with things like PHP or JavaScript. A lot of scripts are included in Bootstrap, but the actual functionality for an inbox counter or other badge feature is beyond the scope of Bootstrap. If you need this functionality, you should search the Web to find a script that meets your needs.
Q. If I don’t like the default background color for wells, can I change it?
A. Yes, you change it with your style sheet. The quickest way is to add a style to the .well property.
.well {
background-color: #white;
}
Q. Does using a .jumbotron class change the styles of the contained content?
A. For the most part, no. But a few styles are added. For instance, paragraphs inside the Jumbotron are given a 15px margin, 21px font size, and 200 font weight. If an <hr> tag is in the Jumbotron, it will be given a border top color. And, as with all other Bootstrap styles, you can add your own style sheet to create your own designs.
Quiz
1. How do you add a label to your content?
a. Add the .label class to any element.
b. Add the .label and .label-[variation] classes to any element.
c. Add the #label ID to any element.
d. Add the data-label="label content" attribute to the element to be labeled.
2. What’s the difference between a label and a badge?
a. There is no difference.
b. A label is text and a badge is a number.
c. Labels are primarily text, while badges are more iconographic.
d. Labels are primarily iconographic, while badges are more text focused.
3. True or False: You should never create your own style classes when modifying Bootstrap.
4. Which of the following is not a label or panel variation?
a. main
b. default
c. danger
d. success
5. Why should you leave badges empty rather than using “0” or “null”?
a. So that the badges don’t look odd on the page.
b. So that the badges disappear when they are empty.
c. So that the badges don’t get mistaken for labels.
d. There is no reason to not use “0” or “null” in badges.
6. True or False: Wells and blockquotes are displayed the same way in Bootstrap.
7. Which of these is a valid well class?
a. .well-lg
b. .well-default
c. .well-info
d. All of the above
8. True or False: Panel variations don’t change the panel if there is no heading.
9. True or False: This panel has a title.
<div class="panel panel-default">
<div class="panel-heading">
This content is in a panel header.
</div>
<div class="panel-body">
This content is in a panel.
</div>
<div class="panel-footer">
This is content in a panel footer.
</div>
</div>
10. True or False: Jumbotrons only work within a .container class.
Quiz Answers
1. b. Add the .label and .label-[variation] classes on the element containing the label content.
2. c. Labels are primarily text, while badges are more iconographic.
3. False. A good way to modify how Bootstrap displays is by creating your own style classes and applying those to your design.
4. a. There are six variations in Bootstrap: default, primary, info, success, warning, and danger.
5. b. Badges that are empty will disappear automatically.
6. False. Although both wells and blockquotes are typically displayed indented, Bootstrap displays them slightly differently.
7. a. The .well-lg class defines a large well.
8. True. Panel variations don’t change the panel if there is no heading.
9. False. Although it has a heading, it does not have a title set with the .panel-title class.
10. False. Jumbotrons work within a .container class or outside of it. But they do look different.
Exercises
1. Find a portion of your website that could use a label or badge, and add it to the content. Remember that badges are often more dynamic than labels.
2. Put some content inside a well or panel. An easy way to decide which to use is to look at whether the content needs a header (or footer). If it doesn’t need those elements, then a well might be all you need.
3. Create a Jumbotron layout. Find something you’d like to feature and put it in a Jumbotron to give it focus for that page.