Labels

Bootstrap 5 Labels component

Responsive Labels built with Bootstrap 5. Badge Labels are for counters, categories & tags. Floating labels refer to forms, and slider labels to the range.

Badge Labels

The valid term for Labels in Bootstrap 5 is now Badges. Make sure to jump straight to the Badges documentation if you are looking for more examples & customization options for the component from the example below.

Use .badge class to provide your visitors with highlighted, new or unread items by adding it to links, text navs, and more.

<h2>Example heading <span class="badge bg-primary">New</span></h2>

Floating Labels for Inputs

The term Label is now mainly used for the label element describing the input fields in form. Make sure to jump straight to the Input fields documentation if you are looking for more examples & customization options for the component from the example below.

<div data-mdb-input-init class="form-outline">
  <input type="text" id="form12" class="form-control" />
  <label class="form-label" for="form12">Example label</label>
</div>

Range slider with labels

Another input with a different type of label is the Range Slider. Make sure to jump straight to the Range slider documentation if you are looking for more examples & customization options for the component from the example below.

<label class="form-label" for="customRange1">Example range</label>
<div data-mdb-range-init class="range">
  <input type="range" class="form-range" id="customRange1" />
</div>

Related resources