Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

5. Theme Reference: Part 2

Panos Matsinopoulos¹

(1)

KERATEA, Greece

In Chapter 4, "Theme Reference: Part 1," you have learned about some of the most important Twitter Bootstrap components, and you have started creating a reference page for all of them. In this chapter, the second part, you continue with some more components, within the same reference project.

In particular, the remaining components that I promised to present you are

Tabs, which are used to group information
Alerts, which are used to display a standout message
Progress bars, which are used to visually show to the user the percentage of a work under process already done
Cards, beautiful rectangular areas with rich content that draws viewers' attention
Carousel, a component that works like an image or some other rich content slideshow

At the end, you will be asked to create a page that would require you to use most of the preceding components (Figure 5-1).

../images/497763_1_En_5_Chapter/497763_1_En_5_Fig1_HTML.jpg — Figure 5-1
Twitter Bootstrap Example Page with Various Elements

Learning Goals

1.
Learn how you can create tabs.
2.
Learn how you can create alerts.
3.
Learn how you can create progress bars.
4.
Learn how you can create cards.
5.
Learn how you can create carousels.

Introduction

You continue working on the Twitter Bootstrap Theme Reference project that you started in the previous chapter. Let’s start adding more components into it.

Tabs

Sometimes you want to organize the information on your page using tabs. The tabs are good because they group parts of the information under a title and they do not display all the information at the same time. The user selects which information group to see/read by clicking the corresponding tab header.

For example, see some tabs in Figure 5-2.

../images/497763_1_En_5_Chapter/497763_1_En_5_Fig2_HTML.jpg — Figure 5-2
Example of Tabs

The information displayed is changed according to the tab header being clicked.

Let's see how we can implement the preceding tabs example.

First, you need to understand that there are two parts in the HTML implementation of a tabs feature:

1.
The tab headers
2.
The different contents with the actual information

The Tab Headers

The tab headers are an unsorted list ul with class nav nav-tabs. Each element in the list (li) corresponds to a tab header, and it has to have the class nav-item. The content of each li is an anchor with class nav-link and the data attribute data-toggle with value tab. Also, each anchor has an href value pointing to the corresponding information container. When this anchor is clicked, that information container is going to be displayed to the user. Note that the li corresponding to the information container that should be displayed to the user needs to have the class active too.

Here is the HTML fragment for tab headers for the preceding example (Listing 5-1).

<a class="nav-link active" href="#dashboard" data-toggle="tab">Dashboard</a>

</li>

<a class="nav-link" href="#payments" data-toggle="tab">Payments</a>

</li>

<a class="nav-link" href="#invoices" data-toggle="tab">Invoices</a>

</li>

<a class="nav-link" href="#settings" data-toggle="tab">Settings</a>

</li>

</ul>

Listing 5-1

The ul HTML Fragment for the Tabs Example

Let’s change your main HTML page using the preceding fragment. Add it to the bottom of the container. Before this ul list, add the header for the Tabs like you did for the other headers (Listing 5-2).

Listing 5-2

Tabs Header

If you save the page and load it on your browser, the Tabs part will be the one shown in Figure 5-3.

../images/497763_1_En_5_Chapter/497763_1_En_5_Fig3_HTML.jpg — Figure 5-3
Tabs with Empty Content

That's a good step. You can see how the tabs are well put on the page. You can even click the headers in order to see how the active tab changes according to the tab that you click.

What is missing now is the information that should be attached at each tab.

The Tab Information

You put the tab information inside a div with class tab-content. Inside that, we create one div per information group/tab header. This div needs to have a class tab-pane. Also, it needs to have the correct id, different for each tab information panel and corresponding to the href value of the corresponding tab.

Let's add the following piece of HTML code (Listing 5-3) at the end of the main content container, after the unsorted list that we have created for the tab headers.

<p>

<strong>Dashboard:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

</div>

<p>

<strong>Payments:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

</div>

<p>

<strong>Invoices:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

</div>

<p>

<strong>Settings:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

</div>

Listing 5-3

HTML Fragment for Tab Content

As you can see in the preceding code

1.
You have a div that contains all the other individual divs.
2.
This parent div has class tab-content.
3.
Each div has id value equal to the href of the corresponding tab header anchor.
4.
Each div has the class tab-pane.
5.
The first div has the class active too, because this is the first information box that is displayed for the first tab header, which is also, initially, active.

If you save the preceding information and reload the page, you will see the following (Figure 5-4).

../images/497763_1_En_5_Chapter/497763_1_En_5_Fig4_HTML.jpg — Figure 5-4
Tabs with Content

As you can see, the tab information is clearly displayed below the tab headers. Also, if you try to click different tab headers, you will see how the following information changes accordingly.

However, there is a problem with the content being too close to the tab headers (Figure 5-5).

../images/497763_1_En_5_Chapter/497763_1_En_5_Fig5_HTML.jpg — Figure 5-5
Problem with the Tab Content Being Too Close to Tab Headers

In order to fix this, you need some bottom margin on the ul that includes the headers. You can achieve that by adding the utility class mb-3 to the ul element.

Now if you load the page on your browser, you will see the following (Figure 5-6).

../images/497763_1_En_5_Chapter/497763_1_En_5_Fig6_HTML.jpg — Figure 5-6
Tab Content Now Has Some Free Space Above It

Note

Twitter Bootstrap is encouraging the authors to make their content compatible with assistive technologies, such as screen readers. This means that instead of just using the styling classes, you may also have to add some extra HTML attributes specially designed for this purpose. For example, the role HTML attribute for the ul element with the tab list needs to have the value tablist. If you want to learn about how you can create accessible rich Internet applications, you have to read and apply the practices given here: WAI-ARIA Authoring Practices.

Checkpoint

You have done a lot of work on this page. Before you continue, let's make sure that it has the following content as in Listing 5-4.

<!DOCTYPE html>

<head>

<title>Twitter Bootstrap Reference Page</title>

</head>

<body>

<a class="navbar-brand" href="#">Bootstrap Ref. Page</a>

<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar"

aria-controls="navbar"

aria-expanded="false"

aria-label="Toggle navigation">

</button>

<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>

</li>

<a class="nav-link" href="#about">About</a>

</li>

<a class="nav-link" href="#contact">Contact</a>

</li>

<a href="#"

class="nav-link dropdown-toggle"

data-toggle="dropdown">

Dropdown

</a>

<a href="#" class="dropdown-item">Action</a>

<a href="#" class="dropdown-item">Another action</a>

<a href="#" class="dropdown-item">Something else here</a>

<div class="dropdown-header">Nav header</div>

<a href="#" class="dropdown-item">Separated link</a>

<a href="#" class="dropdown-item">One more separated link</a>

</div>

</li>

</ul>

</div>

</nav>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

</div>

<h1>Buttons</h1>

<h2>Small Sizes</h2>

<p>

<button type="button" class="btn btn-sm btn-primary">btn btn-sm btn-primary</button>

<button type="button" class="btn btn-sm btn-secondary">btn btn-sm btn-secondary</button>

<button type="button" class="btn btn-sm btn-success">btn btn-sm btn-success</button>

<button type="button" class="btn btn-sm btn-danger">btn btn-sm btn-danger</button>

<button type="button" class="btn btn-sm btn-warning">btn btn-sm btn-warning</button>

<button type="button" class="btn btn-sm btn-light">btn btn-sm btn-light</button>

</p>

<h2>Normal Sizes</h2>

<p>

<button type="button" class="btn btn-primary">btn btn-primary</button>

<button type="button" class="btn btn-secondary">btn btn-secondary</button>

<button type="button" class="btn btn-success">btn btn-success</button>

<button type="button" class="btn btn-danger">btn btn-danger</button>

<button type="button" class="btn btn-warning">btn btn-warning</button>

<button type="button" class="btn btn-light">btn btn-light</button>

</p>

<h2>Large Sizes</h2>

<p>

<button type="button" class="btn btn-lg btn-primary">btn btn-lg btn-primary</button>

<button type="button" class="btn btn-lg btn-secondary">btn btn-lg btn-secondary</button>

<button type="button" class="btn btn-lg btn-success">btn btn-lg btn-success</button>

<button type="button" class="btn btn-lg btn-danger">btn btn-lg btn-danger</button>

<button type="button" class="btn btn-lg btn-warning">btn btn-lg btn-warning</button>

<button type="button" class="btn btn-lg btn-light">btn btn-lg btn-light</button>

</p>

<h2>Block Sizes</h2>

<p>

<button type="button" class="btn btn-block btn-primary">btn btn-block btn-primary</button>

<button type="button" class="btn btn-block btn-secondary">btn btn-block btn-secondary</button>

<button type="button" class="btn btn-block btn-success">btn btn-block btn-success</button>

<button type="button" class="btn btn-block btn-danger">btn btn-block btn-danger</button>

<button type="button" class="btn btn-block btn-warning">btn btn-block btn-warning</button>

<button type="button" class="btn btn-block btn-info">btn btn-block btn-info</button>

<button type="button" class="btn btn-block btn-light">btn btn-block btn-light</button>

<button type="button" class="btn btn-block btn-dark">btn btn-block btn-dark</button>

<button type="button" class="btn btn-block btn-link">btn btn-block btn-link</button>

</p>

<h2>Outline buttons (Normal Sizes)</h2>

<p>

<button type="button" class="btn btn-outline-primary">btn btn-outline-primary</button>

<button type="button" class="btn btn-outline-secondary">btn btn-outline-secondary</button>

<button type="button" class="btn btn-outline-success">btn btn-outline-success</button>

<button type="button" class="btn btn-outline-danger">btn btn-outline-danger</button>

<button type="button" class="btn btn-outline-warning">btn btn-outline-warning</button>

<button type="button" class="btn btn-outline-info">btn btn-outline-info</button>

<button type="button" class="btn btn-outline-light">btn btn-outline-light</button>

<button type="button" class="btn btn-outline-dark">btn btn-outline-dark</button>

<button type="button" class="btn btn-outline-link">btn btn-outline-link</button>

</p>

<h1>Tables</h1>

<h2>Shopping List</h2>

<tr><th colspan="2">Shopping List</th></tr>

<tr><td>Cheese</td><td>1 kgr</td></tr>

<tr><td>Coffee</td><td>0.5 kgr</td></tr>

</table>

<h2>Travel Plan</h2>

<tr><th colspan="2">Travel Plan</th></tr>

<tr class="table-active"><th>(active) Action</th><th>Due</th></tr>

<tr class="table-success"><td>(success) Book Ticket</td><td>Feb 20th</td></tr>

<tr class="table-info"><td>(info) Book Hotel</td><td>March 26th</td></tr>

<tr class="table-warning"><td>(warning) Buy Suitcase</td><td>April 20th</td></tr>

<tr class="table-danger"><td>(danger) Get Passport</td><td>April 30th</td></tr>

</table>

<h1>Labels & Badges</h1>

<h4>

<span class="badge badge-primary">€20.00 - Primary</span>

<span class="badge badge-secondary">€20.00 - Secondary</span>

<span class="badge badge-success">€20.00 - Success</span>

<span class="badge badge-danger">€20.00 - Danger</span>

<span class="badge badge-warning">€20.00 - Warning</span>

<span class="badge badge-light">€20.00 - Light</span>

</h4>

<button class="btn btn-light">Inbox <span class="badge badge-primary badge-pill">1</span></button>

<button class="btn btn-light">Inbox <span class="badge badge-secondary badge-pill">2</span></button>

<button class="btn btn-light">Inbox <span class="badge badge-success badge-pill">3</span></button>

<button class="btn btn-light">Inbox <span class="badge badge-danger badge-pill">4</span></button>

<button class="btn btn-light">Inbox <span class="badge badge-warning badge-pill">5</span></button>

<button class="btn btn-light">Inbox <span class="badge badge-info badge-pill">6</span></button>

<button class="btn btn-light">Inbox <span class="badge badge-light badge-pill">7</span></button>

<button class="btn btn-light">Inbox <span class="badge badge-dark badge-pill">8</span></button>

<li class="nav-item"><a class="nav-link active" href="#dashboard" data-toggle="tab">Dashboard</a></li>

<li class="nav-item"><a class="nav-link" href="#payments" data-toggle="tab">Payments</a></li>

<li class="nav-item"><a class="nav-link" href="#invoices" data-toggle="tab">Invoices</a></li>

<li class="nav-item"><a class="nav-link" href="#settings" data-toggle="tab">Settings</a></li>

</ul>

<p>

</p>

</div>

<p>

</p>

</div>

<p>

</p>

</div>

<p>

</p>

</div>

</body>

</html>

Listing 5-4

Twitter Bootstrap Reference Page Checkpoint

Alerts

There are times that you want to display a message that will attract users' attention. These are called alerts. The following is an example (Figure 5-7).

../images/497763_1_En_5_Chapter/497763_1_En_5_Fig7_HTML.jpg — Figure 5-7
Alert Example

These messages are usually displayed at the top of the page, but not necessarily only there.

Twitter Bootstrap gives the class alert that should be used on a block element (like a div) in order to turn it into an alert block. Alongside that, you also need to specify a class that would color the alert so that it better conveys the message to the user. So, for a message that would indicate warning, you could use the alert-warning class, alongside the alert one.

The color classes related to alerts are

1.
alert-primary
2.
alert-secondary
3.
alert-success
4.
alert-danger
5.
alert-warning
6.
alert-info
7.
alert-light
8.
alert-dark

Let's see these alerts in action. Add the following HTML fragment exactly before the end of the main content container (Listing 5-5).

<h1>Alerts</h1>

A simple primary alert.

</div>

A simple secondary alert.

</div>

A simple success alert.

</div>

A simple danger alert.

</div>

A simple warning alert.

</div>

A simple info alert.

</div>

A simple light alert.

</div>

A simple dark alert.

</div>

Listing 5-5

HTML Fragment for Alerts Demo

If you save the preceding code and reload your page on your browser, you will see the following at the Alerts part of the page (Figure 5-8).

../images/497763_1_En_5_Chapter/497763_1_En_5_Fig8_HTML.jpg — Figure 5-8
Alerts Demo

Inside your alert, you can have any valid HTML content. For example, you can have a link to another page. Let’s add the following HTML fragment (Listing 5-6).

<strong>London</strong> Read more about London from <a href="https://en.wikipedia.org/wiki/London">Wikipedia London Link</a>.

</div>

Listing 5-6

Add an Alert with HTML Inside

If you reload your HTML page, the new alert will be displayed as follows (Figure 5-9).

../images/497763_1_En_5_Chapter/497763_1_En_5_Fig9_HTML.jpg — Figure 5-9
Alert with Hyperlink Inside

There is a small styling issue here that has to do with the color of the link inside the alert. It just doesn’t look good. Bootstrap recommends that you use the class alert-link on your anchor a. This will provide matching color according to the background of your alert. Let’s add it like in Listing 5-7.

<strong>London</strong> Read more about London from <a class="alert-link" href="https://en.wikipedia.org/wiki/London">Wikipedia London Link</a>.

</div>

Listing 5-7

Use the alert-link Class

If you save the HTML content and reload the page on your browser, you will see the alert with the hyperlink being displayed as in Figure 5-10.

../images/497763_1_En_5_Chapter/497763_1_En_5_Fig10_HTML.jpg — Figure 5-10
Styling Links with alert-link

Progress Bars

Progress bars indicate how much of a given task has been completed and how much remains to be done. See, for example, Figure 5-11.

../images/497763_1_En_5_Chapter/497763_1_En_5_Fig11_HTML.jpg — Figure 5-11
Progress Bar Example

As you can see in Figure 5-11, the progress bar has both a color and a text indication of how much of the process has been completed and how much is left to be done.

Twitter Bootstrap has two classes that are related to this tool, the progress and the progress-bar. Let's see how they should be used by appending the following HTML content to the end of the main content container (Listing 5-8).

<h1>Progress Bars</h1>

<div class="progress-bar" style="width: 60%;">60% Complete</div>

</div>

Listing 5-8

HTML Fragment to Add a Progress Bar

As you can see from the preceding fragment, the progress bars are very easy to build. A div has the class progress; and another div, inside the first, has the class progress-bar. The child div has the text that is displayed to give a textual info about the current progress. This text is not necessary. It might be empty. The important part here is that you correctly set the value for the width attribute of the child div, so that it is that big to indicate the actual progress. A good approach is to use a percentage here, because the percentage will make the child width be a percentage of the width of the parent div. The progress class on the parent div makes sure that the parent div occupies all the available width of the page, whereas the style="width: 60%" on the child div makes sure that the child div occupies exactly 60% of the parent div, hence these two div elements working as one to give the visual effect of the progress bar.

If you save the HTML page and reload it on your browser, you will see the following (Figure 5-12).

../images/497763_1_En_5_Chapter/497763_1_En_5_Fig12_HTML.jpg — Figure 5-12
Standard Progress Bar

Progress Bar Height

If this bar looks short to you, then you can adjust the height of the parent div, the one that has the class progress. Let’s add the style attribute as follows (Listing 5-9).

<div class="progress-bar" style="width: 60%;">60% Complete</div>

</div>

Listing 5-9

Adjust the Height of the Progress Bar

If you save the preceding content and reload the page on your browser, you will see the following (Figure 5-13).

../images/497763_1_En_5_Chapter/497763_1_En_5_Fig13_HTML.jpg — Figure 5-13
Adjust the Height of the Progress Bar

Progress Bar Colors

Besides the plain progress bar that you see in Figure 5-13, you can use the Bootstrap background color utility classes to change the color of the progress bar. These classes are

bg-primary
bg-secondary
bg-success
bg-danger
bg-warning
bg-info
bg-light
bg-dark

You need to set this class on the inner div, alongside the progress-bar class . Let’s change the progress bar demo code in your HTML page to be the following (Listing 5-10).

<h1>Progress Bars</h1>

<div class="progress-bar bg-primary" style="width: 60%;">60% Complete - primary</div>

</div>

<div class="progress-bar bg-secondary" style="width: 60%;">60% Complete - secondary</div>

</div>

<div class="progress-bar bg-success" style="width: 60%;">60% Complete - success</div>

</div>

<div class="progress-bar bg-danger" style="width: 60%;">60% Complete - danger</div>

</div>

<div class="progress-bar bg-warning" style="width: 60%;">60% Complete - warning</div>

</div>

<div class="progress-bar bg-info" style="width: 60%;">60% Complete - info</div>

</div>

<div class="progress-bar bg-light" style="width: 60%;">60% Complete - light</div>

</div>

<div class="progress-bar bg-dark" style="width: 60%;">60% Complete - dark</div>

</div>

Listing 5-10

Progress Bar Demo Code Fragment

Also, make sure that your stylesheets/main.css file has the following class definition (Listing 5-11).

.h-4 {

height: 1.5rem;

}

Listing 5-11

Class h-4 Which Is Used in Listing 5-10

If you save the HTML page and reload it on your browser, you will see the following (Figure 5-14).

../images/497763_1_En_5_Chapter/497763_1_En_5_Fig14_HTML.jpg — Figure 5-14
Progress Bars with Various Colors

Multicolored Progress Bar

Finally, there is another trick that you can do with progress bars. You can use different colors on the same progress bar. You can create an effect like the following (Figure 5-15).

../images/497763_1_En_5_Chapter/497763_1_En_5_Fig15_HTML.jpg — Figure 5-15
Multicolored Progress Bar

This is easily achieved by including more than one child div with the progress-bar class. In order to see this in action, append the following HTML fragment at the end of the main content container (Listing 5-12).

<div class="progress-bar bg-primary" style="width: 30%;">30% primary</div>

<div class="progress-bar bg-success" style="width: 50%;">50% success</div>

<div class="progress-bar bg-warning" style="width: 10%;">10% warning</div>

</div>

Listing 5-12

Multicolored Progress Bar HTML Fragment

As you can see in the preceding code, all three different color divs are inside the parent div. Twitter Bootstrap is clever enough to draw each one of them at the correct position and, given the classes for the color of the progress bars, to draw them with the correct color.

Cards

A card is a container that has some specific structure to create very attractive content, with headers and footers. In Figure 5-16, you can see an example of a card.

../images/497763_1_En_5_Chapter/497763_1_En_5_Fig16_HTML.jpg — Figure 5-16
Card Example

A card usually has an image, a title, and a body. But it can also contain headers and footers.

Three-Card Layout

Let’s try to create the following in your Twitter Bootstrap reference page (Figure 5-17).

../images/497763_1_En_5_Chapter/497763_1_En_5_Fig17_HTML.jpg — Figure 5-17
Cards in Your Twitter Bootstrap Reference Page

You are going to add three cards.
The layout you will choose is responsive:
- For displays up to 767px, it will display one card per row.
- For displays up to 991px, it will display two cards per row.
- For displays with width >=992px, it will display the three cards on the same row.

Listing 5-13 contains the HTML code that you have to add at the bottom of the main container of your page.

<h1>Cards</h1>

<h5 class="card-header">Voted #1</h5>

<h5 class="card-title">Lions</h5>

<h6 class="card-subtitle">Lions Are Amazing</h6>

The lion (Panthera leo) is a large mammal of the Felidae (cat) family. Some large males weigh over 250 kg (550 lb).

Today, wild lions live in sub-Saharan Africa and in Asia. Lions are adapted for life in grasslands and mixed areas

with trees and grass. The relatively small females are fast runners over short distances, and coordinate their hunting of herd animals.

</p>

<a href="https://simple.wikipedia.org/wiki/Lion" class="btn btn-primary">Learn more</a>

</div>

from Wikipedia

</div>

<h5 class="card-header">Voted #2</h5>

<h5 class="card-title">Cheetahs</h5>

<h6 class="card-subtitle">Cheetahs Are Really Fast</h6>

The cheetah (Acinonyx jubatus; /ˈtʃiːtə/) is a large cat of the subfamily Felinae that occurs in North, Southern and East Africa, and a few localities in Iran.

It inhabits a variety of mostly arid habitats like dry forests, scrub forests, and savannahs. The species is IUCN Red Listed as Vulnerable, as it suffered a

substantial decline in its historic range in the 20th century...

</p>

<a href="https://en.wikipedia.org/wiki/Cheetah" class="btn btn-primary">Learn more</a>

</div>

from Wikipedia

</div>

<h5 class="card-header">Voted #3</h5>

<h5 class="card-title">Black Panthers</h5>

<h6 class="card-subtitle">Black Panthers Are Really Scary</h6>

A black panther is the melanistic colour variant of any Panthera, particularly of the leopard (P. pardus) in Asia and Africa, and the jaguar (P. onca) in the Americas.

</p>

<a href="https://en.wikipedia.org/wiki/Black_panther" class="btn btn-primary">Learn more</a>

</div>

from Wikipedia

</div>

Listing 5-13

Three Cards

The Layout

The layout is simple. It is achieved with this div:

The row-cols-* are the ones needed in order to lay out one or two or three columns on the desired breakpoints.

Then each card is being enclosed inside a col div:

All of this is needed so that you can achieve the responsive layout that is required.

The HTML of Each Card

Each card has HTML code similar to the following:

The whole card is enclosed inside a div with the class card.
Each card has a header, which is an h* element with class card-header.
The image is constructed with a standard img element that has the class card-img-top. You have also given a specific height so that all the images of all the cards are displayed on a specific height, but taking all the available width.
Then, the main content of the card, the one that follows the image, is put inside a div with class card-body.
Inside the body, you can generally put any HTML code that you want. We have put
- A card title using an h* and a class card-title.
- A card subtitle using an h* and a class card-subtitle.
- A paragraph with the main text. This has the class card-text.
- A hyperlink with class card-link and some extra classes to make it look like a button.
After the body, we attach a div with the class card-footer. This is used to create the footer of the card.

That was it. If you save the HTML page and load it on your browser, you will see the cards that you have already seen in Figure 5-17.

Carousels

You will close this long Twitter Bootstrap reference page with a really cool feature which is called a carousel. Twitter Bootstrap allows you to create image and video carousels. Carousels are areas of the page that display a series of images (and/or videos) one by one. Each image stays visible for a while (about 5 seconds) before being replaced by the next one.

A typical carousel is composed of the following:

1.
Small indicators usually displayed at the bottom (Figure 5-18)
Figure 5-18
Carousel Indicators
The number of indicators is equal to the number of items in the carousel. In the preceding example, there is a carousel with three items. Hence, you can see three bars. The one that is filled with white color indicates which item is currently displayed. You can also click a bar to quickly display the item at the corresponding position.
2.
Next and previous controls (Figure 5-19)
Figure 5-19
Carousel Next and Previous Controls
Next and previous buttons, like arrows, allow you to navigate, slide, from item to item, in either direction, left or right.
3.
The items (Figure 5-20)
Figure 5-20
Carousel Items and Titles
The carousel has a list of items, each one referencing an image and having a title.

Having said all that, it is easy to identify and understand the following HTML fragment that implements the preceding carousel. Amend that as the last portion of HTML code at the main content container (Listing 5-14).

<h1>Carousels</h1>

</div>

</ol>

<img src="https://tclf.org/sites/default/files/styles/crop_2000x700/public/thumbnails/image/GovernorsIsland_hero_CharlesABirnbaum_2016_0.jpg"

alt="New York Landscape Image"

class="d-block w-100"

style="height: 500px;">

New York

</div>

<img src="https://1920x1080hdwallpapers.com/image/201502/city/338/tokyo-night-landscape-top-view.jpg"

alt="Tokyo Landscape Image"

class="d-block w-100"

style="height: 500px;">

Tokyo

</div>

<img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F1154977741%2F960x0.jpg"

alt="Athens Landscape Image"

class="d-block w-100"

style="height: 500px;">

Athens

</div>

<span class="sr-only">Previous</span>

</a>

</a>

</div>

Listing 5-14

HTML Fragment for the Carousel

The following is a list of items that you, further, need to be aware of when you create a Twitter Bootstrap carousel:

1.
The carousel needs to be enclosed inside a div with classes carousel and slide. If you also want to transition from one slide to the next with a fade effect, then you have to add the class carousel-fade too.
2.
The main div needs to have an id, like the one we have in the preceding HTML fragment (carousel-example-generic). This is necessary because it is then referenced by the indicators and the controls. This requirement becomes more important if you have more than one carousel on the same page.
3.
For the indicators
1. 1.
  They need to be an ordered list (ol) with class carousel-indicators.
2. 2.
  Each item (li) is an indicator, and you need to have as many indicators as the number of your items. If you have three images, then you have to have three indicators, that is, li items.
3. 3.
  Each indicator needs to have a data-target attribute with the id of the carousel. Also, it needs to have a data-slide-to attribute with value equal to the index/position of the item it corresponds to. Note that indexing/positioning starts from 0. That is, the first carousel item is referenced with index 0, then the second with index 1, and so on.
4. 4.
  The first indicator needs to have the class active.
4.
All the carousel items need to be wrapped in a single div with class carousel-inner.
5.
For the carousel items
1. 1.
  Each one is a div that has the class carousel-item.
2. 2.
  The first one needs to have the class active; otherwise, the carousel will not be displayed.
3. 3.
  Note that the images of the carousel need to have classes and styles that take care of their height and display attribute. In particular
  1.
  Classes d-block and w-100: The first (d-block) sets the image display attribute block value. The second (w-100) sets the image width to be 100%. Hence, the image will occupy the whole width available. Note that these are display and sizing Bootstrap utility classes.
  
  2.
  Style that sets the height of all images to be the same. In the example, it is set to 500px.
4. 4.
  Finally, the carousel items can have a div with class carousel-caption that works as the title/caption of the item. Note that you have set two extra display utility classes on the captions:
  1.
  d-none, which hides the captions.
  
  2.
  d-md-block, which displays the captions for medium displays and wider. In other words, you want the captions to be displayed on devices with width >=768px. Otherwise, they will not be displayed.
6.
Below the inner content of the carousel (the div with class carousel-inner), you set the HTML content for controls, which are two anchor a elements:
1. 1.
  The first has the class carousel-control-prev, and it is used to navigate to the previous/left slide.
2. 2.
  The second has the class carousel-control-next, and it is used to navigate to the next/right slide.
3. 3.
  Both have attribute href pointing to the carousel id (#carousel-example-generic).
4. 4.
  Both have a child/content that is a span. This span is used to display the left (for the first control) and the right (for the second control) arrows. For the first control, the span needs to have the class carousel-control-prev-icon, so that it displays the left arrow. For the second control, the span needs to have the class carousel-control-next-icon, so that it displays the right arrow.

Final Checkpoint

For your convenience and double-checking with your work, here is the full content of the page that you have created (Listing 5-15).