Lesson 10 - Bootstrap - List groups
In the previous lesson, Bootstrap - Jumbotron and Badges, we discussed Bootstrap components jumbotron and badges. In today's tutorial about the Bootstrap CSS framework, we're going to focus on lists.
List groups
List groups are lists in which we can put basically any links. They are rendered vertically and are usually used together with the grid system where we render a list of items as one of the websites' layout columns.
We can create the simplest list group, of course, using the
<ul>
list
<ul class="list-group"> <li class="list-group-item active">Events</li> <li class="list-group-item">News</li> <li class="list-group-item">Articles</li> <li class="list-group-item disabled">Auctions</li> </ul>
We assign the .list-group
class to the <ul>
element and then the .list-group-item
class to its
<li>
items. If we want to render one of the items as active,
we assign the .active
class to it. On the contrary, some items can
be rendered as inactive using the .disabled
class.
The result:
Disabled items may, as always, still be opened via keyboard and that's why we should deactivate them e.g. using JavaScript.
Links and buttons
Instead of the <ul>
list, we can also use the
<div>
element and put elements such as <a>
or <button>
in it. We still assign the
.list-group
class to the <div>
and the
.list-group-item
to its items. Next to that, we also assign the
.list-group-item-action
to the items which causes a hover effect.
We don't assign the .btn
class to the links.
<div class="list-group"> <a href="#" class="list-group-item list-group-item-action active">Events</a> <a href="#" class="list-group-item list-group-item-action">News</a> <a href="#" class="list-group-item list-group-item-action">Articles</a> <a href="#" class="list-group-item list-group-item-action disabled">Auctions</a> </div>
The result:
If we used the <button>
element, we could
disable some items using the disabled="disabled"
attribute.
Colors
To color the background of the items, we can use the Bootstrap's standard colors, accessible via these classes:
- .list-group-item-primary - Primary color, blue by default
- .list-group-item-secondary - Secondary color, gray by default
- .list-group-item-success - Green
- .list-group-item-danger - Red
- .list-group-item-warning - Yellow
- .list-group-item-info - Neutral blue
- .list-group-item-light - Light gray
- .list-group-item-dark - Almost black
If we added the .list-group-item-action
class as well, the items
would have a hover effect.
The active item has always the "primary" color set, blue by default,
regardless of the item's background color. As always, except for assigning the
color, we should also add some <span>
with the
.sr-only
class, containing the explanation of highlighting for
users with screen readers.
Badges
It's not a problem to put badges in lists. We
can align them using the flex utilities, by assigning the classes
.d-flex
, .justify-content-between
, and
.align-items-center
. We'll learn more about utilities further in
the course.
Other HTML content
We can put basically anything inside list groups; headings, paragraphs or other elements.
<div class="list-group"> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Modern webdesign A to Z</h5> <small class="text-muted">Jan 4th</small> </div> <p class="mb-1"> A seminar focusing on webdesign and front-end technologies such as HTML 5, CSS 3, Bootstrap, SEO optimization for search engines, domains and webhosting, SASS and LESS and others. </p> </a> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Object-oriented programming</h5> <small class="text-muted">Jan 14th</small> </div> <p class="mb-1"> An object-oriented programming seminar, focusing on classes, encapsulation, inheritance, polymorphism, abstraction, statics, interfaces, exceptions, collections, lambda functions and more. </p> <small class="text-danger">Last places.</small> </a> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Testing and versioning</h5> <small class="text-muted">Jan 24th</small> </div> <p class="mb-1"> This seminar is a job preparation for all of you who can program well but do not know the tools for testing, versioning, and teamwork. </p> </a> </div>
The result:
Tabs
If we add the Bootstrap's JavaScript into the page as well, we can use the list's items as tabs for switching between different contents. The HTML code would look like this:
<div class="row"> <div class="col-4"> <div class="list-group" role="tablist"> <a class="list-group-item list-group-item-action active" id="list-events-list" data-toggle="list" href="#list-events" role="tab" aria-controls="Events">Events</a> <a class="list-group-item list-group-item-action" id="list-news-list" data-toggle="list" href="#list-news" role="tab" aria-controls="News">News</a> <a class="list-group-item list-group-item-action" id="list-articles-list" data-toggle="list" href="#list-articles" role="tab" aria-controls="Articles">Articles</a> <a class="list-group-item list-group-item-action disabled" id="list-auctions-list" data-toggle="list" href="#list-auctions" role="tab" aria-controls="Auctions">Auctions</a> </div> </div> <div class="col-8"> <div class="tab-content"> <div class="tab-pane fade show active" id="list-events" role="tabpanel" aria-labelledby="list-events-list">The contents of the events tab.</div> <div class="tab-pane fade" id="list-news" role="tabpanel" aria-labelledby="list-news-list">The contents of the news tab.</div> <div class="tab-pane fade" id="list-articles" role="tabpanel" aria-labelledby="list-articles-list">The contents of the articles tab.</div> </div> </div> </div>
The source code is getting kinda insane at this point but it doesn't force us
to implement any custom JavaScript which is a good news Use it simply by copying and
editing it. To maintain the correct functionality, all the IDs and
prefixes/suffixes must be kept. Notice the .fade
and
.show
classes used to display an animation when switching between
tabs.
The result looks in a browser like this:
Switching using JavaScript
If we ever wanted to switch between tabs from JavaScript, for example, to
cycle through them in some time interval, we have the tab()
method
available:
$('#id-of-an-lists-item').tab('show');
JavaScript triggers the following events on the tabs (they are in the order they are triggered):
hide.bs.tab
- Is called on the active tab, when a new tab is about to be shownshow.bs.tab
- Is called on the tab which is about to be shown but before it is shownhidden.bs.tab
- Is called on the tab which was previously active, after it was switchedshown.bs.tab
- Is called on the tab which has just shown
We can handle the events like this:
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) { e.target // the new active tab e.relatedTarget // the previously active tab })
In the next lesson, Bootstrap - Cards, we're going to discuss cards. They replace all types of containers of the older Bootstrap versions.