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:

As you can see, with some minimal coding you can render a decent looking component. You may have missed it, but we actually already used this component when we were building our sidebar on the index and blog post page templates. Open up one of them in a text...