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 shown
• show.bs.tab - Is called on the tab which is about to be shown but before it is shown
• hidden.bs.tab - Is called on the tab which was previously active, after it was switched
• shown.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.