How to use the Bootstrap list-group

Overview

Bootstrap is a popular framework that can help build responsive mobile-first front-end web development.

What is list-group?

list-group is a class that is mostly applied to an unordered list element <ul> and it wraps <li> that contains the items to be listed while trying to make a list of items on a webpage.

Code

Let's look at the code below:

Explanation

• Line 13: We use the <ul> to wrap all the <li> The <ul>has the Bootstrap class of list-group which applies the right design to the entire list. Features like the width, background color, and so on can be applied to the <ul>element.

• Line 14: We use the <li> HTML element with the Bootstrap class of list-group-item . This class is used to apply Bootstrap styling to the item in the list. We can copy and paste it for as many items we want to add to the list.

Note: When using Bootstrap, please don't forget to always place the link to the CSS file in the head HTML element. And the link to the Bootstrap script just before the </body>.