How to use the List Group component

This is the last main content component we need to go over for this chapter. Let's get right into it by reviewing the code needed to render a List Group:

<ul class="list-group"> 
  <li class="list-group-item">Item 1</li> 
  <li class="list-group-item">Item 2</li> 
  <li class="list-group-item">Item 3</li> 
  <li class="list-group-item">Item 4</li> 
</ul>

Like the components before it, this one is based off of an unordered list:

  • The <ul> tag needs a class of .list-group on it to start
  • Each <li> needs a class of .list-group-item on it

Once you're done, your List Group should look like this in the browser:

How to use the List Group component

As you can see, with some ...

Get Bootstrap 4 – Responsive Web Design now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial