Bootstrap 4 labels

Bootstrap 4 labels

Learn how to work with Bootstrap 4 labels

Bootstrap 4 Basic Label

Bootstrap 4 Labels

Labels are created using class .label, also the class label-* is used to add context.

The label adjusts to the size of the parent element automatically using relative font sizing.

<!-- class="label" -->
<h1>Twitter <span class="label label-default">Bootstrap</span></h1>
<h2>Twitter <span class="label label-primary">Bootstrap</span></h2>
<h3>Twitter <span class="label label-success">Bootstrap</span></h3>
<h4>Twitter <span class="label label-info">Bootstrap</span></h4>
<h5>Twitter <span class="label label-warning">Bootstrap</span></h5>
<h6>Twitter <span class="label label-danger">Bootstrap</span></h6>

 

Boostatrap 4 Labels Context Variations

Bootstrap 4 Labels

To add context to labels use class .label-*, the appearance of the label denotes the context of the labels.

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

 

Bootstrap 4  Pill Labels

Bootstrap 4

To Create rounded labels use class .label-pill.

<span class="label label-pill label-default">Default</span> <!-- class="label-pill" -->
<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> 

 

Thank You for visit Webriceter.com Design & Develop by Abdur Rahaman