Lesson 17 - Bootstrap - Pagination, Alerts, and Breadcrumbs

In the previous lesson, Bootstrap - Navigation bar, we finished the topic of navigation. Today, we're going to focus on several simple components which are Pagination, Alerts, and Breadcrumb. We're continuing the course about the popular Bootstrap CSS framework.

Pagination

We can't avoid pagination when displaying a large amount of data. First, it's unpleasant for the user to read thousands of entries on a single page and also the server's performance could also be a problem when displaying dozens or hundreds of thousands of entries on a single page. A nice alternative of the pagination is to load more entries using AJAX when scrolling the page down. This is used mainly on social networks and ICT.social has a similar mechanism too on its homepage. This solution is, however, not very efficient if we want to get to certain part of the data, e.g. to the half or the end. The pagination is ideal for this, we can select to which page we want to jump while being able to see the total number of pages. This way, we have much better overview about the data.

We use a list to represent a pagination, specifically the <ul> element, as well as we use it for most of the navigation components in Bootstrap. For better semantics, we put the whole list into the <nav> element since a pagination is basically a navigation. First, let's have a look at the source code of the pagination component and we'll describe it right away.

<nav aria-label="Pagination">
    <ul class="pagination">
        <li class="page-item disabled">
            <span aria-hidden="true" class="page-link">&laquo;</span>
        </li>
        <li class="page-item active"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item">
            <a class="page-link" href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
            </a>
        </li>
    </ul>
</nav>

We have some "aria" attributes for screen readers in the code again. We assigned the .pagination class to the list. We assign the .page-item class to the individual list items. The first item is a link to the previous page which has a left double arrow icon directing to the left («, the « entity). Notice that there's no link inside; it's for us to see how to solve the situation when we're on the first page and therefore we can't go back to the previous page. Making the item gray can be achieved by the .disabled class. The other list items contain links to the individual pages, we assign the .page-link class to them. Additionally, we assign the .active class to the <li> element of the active page, the page 1 in this case. The last link is already completed. Of course, on the server-side, we generate the correct links to the specific pages to the href attribute.

The result in the browser:

Theoretically, we could place a link in the first element as well, thanks to the disabled class it wouldn't be possible to click on it. Practically, the link could still be selected using the tab key and that's why we shouldn't place it there at all or assign the tabindex="-1" attribute to it.

Sizes

We can display the pagination in 3 sizes, similarly to most of the Boostrap components. Next to .pagination, we can assign the following classes to the <ul> element:

• .pagination-lg for a larger size
• For the standard size, we just leave it with the .pagination class
• .pagination-sm for a smaller size

Alignment

For pagination alignment, we use flexbox utilities. If we wanted to center it, we just assign the justify-content-center class to the <ul> element. In case of alignment to the right, it would be the .justify-content-end class.

Alerts

HTTP is a stateless protocol and web applications are often used just by browsing through hyperlinks. Since the user doesn't communicate with a classic desktop application, on the web, they can be sometimes uncertain whether the request has really been correctly sent through all the visited pages or they can only wonder why some unexpected behavior occurred. We surely don't want to display pop-ups to the user since the web is controlled in a different way than desktop apps, web pages are opened in tabs, the content is scrollable. For notification purposes, toast notifications went popular on websites. They often pop out similarly to a toast in a toaster, hence toast notifications. They are sometimes also called flash messages. Bootstrap implements these messages as alerts and they come with predefined styles and even some JavaScript utilities.

We create an alert using the <div> element with the .alert class. Depending on the notification type, we can also assign one of the following classes:

• .alert-primary - The primary color, blue by default
• .alert-secondary - The secondary color, gray by default
• .alert-success - Green for successful messages.
• .alert-danger - Red for errors.
• .alert-warning - Yellow for highlighting important messages.
• .alert-info - Neutral blue for neutral messages
• .alert-light - Light gray
• .alert-dark - Almost black

The source code of such an alert could look like this:

<div class="alert alert-success" role="alert">
    The message has been sent successfully.
</div>

The role attribute is used by screen readers. Except for the color, we should ideally add text for screen readers hidden using the .sr-only class as well, explaining the type of the message.

A page using alerts can look like this:

Link color

We often place links inside alerts. If you assign the .alert-link class to them they'll color nicely.

Other HTML content

Since alerts are block elements, next to text and links, we can also place headings, paragraphs, dividers, and other HTML content inside them.

Closeable alerts

Bootstrap cooperates with jQuery. If we load Bootstrap's JavaScript (available at http://getbootstrap.com/) and assign the .alert-dismissible class to our alerts, the user would be then able to close them using the cross icon at the top-right corner. We must add the button to the HTML code as the <button> element with the .close class and the data-dismiss="alert" data attribute. If we assign the .fade and .show classes as well, closing the messages will be animated.

The source code of a closeable message with a link and other HTML content could look something like this:

<div class="alert alert-success alert-dismissible fade show" role="alert">
    <p><strong>Signing up has been successful</strong>, a confirmation mail should arrive at your email address.</p>
    <hr>
    <p>You are just one step away from your new IT knowledge and a great job!</p>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

The attributes with the aria- prefix are, again, for screen readers.

Closing the message will cause the element to be removed completely from the page. You can attach a callback to closing the alert in JavaScript, you can e.g. save it as a cookie so that the message won't show next time:

$('#alert-ad').on('closed.bs.alert', function () {
    // ... the code for setting up the cookie
});

Close utility

The closing button can be used for any other purposes, not just for alerts. We can create it like this:

<button type="button" class="close" aria-label="Close">
    <span aria-hidden="true">&times;</span>
</button>

We have to handle the closing in JavaScript manually.

Breadcrumb

A breadcrumb navigation is surely an important control of larger websites. You have certainly seen it somewhere, we have it here on ICT.social as well, indicating which section you're currently in and which sections are above. A bit higher you should see something like Home -> HTML and CSS -> Bootstrap. A random user from the Internet can, when visiting this website from Google, notice that ICT.social isn't only about Bootstrap but that this is a course and maybe they would click on the HTML and CSS section and would start to be interested in other webdesign courses. Or they would click on the home icon and would find out that we teach all other IT technologies. You surely want your users to be motivated to explore your website this way.

The breadcrumb navigation works similarly to Hansel and Gretel, leaving a trail of crumbs so they'd be able to return back home from the dark forest. The user which finds himself on some deeply nested page would perhaps want to come back a category above as well, but the "Back" button wouldn't be useful in this situation every time. If you don't offer this functionality to the user, it's possible that they leave leave the page frustrated rather than "investigate" how to get to some particular section. The breadcrumb navigation is rather harmful on very simple informational websites since it complicates the website's design and has no value-added if used with shallow categories.

You surely aren't surprised that we implement the navigation into the page as a styled list. Because the order of the is important, the most semantically correct solution would be to use the <ol> element.

<nav aria-label="Breadcrumb navigation" role="navigation">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">HTML and CSS</a></li>
        <li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
    </ol>
</nav>

The aria-label attribute is, again, an additional description for screen readers.

The result in the browser:

In the next lesson, Bootstrap - Modal dialogs, we'll focus on modal dialog boxes.