Overview

Underline is a set of grouped Bootstrap5 components to include a modern stylised underline for text or labels.

Basic

This underline comes in 3 parts.
  1. The wrapper
  2. The label
  3. The line
Sample Text 
          <!--begin::Underline-->
<span class="d-inline-block position-relative ms-2">
  <!--begin::Label-->
  <span class="d-inline-block mb-2 fs-2tx fw-bold">
    Sample Text
  </span>
  <!--end::Label-->
  <!--begin::Line-->
  <span class="d-inline-block position-absolute h-8px bottom-0 end-0 start-0 bg-success translate rounded"></span>
  <!--end::Line-->
</span>
<!--end::Underline-->

Sizes

Modify the h-8px CSS class within the Line element to adjust the underline's thickness.
Sample Text Sample Text 
          <!--begin::Underline-->
<span class="d-inline-block position-relative ms-2">
  <!--begin::Label-->
  <span class="d-inline-block mb-2 fs-2tx fw-bold">
    Sample Text
  </span>
  <!--end::Label-->
  <!--begin::Line-->
  <span class="d-inline-block position-absolute h-3px bottom-0 end-0 start-0 bg-success translate rounded"></span>
  <!--end::Line-->
</span>
<!--end::Underline-->

Colors

Modify the .bg-success CSS class within the Line element to change the line's color.
Primary Secondary Success Warning Danger Info 
          <!--begin::Underline-->
<span class="d-flex position-relative">
  <!--begin::Label-->
  <span class="d-inline-block mb-2 fs-2x fw-bold text-gray-900">
    Sample Text
  </span>
  <!--end::Label-->
  <!--begin::Line-->
  <span class="d-inline-block position-absolute h-8px bottom-0 end-0 start-0 bg-primary translate rounded"></span>
  <!--end::Line-->
</span>
<!--end::Underline-->