Menu

Bootstrap 5 Utilities


Previous


Next

Utilities / Helper Classes

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

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
<style>
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #f9f9f9;
}
</style>
</head>
<body>

<div>
<h2>Borders</h2>
<p>Use the border classes to add or remove borders from an element:</p>

<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<br>

<span></span>
<span></span>
<span></span>
<span></span>
</div>

</body>
</html>

Border Width

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

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
<style>
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #f9f9f9;
}
</style>
</head>
<body>

<div>
<h2>Border Width</h2>
<p>Use .border-1 to .border-5 to change the width of the border:</p>

<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

</body>
</html>

Border Color

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

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
<style>
.border {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
}
</style>
</head>
<body>

<div>
<h2>Borders</h2>
<p>Use a contextual border color to add a color to the border:</p>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

</body>
</html>

Border Radius

Add rounded corners to an element with the rounded classes:

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
<style>
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #555;
}
</style>
</head>
<body>

<div>
<h2>Borders</h2>
<p>Round the corner of an element with the rounded classes:</p>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span style=”width:130px”></span>
<br>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

</body>
</html>

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:

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h2>Float</h2>
<p>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.</p>
<div>
<span>Float left</span>
<span>Float right</span>
</div>
</div>

</body>
</html>

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

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h2>Responsive Floats</h2>
<p>Float an element to the left or to the right depending on screen width, with the responsive float classes .float-*-left|right (where * is sm, md, lg, xl or xxl).</p>
<p>Resize the browser window to see the effect.</p>
<div>
<div>Float right on small screens or wider</div><br>
<div>Float right on medium screens or wider</div><br>
<div>Float right on large screens or wider</div><br>
<div>Float right on extra large screens or wider</div><br>
<div>Float right on XXL screens or wider</div><br>
<div>Float none</div>
</div>
</div>

</body>
</html>

Center Align

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

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h1>Horizontal Centering</h1>
<p>Center an element with the .mx-auto class:</p>
<div style=”width:150px”>Centered</div>
</div>

</body>
</html>

Width

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

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h1>Width Utilities</h1>
<p>Set the width of an element with the w-* classes:</p>
<div>Width 25%</div>
<div>Width 50%</div>
<div>Width 75%</div>
<div>Width 100%</div>
<div>Auto Width</div>
<div>Max Width 100%</div>
</div>

</body>
</html>

Height

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

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h1>Height Utilities</h1>
<p>Set the height of an element with the w-* classes:</p>
<div style=”height:200px;background-color:#ddd”>
<div>Height 25%</div>
<div>Height 50%</div>
<div>Height 75%</div>
<div>Height 100%</div>
<div>Auto Height</div>
<div style=”height:500px”>Max Height 100%</div>
</div>
</div>

</body>
</html>

Spacing

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

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h1>Spacing Utilities</h1>
<p>Set the spacing of an element with the {property}{sides}-{breakpoint}-{size} classes. Omit breakpoint if you want the padding or margin to work on all screen sizes.</p>
<div>I only have a top padding (1.5rem)</div>
<div>I have a padding on all sides (3rem)</div>
<div>I have a margin on all sides (3rem) and a bottom padding (3rem)</div>
</div>

</body>
</html>

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

Shadows

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

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h1>Shadows</h1>
<p>Use the shadow- classes to to add shadows to an element:</p>
<div>No shadow</div>
<div>Small shadow</div>
<div>Default shadow</div>
<div>Large shadow</div>
</div>

</body>
</html>

Vertical Align

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

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h1>Vertical Align</h1>
<p>Change the alignment of elements with the align classes (only works on inline, inline-block, inline-table and table cell elements):</p>
<span>baseline</span>
<span>top</span>
<span>middle</span>
<span>bottom</span>
<span>text-top</span>
<span>text-bottom</span>
</div>

</body>
</html>

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:

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h2>Aspect Ratio</h2>
<p>Create a responsive video and scale it nicely to the parent element.</p>

<h2>Aspect ratio 1:1</h2>
<div>
<iframe src=”https://www.youtube.com/embed/tgbNymZ7vqY”></iframe>
</div>
<br>

<h2>Aspect ratio 4:3</h2>
<div>
<iframe src=”https://www.youtube.com/embed/tgbNymZ7vqY”></iframe>
</div>
<br>

<h2>Aspect ratio 16:9</h2>
<div>
<iframe src=”https://www.youtube.com/embed/tgbNymZ7vqY”></iframe>
</div>
<br>

<h2>Aspect ratio 21:9</h2>
<div>
<iframe src=”https://www.youtube.com/embed/tgbNymZ7vqY”></iframe>
</div>
</div>

</body>
</html>

Visibility

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:

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h1>Visibility</h1>
<p>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 to an element:</p>
<div>I am visible</div>
<div>I am invisible</div>
</div>

</body>
</html>

Close icon

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

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h1>Close Icon</h1>
<p>Use the .close class to style a close icon. This is often used for alerts and modals. Note that we use the times; symbol to create the actual icon (a better looking “x”). Also note that it is right-aligned by default:</p>
<div>
<button type=”button”>&times;</button>
</div>
</div>

</body>
</html>

Screenreaders

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

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h2>Screen readers</h2>
<p>Use the .sr-only class to hide an element on all devices, except screen readers:</p>
<span>I will be hidden on all screens except for screen readers.</span>
</div>

</body>
</html>

Colors

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:

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h2>Contextual Colors</h2>
<p>Use the contextual classes to provide “meaning through colors”:</p>
<p>This text is muted.</p>
<p>This text is important.</p>
<p>This text indicates success.</p>
<p>This text represents some information.</p>
<p>This text represents a warning.</p>
<p>This text represents danger.</p>
<p>Secondary text.</p>
<p>This text is dark grey.</p>
<p>Default body color (often black).</p>
<p>This text is light grey (on white background).</p>
<p>This text is white (on white background).</p>
</div>

</body>
</html>

Contextual text classes can also be used on links:

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h2>Contextual Link Colors</h2>
<a href=”#”>Muted link.</a>
<a href=”#”>Primary link.</a>
<a href=”#”>Success link.</a>
<a href=”#”>Info link.</a>
<a href=”#”>Warning link.</a>
<a href=”#”>Danger link.</a>
<a href=”#”>Secondary link.</a>
<a href=”#”>Dark grey link.</a>
<a href=”#”>Body/black link.</a>
<a href=”#”>Light grey link.</a>
</div>

</body>
</html>

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

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h2>Opacity Text Colors</h2>
<p>Add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:</p>
<p>Black text with 50% opacity on white background</p>
<p>White text with 50% opacity on black background</p>
</div>

</body>
</html>

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.

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h2>Contextual Backgrounds</h2>
<p>Use the contextual background classes to provide “meaning through colors”.</p>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

</body>
</html>

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:

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>

<div>
<h2>Background Color with Contrasting Text Color</h2>
<p>This text is important.</p>
<p>This text indicates success.</p>
<p>This text represents some information.</p>
<p>This text represents a warning.</p>
<p>This text represents danger.</p>
<p>Secondary background color.</p>
<p>Dark grey background color.</p>
<p>Light grey background color.</p>
</div>

</body>
</html>


Previous


Next

Scroll to Top