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-8pxCSS 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-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-->