bootstrap-4-lists

Day 12: Bootstrap 4 Lists Tutorial and Examples

 

Hello and welcome to the 12th day of Bootstrap 4 😉 Today we will learn about Bootstrap 4 lists and Bootstrap 4 list groups. Besides offering multiple styles for the default list, Bootstrap 4 is introducing a new element: the list group. The Bootstrap 4 list group offers extensive use cases and learning how to add them to your project will help you organise your information and navigation.

Let’s start creating lists!

bootstrap-4-lists-start

Photo credit to Janice for her shot.

The article is organised into the following parts:

Bootstrap 4 Lists

Like we have mentioned in the Day 1: Bootstrap 4 CDN and Starter Template, Bootstrap 4 adds minor changes to the default styling for lists. You don’t need to add any new classes. Here is how basic lists (ordered and unordered) look in Bootstrap 4:

dark



Side note: I will be using lists of books in the examples. You can never get too many recommendations 🙂

Unstyled List

Bootstrap 4 offers the possibility to create lists that don’t have the default list-style or a right margin. To get this simple look you need the .list-unstyled class. The class will only affect the immediate children in the list, so if you have nested lists, you will need to add the .list-unstyled class to the lists inside the list also.

dark


Inline List

If you want all the elements of the list to appear on the same line, horizontally, you need to add the .list-inline class to the <ul> tag and the .list-inline-item class to each <li> item.

dark


Description List

You can create lists that have two parts: on each line you can have a term and a definition. To align these two items horizontally you can use the grid system that we learned about in Bootstrap 4 grid tutorial. If you want to cut a longer piece of text, you can use the .text-truncated utility.

dark


Bootstrap 4 List Groups

Basic Example

List groups are unordered lists of items that have a special look: padding on each item and borders. To use them, you will need to add the .list-group class on the <ul> tag and .list-group-item on each <li> tag. Here is an example:

dark



If you want to remove the outside borders and have the corners right-angled, you can add the .list-group-flush class to the list. This will only keep the top borders top for the list items.

dark


Active Items

To show which element of the list is currently active, you can add the .active class (along with the .list-group-item class). This is how it looks:

dark


Disabled Items

And to disabled a list item, you can use the .disabled class on the .list-group-item element. Its content will be greyed out and will look like this:

dark


If you want to make the elements of the .list-group actionable you have two options. You can use anchors <a> instead of <li> and add the .list-group-item-action class for proper styling. Or you can use <button>s with the same .list-group-item-action class. By using buttons, you can use the disabled attribute. For <a> you need to use the .disabled class since <a> doesn’t support the disabled attribute.

dark


Colouring the List

To colour the background of list items, you can use the list contextual background classes for colour. These are different from the default background colouring classes .bg-[context] and have the format .list-group-item-[context]. Context can be one of the following: light, secondary, dark, primary, info, success, warning, danger.

dark



If your list contains links or buttons, using .list-group-item-[context] classes will also provide styling for hover states.

dark


Adding Content to Bootstrap 4 List Groups

You may need more than a piece of text in your list. Here are some basic use cases that may come in handy.

Adding Icons

If you want to add an icon to the beginning of the list item, you can do so easily by inserting the code for the icon inside the <li> tag. We have used Font Awesome icons in our examples, you can see more about importing and using them in Bootstrap 4 typography tutorial.

dark


Adding Badges

You can add a counter to list items with the help of badges. In order to align the elements in the list item, you need to transform it into a flex container with the .d-flex utility class. In our example we have used the .justify-content-between class to push the badges to the right and the .align-items-center to align the elements vertically.

dark


Adding Images

You can also place images inside the list. In our example, we have added thumbnails for books. We have used the list items as flex containers with the .justify-content-between class for positioning.

dark


Custom Content

You can add most HTML elements we have learned so far inside a list item. Using the Bootstrap 4 flex utilities, you can easily manage the space inside the list item and position the items. Here is a more complex example:

dark


Using JavaScript to Create Panels

If you are using actionable panels and you want the item links to toggle content, you can use the JavaScript we have started learning about in Day 11: Bootstrap 4 Navigation Tutorial and Examples.

To add the panels we need the place them in a container with the class .tab-content and give each panel the .tab-pane class. Their visibility is hidden by default so we need to add the .active class to the one we are going to show on page load. There should be a correlation between the link that is active in the .list-group list and the tab that is active in the .tab-content.

The next step is to tie all the links in the .list-groups to the panels in the .tab-content. What we are trying to accomplish is to show the associated panel for a link when it is pressed and hide the previous panel. We ca do this in two ways: using data attributes or via JavaScript calls. We’ll have examples with both.

Via Data Attributes

If you don’t want to write additional JavaScript, you can tie each link to a panel by adding the data-toggle="list" attribute to every link and setting the anchor to the id of the panel href=”[#id]”.

dark


Via JavaScript Calls

If you would rather write JavaScript, then you don’t need the data-toggle="list" attribute. You still need to have ids for every panel and anchors to them. And you need to add a JavaScript event when you click on one of the links in the list that calls the .tab(‘show’) function. This function shows the associated panel for the link and hides the previous one.

dark


Advanced JavaScript Behaviour

Fade Effect

You can make the panels appear with a fade effect if you add the .fade class to each .tab-panel. In order for the first panel to be visible, it will also need the .show class (besides the .active class). Here is how the fade effect looks:

dark


Methods

.tab(‘show’)

If you use the .tab('show') method when a .list-item is clicked, the .list-item will become active and the associated panel will become visible. In the example above we have added this method for each .item-list. But we can also call this method individually. For example, here is a button that shows the information about the book “Where the Wild Things Are”:

dark


Events

When panels change, there are a series of events that go on. We will present each one, its order and its behaviour. They are the same events that we described for tabs in Day 11: Bootstrap 4 Navigation Tutorial and Examples, so may already be familiar with them.

Order Event Target Description
1 hide.bs.tab the current active tab This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively.
2 show.bs.tab the to-be-shown tab This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
3 hidden.bs.tab on the previous active tab, the same one as for the hide.bs.tab event This event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively.
4 shown.bs.tab on the newly-active just-shown tab, the same one as for the show.bs.tab event This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.

 

If no tab was already active, the hide.bs.tab and hidden.bs.tab events will not be fired.

We have created an example that uses the shown.bs.tab method and color the .list-items you have previously visited to light blue:

dark



This is all for today! I hope you have enjoyed learning about list and list groups. All the code we have used in this article is available on CodePen where you can fork and edit it. Let me know if you run into any kind of trouble when trying your list! Have a nice day and see you again tomorrow 🙂

Further Reading

If you have some time left, here are some useful links that you can read for further reference:

bootstrap-4-lists-end

Photo credit to Juna Wangfor her shot.

 

 

Sharing is caring!

Cristina Conacel

Cristina is a web developer and the owner of BootstrapBay. She likes foxes, clean design, writing blog posts and creating themes that are useful to other developers.