Bootstrap 5 Useful Tools

Utilities / Helper Classes

Bootstrap 5 has many utility/helper classes that can quickly set element styles without using any CSS code.

Border

Add or remove borders for elements using the border class:

Examples

<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
<br>
<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 border width:

Examples

<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 color to the border using any context border color class:

Examples

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

Use rounded Add rounded corners to elements of class:

Examples

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

Try It Yourself

Floating and clearing floats

Use .float-end Class to float elements to the right, or use .float-start Float to the left, and use .clearfix Class to clear floats:

Examples

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

Try It Yourself

Responsive floating

Use responsive float classes (.float-*-left|right) where * is:

  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

Examples

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

Try It Yourself

Center aligned

Use .mx-auto Centered elements (add margin-left and margin-right: auto):

Examples

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

Try It Yourself

Width

Use w-* classes (.w-25,.w-50,.w-75,.w-100,.mw-auto,.mw-100）Set the width of the element:

Examples

<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">Automatic width</div>
<div class="mw-100 bg-warning">Maximum width 100%</div>

Try It Yourself

Height

Use h-* classes (.h-25,.h-50,.h-75,.h-100,.mh-auto,.mh-100）Set the height of the element:

Examples

<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">Automatic height</div>
  <div class="mh-100 bg-warning" style="height:500px">Maximum height 100%</div>
</div>

Try It Yourself

Spacing

Bootstrap 5 has a wide range of responsive margin and padding utility classes. They are applicable to all breakpoints:

  • xs (<= 576px)
  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

The usage format of these classes is:{property}{sides}-{size} used for xsas well as {property}{sides}-{breakpoint}-{size} used for sm,md,lg,xl and xxl.

property is one of the following:

  • m - Set margin
  • p - Set padding

sides is one of the following:

  • t - Set margin-top or padding-top
  • b - Set margin-bottom or padding-bottom
  • s - Set margin-left or padding-left
  • e - Set margin-right or padding-right
  • x - Set at the same time padding-left and padding-right or margin-left and margin-right
  • y - Set at the same time padding-top and padding-bottom or margin-top and margin-bottom
  • blank - Set margin on all four sides of the element margin or padding

size is one of the following:

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

Examples

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

Try It Yourself

More spacing examples

.m-# / m-*-# Outer margin on all sides Try it out
.mt-# / mt-*-# Top outer margin Try it out
.mb-# / mb-*-# Bottom outer margin Try it out
.ms-# / ms-*-# Left outer margin Try it out
.me-# / me-*-# Right outer margin Try it out
.mx-# / mx-*-# Left and right inner padding Try it out
.my-# / my-*-# Top and bottom outer margin Try it out
.p-# / p-*-# Inner padding (padding) on all sides Try it out
.pt-# / pt-*-# Top inner padding Try it out
.pb-# / pb-*-# Bottom inner padding Try it out
.ps-# / ps-*-# Left inner padding Try it out
.pe-# / pe-*-# Right inner padding Try it out
.py-# / py-*-# Top and bottom inner padding Try it out
.px-# / px-*-# Left and right inner padding Try it out

You can find more information in our CSS Unit Reference Manual Read more about rem and different size units in the document.

Shadow

Please use shadow- Add shadow to the class of an element:

Examples

<div class="shadow-none p-4 mb-4 bg-light">Without 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 alignment

Please use align- The class changes the alignment of the element (only for inline, inline-block, inline-table, and table cell elements):

Examples

<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 videos or slideshows based on the width of the parent element.

Place .ratio The class corresponds to the aspect ratio you choose .aspect-ratio-* Add to the parent element and add embedded content (video or iframe) within it:

Examples

<!-- Aspect ratio 1:1 -->
<div class="ratio ratio-1x1">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 4:3 -->
<div class="ratio ratio-4x3">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 16:9 -->
<div class="ratio ratio-16x9">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 21:9 -->
<div class="ratio ratio-21x9">
  <iframe src="shanghai.mp4"></iframe>
</div>

Try It Yourself

Visibility

Use .visible or .invisible Classes can control the visibility of elements:

Note:These classes do not change the CSS display value. They only add visibility:visible or visibility:hidden.

Examples

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

Try It Yourself

Close Icon

Use .btn-close Classes can set the style of the close icon. Usually used in alert boxes and modals.

Examples

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

Try It Yourself

Screen Reader

Use .visually-hidden Classes can hide elements on all devices except for screen readers:

Examples

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

Try It Yourself

Color

As described in the 'Color' chapter, the following lists all text and background color classes:

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/usually black)
  • .text-light

Examples

Try It Yourself

Contextual text classes can also be used for links:

Examples

Try It Yourself

You can also use .text-black-50 or .text-white-50 classes to add 50% opacity to black or white text:

Examples

Try It Yourself

Background Color

Classes for background colors are:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Please note that background color will not set text color, so in some cases, you need to use them with .text-* classes together.

Examples

Try It Yourself