Documentation v8.0.37

Preview Downloads Purchase

Overview

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

Basic Example

This underline comes in 3 parts:

The wrapper
The label
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-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-8pxCSS 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-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-successCSS 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-->