Bootstrap 4 List Groups

Creating lists in your projects based on Bootstrap 4 is easy by using the HTML list tags, <a>s, <button>s and built-in Bootstrap CSS classes.

You may create ordered or unordered lists, definition list by using Bootstrap 4 list classes. Keep reading the next section for live demos of basic to more complex lists.

A simple list example using Bootstrap 4

A basic list can be created by using <ul> with <li> tag and using the .list-group and .list-group-item classes as shown below. The list contains items without any links or buttons, no mouse over effect; just the borders around the whole list and between list elements. Have a look:

See online demo and code

The code for this basic list:

Adding active class for standing out a specific item

Suppose, your list contains menu items that point to various pages on your website. You want the current page highlighted in the list menu. For that, simply use the .active class for the <li> along with .list-group-item class. This adds default blue color as shown in the example below:

See online demo and code

The markup:

Want to display some other color than blue for the active item?

One of the ways of changing the default blue color of the active item is to override the .active class of BS4. While you may create your own CSS class and refer it to the <li> for distinguishing it. In the demo below, I overrode the default .active class in the <style> section as follows:

See online demo and code

The following CSS is used after the reference of Bootstrap 4 CSS file:

Basically, the .list-group-item.active class defines the style of active item in BS4.

Creating actionable Bootstrap list groups

For creating the actionable lists e.g. links to other web pages, opening a section with a short description for respective list item etc. you may use the <a> tags with <div> along with list classes of Bootstrap.

See the following example of list group that uses <a> tags with .list-group-item and .list-group-item-action classes while the <div> containing these <a>s is assigned the .list-group class.

See online demo and code

The markup:

You may notice a few things in this list Bootstrap 4:

• It looks the same as we have seen in above examples with <ul>, <li> tags.
• In first three examples, I assigned .list-group class to <ul> and in this example it is assigned to a <div> tag.
• Similarly, the .list-group-item class is assigned to <a>s rather <li> tags.
• The .active class is used in third item just like the above example. You may override this class for changing the CSS properties as you want.
• All the list items have hover effect with change in background color.
• The .disabled class is used in last item to make it look disabled. However, only its appearance is “disabled”, it is still clickable. You may actually disable the link by using jQuery/JavaScript.

A demo of creating list group with buttons

You may also use the <button> tags with list classes in Bootstrap for creating the list groups. In that case, the .disabled class or disabled attribute of button actually disables the list item. See the demo by clicking the link below:

See online demo and code

The markup:

The example of using list contextual classes

The list context classes can be used for coloring the list items. You may use the standard context classes with <ul> and <li> based lists or list created by using <a>s and <button>s.

Have a look at the demo of using contextual classes with <ul> and <li> tags:

See online demo and code

The markup:

The example of Bootstrap inline list

You may use the list-inline class in the <ul> tag along with list-inline-item class in the <li> tags for creating inline lists in Bootstrap 4. It will remove the bullets in list and adds some margin.

See the following demo where I created an inline list by using above mentioned classes along with contextual classes to distinguish list items:

See online demo and code

The markup for an inline list:

Using contextual classes in <a> tags based list

Similarly, these contextual classes can be used in the list groups created by using the <div> and <a> tags:

See online demo and code

The code:

An example of using badges in lists

By using available utility classes in Bootstrap 4, you may create lists with badges. For examples, showing number of emails in the inbox, number of sent items, spam numbers etc.

See this example where I used badges in a list created with <ul> and <li> along with using contextual classes:

See online demo and code

The HTML code:

Using badges in <a> list example

Similarly, badges can be added in the actionable list created by using <div> and <a> tags. For example, we have a list menu with technology tutorials. The badges show number of tutorials for each web technology/framework. See the example online with code:

See online demo and code

The code:

Going beyond headings or links in grouped lists

You may create lists with custom content; so it may contain a header, a short description, a link or any HTML by using flexbox utilities of Bootstrap 4 Framework.

See online demo and code

Using tab component with list group example

You may link the list group items with a piece of content by using the tab plug-in on Bootstrap 4. For that, you need to include the Bootstrap JS file along with jQuery. For more idea, have a look at the demo below:

See online demo and code

The markup for the demo:

If you want displaying the tab content without fading effect then simply remove the .fade class.

In the markup for list items, you need to use the data-toggle=”list” attribute.  The link items and tabbed content pane is linked by IDs. For example, href=”#bootstrap-list” is matched with the id=”bootstrap-list” of tab content.

For making a default link item selected and its tabbed content visible, use the .active class in linked list and .show + .active classes in the tabbed panel. See this example where second linked list item is selected by default with its content visible on page load:

See online demo and code

You might also notice, the tabbed content is displayed without fading effect as .fade class is removed.

Get the complete code from the demo page.