The Label component is used to add context to different types of content. A good example would be notifications on an application. You might use a label to indicate how many unread emails there are in an email app. Another would be to insert a warning tag next to an item in a table or list. Like buttons, labels are available in a number of color variations to meet your needs in your project. Let's take a look at the code to render the basic label options:

<span class="label label-default">Default</span> 
<span class="label label-primary">Primary</span> 
<span class="label label-success">Success</span> 
<span class="label label-info">Info</span> 
<span class="label label-warning">Warning</span> 
<span class="label label-danger">Danger</span> 

You'll likely notice some similarities here with the Button component CSS classes. When using a label, you should use the <span> tag as your base for the component. Here are some more important facts when using this component:

Once you've coded that up, it should look like this in your browser:

By default, labels will be rectangular with slightly rounder corners. If you'd like to display them in pill format, you can do so by adding the .label-pill class to the <span> tag. Here's an example to see what I mean:

<span class="label label-pill label-default">Default</span> 
<span class="label label-pill label-primary">Primary</span> 
<span class="label label-pill label-success">Success</span> 
<span class="label label-pill label-info">Info</span> 
<span class="label label-pill label-warning">Warning</span> 
<span class="label label-pill label-danger">Danger</span> 

If you add that class to your labels, they should look like this in the browser:

That concludes the Label component in Bootstrap 4. Next, I'll teach you how to use the Alerts component.