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">«</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">»</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">×</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">×</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.