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:
- The wrapper
- The label
- The line
<!--begin::Underline-->
<span class="d-inline-block position-relative ms-2">
<!--begin::Label-->
<span class="d-inline-block mb-2 fs-2tx fw-bolder">
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.
<!--begin::Underline-->
<span class="d-inline-block position-relative ms-2">
<!--begin::Label-->
<span class="d-inline-block mb-2 fs-2tx fw-bolder">
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-inline-block position-relative">
<!--begin::Label-->
<span class="d-inline-block mb-2 fs-2x fw-bolder text-dark">
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-->