Bootstrap 5 Utilities
Bootstrap 5 has a lot of utility/helper classes to quickly style elements without using any CSS code.
Borders
Use the border classes to add or remove borders from an element:
Example
<span class="border"></span> <span class="border border-0"></span> <span class="border border-top-0"></span> <span class="border border-end-0"></span> <span class="border border-bottom-0"></span> <span class="border border-start-0"></span>
Border Width
Use .border-1 to .border-5 to change the width of the border:
Border Width
Use .border-1 to .border-5 to change the width of the border:
Example
<span class="border border-1"></span> <span class="border border-2"></span> <span class="border border-3"></span> <span class="border border-4"></span> <span class="border border-5"></span>
Border Color
Add a color to the border with any of the contextual border color classes:
Borders
Use a contextual border color to add a color to the border:
Example
<span class="border border-primary"></span> <span class="border border-secondary"></span> <span class="border border-success"></span> <span class="border border-danger"></span> <span class="border border-warning"></span> <span class="border border-info"></span> <span class="border border-light"></span> <span class="border border-dark"></span> <span class="border border-white"></span>
Border Radius
Add rounded corners to an element with the rounded classes:
Borders
Round the corner of an element with the rounded classes:
Example
<span class="rounded"></span> <span class="rounded-top"></span> <span class="rounded-end"></span> <span class="rounded-bottom"></span> <span class="rounded-start"></span> <span class="rounded-circle"></span> <span class="rounded-pill" style="width:130px"></span> <span class="rounded-0">v/span> <span class="rounded-1"></span> <span class="rounded-2"></span> <span class="rounded-3"></span> <span class="rounded-4"></span> <span class="rounded-5"></span>
Float and Clearfix
Float an element to the right with the .float-endclass or to the left with .float-start, and clear floats with the .clearfix class:
Float
Float an element to the right with the .float-end class or to the left with .float-start, and clear floats with the .clearfix class.
Example
<div class="clearfix"> <span class="float-start">Float left</span> <span class="float-end">Float right</span> </div>
Responsive Floats
Float an element to the left or to the right depending on screen width, with the responsive float classes (.float-*-start|end - where * is sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) or xxl (>=1400px)):
Example
<div class="float-sm-end">Float right on small screens or wider</div> <div class="float-md-end">Float right on medium screens or wider</div> <div class="float-lg-end">Float right on large screens or wider</div> <div class="float-xl-end">Float right on extra large screens or wider</div> <div class="float-xxl-end">Float right on XXL screens or wider</div> <div class="float-none">Float none</div>
Center Align
Center an element with the .mx-auto class (adds margin-left and margin-right: auto):
Example
<div class="mx-auto bg-warning" style="width:150px">Centered</div>
Shadows
Use the shadow- classes to add shadows to an element:
Float
Float an element to the right with the .float-end class or to the left with .float-start, and clear floats with the .clearfix class.
Example
<div class="shadow-none p-4 mb-4 bg-light">No shadow</div> <div class="shadow-sm p-4 mb-4 bg-white">Small shadow<Default shadow</div> <div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>
Close icon
Use the .btn-close class to style a close icon. This is often used for alerts and modals.
Example
<div class="clearfix">
<button type="button" class="close">×</button>
</div>
Background Colors
The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.
Float
Float an element to the right with the .float-end class or to the left with .float-start, and clear floats with the .clearfix class.
Example
<div class="bg-primary p-3"></div> <div class="bg-success p-3"></div> <div class="bg-info p-3"></div> <div class="bg-warning p-3"></div> <div class="bg-danger p-3"></div> <div class="bg-secondary p-3"></div> <div class="bg-dark p-3"></div> <div class="bg-light p-3"></div>You can click on above box to edit the code and run again.
Output
The .bg-color classes above does not work well with text, or atleast then you have to specify a proper .text-color class to get the right text color for each background.
However, you can use the .text-bg-color classes and Bootstrap will automatically handle the appropriate text color for each background color::