In some cases, you may want to remove the default bullets or numbers that come with ordered or unordered lists. This can be useful when creating a navigation, or perhaps you just want to create a list of items without bullet points. You can do this by using the list-unstyled class on the wrapping list tag. Here's an example of a basic unstyled, unordered list:

<ul class="list-unstyled"> 
  <li>item</li> 
  <li>item</li> 
  <li>item</li> 
  <li>item</li> 
  <li>item</li> 
</ul> 

This will produce a list with no bullet points that will look like this:

We can also nest additional lists inside if we want to create multi-level, indented lists. However, keep in mind that the list-unstyled class will only work on the first level of your list. Any nested additional lists will have their bullets or numbers. The code for this variation would look something like this:

<ul class="list-unstyled"> 
  <li>item 
    <ul> 
      <li>child item</li> 
      <li>child item</li> 
      <li>child item</li> 
      <li>child item</li> 
     </ul> 
  </li> 
  <li>item</li> 
  <li>item</li> 
  <li>item</li> 
  <li>item</li> 
</ul>  

The preceding variation will look like the following output:

Now, if we check out this code sample in a browser, you'll notice you will see the bullet points for the child list that is nested within the parent.

The unstyled list is probably the one you will use the most. The next most useful class is list-inline, which will line up each <li> in a horizontal line. This is very useful for creating navigations or sub-navigations in a website or application. The code for this list is almost the same as the last, but we change the class name to list-inline. We also need to add a class of list-inline-item to each <li> tag. This is a new change for Bootstrap 4, so make sure you don't miss it in the following code:

<ul class="list-inline"> 
  <li class="list-inline-item">item</li> 
  <li class="list-inline-item">item</li> 
  <li class="list-inline-item">item</li> 
  <li class="list-inline-item">item</li> 
  <li class="list-inline-item">item</li> 
</ul> 

As I mentioned, the code is similar to the unstyled list, with a few changes. Here's what it will look like when rendered in the browser:

I think you can see how this would be a lightweight way to set up a horizontal navigation for your project. Let's move onto the last list type, which is a description list.

A description list allows you to create a horizontal display for terms and descriptions. Let's take a look at a basic list's code and then break it down:

<dl class="dl-horizontal"> 
  <dt class="col-sm-3">term 1</dt> 
  <dd class="col-sm-9">this is a description</dd> 
 
  <dt class="col-sm-3">term 2</dt> 
  <dd class="col-sm-9">this is a different description</dd> 
 
  <dt class="col-sm-3 text-truncate">this is a really long term name</dt> 
  <dd class="col-sm-9">this is one last description</dd> 
</dl> 

There are a few things going on here that you need to be aware of, so let me break them all down for you:

Now that I've explained all the code for the description list, let's see what this sample should look like in the browser:

That completes the typography styles that you need to know about in Bootstrap 4. Next, let me teach you what you can do with images in Bootstrap.