Bootstrap 5 Utilities (2023)

❮ Previous Next ❯

Utilities / Helper Classes

Bootstrap 5 has a lot of utility/helper classes to quickly style elements without using any CSS code.


Use the border classes to add or remove borders from an element:


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

<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

Try it Yourself »

Border Width

Use .border-1 to .border-5 to change the width of the border:


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

Try it Yourself »

Border Color

Add a color to the border with any of the contextual border color classes:


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

Try it Yourself »

Border Radius

Add rounded corners to an element with the rounded classes:


<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"></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>

Try it Yourself »

Float and Clearfix

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:


Float leftFloat right

<div class="clearfix">
<span class="float-start">Float left</span>
<span class="float-end">Float right</span>

Try it Yourself »

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)):


Float right on small screens or wider

Float right on medium screens or wider

Float right on large screens or wider

Float right on extra large screens or wider

Float right on XXL screens or wider

Float none

(Video) Bootstrap 5 Crash Course Tutorial #5 - Utility Classes

<div class="float-sm-end">Float right on small screens or wider</div><br>
<div class="float-md-end">Float right on medium screens or wider</div><br>
<div class="float-lg-end">Float right on large screens or wider</div><br>
<div class="float-xl-end">Float right on extra large screens or wider</div><br>
<div class="float-xxl-end">Float right on XXL screens or wider</div><br>
<div class="float-none">Float none</div>

Try it Yourself »

Center Align

Center an element with the .mx-auto class (adds margin-left and margin-right: auto):



<div class="mx-auto bg-warning" style="width:150px">Centered</div>

Try it Yourself »


Set the width of an element with the w-* classes (.w-25, .w-50, .w-75, .w-100, .mw-auto, .mw-100):


Width 25%

Width 50%

Width 75%

Width 100%

Auto Width

Max Width 100%

<div class="w-25 bg-warning">Width 25%</div>
<div class="w-50 bg-warning">Width 50%</div>
<div class="w-75 bg-warning">Width 75%</div>
<div class="w-100 bg-warning">Width 100%</div>
<div class="w-auto bg-warning">Auto Width</div>
<div class="mw-100 bg-warning">Max Width 100%</div>

Try it Yourself »


Set the height of an element with the h-* classes (.h-25, .h-50, .h-75, .h-100, .mh-auto, .mh-100):


Height 25%

Height 50%

Height 75%

Height 100%

(Video) Customize Bootstrap 5 Utilities API - The Power Of Customizing

Auto Height

Max Height 100%

<div style="height:200px;background-color:#ddd">
<div class="h-25 bg-warning">Height 25%</div>
<div class="h-50 bg-warning">Height 50%</div>
<div class="h-75 bg-warning">Height 75%</div>
<div class="h-100 bg-warning">Height 100%</div>
<div class="h-auto bg-warning">Auto Height</div>
<div class="mh-100 bg-warning" style="height:500px">Max Height 100%</div>

Try it Yourself »


Bootstrap 5 has a wide range of responsive margin and padding utility classes. They work for all breakpoints: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) or xxl (>=1400px)):

The classes are used in the format: {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl and xxl.

Where property is one of:

  • m - sets margin
  • p - sets padding

Where sides is one of:

  • t - sets margin-top or padding-top
  • b - sets margin-bottom or padding-bottom
  • s - sets margin-left or padding-left
  • e - sets margin-right or padding-right
  • x - sets both padding-left and padding-right or margin-left and margin-right
  • y - sets both padding-top and padding-bottom or margin-top and margin-bottom
  • blank - sets a margin or padding on all 4 sides of the element

Where size is one of:

  • 0 - sets margin or padding to 0
  • 1 - sets margin or padding to .25rem
  • 2 - sets margin or padding to .5rem
  • 3 - sets margin or padding to 1rem
  • 4 - sets margin or padding to 1.5rem
  • 5 - sets margin or padding to 3rem
  • auto - sets margin to auto


I only have a top padding (1.5rem)

I have a padding on all sides (3rem)

I have a margin on all sides (3rem) and a bottom padding (3rem)

<div class="pt-4 bg-warning">I only have a top padding (1.5rem)</div>
<div class="p-5 bg-success">I have a padding on all sides (3rem)</div>
<div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem) and a bottom padding (3rem)</div>

Try it Yourself »

More Spacing Examples

.m-# / m-*-# margin on all sides Try it
.mt-# / mt-*-# margin top Try it
.mb-# / mb-*-# margin bottom Try it
.ms-# / ms-*-# margin left Try it
.me-# / me-*-# margin right Try it
.mx-# / mx-*-# margin left and right Try it
.my-# / my-*-# margin top and bottom Try it
.p-# / p-*-# padding on all sides Try it
.pt-# / pt-*-# padding top Try it
.pb-# / pb-*-# padding bottom Try it
.ps-# / ps-*-# padding left Try it
.pe-# / pe-*-# padding right Try it
.py-# / py-*-# padding top and bottom Try it
.px-# / px-*-# padding left and right Try it

You can read more about rem and different size units in our CSS Units Reference.


Use the shadow- classes to add shadows to an element:


No shadow

Small shadow

Default shadow

Large shadow

<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</div>
<div class="shadow p-4 mb-4 bg-white">Default shadow</div>
<div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>

Try it Yourself »

Vertical Align

Use the align- classes to change the alignment of elements (only works on inline, inline-block, inline-table and table cell elements):



<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

Try it Yourself »

Aspect Ratio

Create responsive video or slideshows based on the width of the parent.

Add the .ratio class together with an aspect ratio of your choice .ratio-* to a parent element, and add the embed (video or iframe) inside of it:

(Video) Bootstrap 5 Utilities | New Utility API !!


<!-- Aspect ratio 1:1 -->
<div class="ratio ratio-1x1">
<iframe src=""></iframe>

<!-- Aspect ratio 4:3 -->
<div class="ratio ratio-4x3">
<iframe src=""></iframe>

<!-- Aspect ratio 16:9 -->
<div class="ratio ratio-16x9">
<iframe src=""></iframe>

<!-- Aspect ratio 21:9 -->
<div class="ratio ratio-21x9">
<iframe src=""></iframe>

Try it Yourself »


Use the .visible or .invisible classes to control the visibility of elements. Note: These classes do not change the CSS display value. They only add visibility:visible or visibility:hidden:


I am visible

I am invisible

<div class="visible">I am visible</div>
<div class="invisible">I am invisible</div>

Try it Yourself »

Close icon

Use the .btn-close class to style a close icon. This is often used for alerts and modals.


<button type="button" class="btn-close"></button>

Try it Yourself »


Use the .visually-hidden class to hide an element on all devices, except screen readers:


<span class="visually-hidden">I will be hidden on all screens except for screen readers.</span>

Try it Yourself »


As described in the Colors chapter, here is a list of all text and background color classes:

The classes for text colors are: .text-muted, .text-primary, .text-success, .text-info,.text-warning, .text-danger, .text-secondary, .text-white,.text-dark, .text-body (default body color/often black) and .text-light:


This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary text.

(Video) What are Utility Classes (Spacing) | Padding & Margin Classes in Bootstrap 5 Tutorial

Dark grey text.

Body text.

Light grey text.

Try it Yourself »

Contextual text classes can also be used on links:


Muted link.Primary link.Success link.Info link.Warning link.Danger link.Secondary link.Dark grey link.Body/black link.Light grey link.

Try it Yourself »

You can also add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:


Black text with 50% opacity on white background

White text with 50% opacity on black background

Try it Yourself »

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.


Try it Yourself »

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:


This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary background color.

Dark grey background color.

Light grey background color.

Try it Yourself »

❮ Previous Next ❯

(Video) Bootstrap 5 Crash Course


What is utilities in Bootstrap 5? ›

Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options.

What is Bootstrap display utilities? ›

1- Bootstrap Display Utility

Display Utility is part of Bootstrap. It builds a system of classes that helps you control the display (or hiding) of elements. Controls how the elements will display and react to the size changes of parent element.

Does Bootstrap have utility classes? ›

For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.

What is Bootstrap responsive utilities? ›

The responsive utility classes help to build responsive web designs easily. You can hide or display the content of your choice on the web page. You have to define the size of the screen for which you are hiding or displaying the content.


1. Bootstrap CSS Framework - Full Course for Beginners
2. Bootstrap 5 Simple Responsive Portfolio Website - Using Utilities API
(Daily Tuition)
3. Bootstrap 5: Utilities - Position
4. Bootstrap vs Tailwind CSS - Which one to choose?
(Creative Tim Tutorials)
5. How exactly does Bootstrap Flex Work? // A Bootstrap 5 Responsive Flex Guide // Part 1
(A Designer Who Codes)
6. Margin Utilities - Bootstrap 5 Alpha Responsive Web Development and Design
(Sonar Systems)


Top Articles
Latest Posts
Article information

Author: Edmund Hettinger DC

Last Updated: 08/11/2023

Views: 5675

Rating: 4.8 / 5 (58 voted)

Reviews: 81% of readers found this page helpful

Author information

Name: Edmund Hettinger DC

Birthday: 1994-08-17

Address: 2033 Gerhold Pine, Port Jocelyn, VA 12101-5654

Phone: +8524399971620

Job: Central Manufacturing Supervisor

Hobby: Jogging, Metalworking, Tai chi, Shopping, Puzzles, Rock climbing, Crocheting

Introduction: My name is Edmund Hettinger DC, I am a adventurous, colorful, gifted, determined, precious, open, colorful person who loves writing and wants to share my knowledge and understanding with you.