Skip to main content

Utilities in Bootstrap 5

Bootstrap Utilities​

Bootstrap provides a variety of utility classes that you can use to quickly add styles to your HTML elements.

Here are some of the most commonly used Bootstrap 5 utility classes:

Spacing​

You can add margin or padding to any side of an element using the following classes:

  • m-*: Add margin to all sides of an element (* can be replaced with a number from 0 to 5)
  • mx-*: Add margin to the left and right sides of an element (* can be replaced with a number from 0 to 5)
  • my-*: Add margin to the top and bottom sides of an element (* can be replaced with a number from 0 to 5)
  • mt-*: Add margin to the top side of an element (* can be replaced with a number from 0 to 5)
  • mb-*: Add margin to the bottom side of an element (* can be replaced with a number from 0 to 5)
  • ml-*: Add margin to the left side of an element (* can be replaced with a number from 0 to 5)
  • mr-*: Add margin to the right side of an element (* can be replaced with a number from 0 to 5)

As an example:

To add a margin of 3 units to the top and bottom of a <div> element, you can use the my-3 class:

<div class="my-3">
     This is a div element with a margin of 3 units on the top and bottom.
</div>

To add a padding of 4 units to all sides of an <h1> element, you can use the p-4 class:

<h1 class="p-4">
     This is an h1 element with a padding of 4 units on all sides.
</h1>
padding

The padding classes are the same, but with a p-* prefix instead of m-*.

Colors​

You can use these classes to add a background color, text color, border color, or fill color to an element:

  • bg-*: Add a background color to an element (* can be replaced with a color name or a hexadecimal code)
  • text-*: Add a text color to an element (* can be replaced with a color name or a hexadecimal code)
  • border-*: Add a border color to an element (* can be replaced with a color name or a hexadecimal code)
  • fill-*: Add a fill color to an SVG element (* can be replaced with a color name or a hexadecimal code)

As an example:

To add a background color of blue to a <div> element, you can use the bg-blue class:

<div class="bg-blue">This is a div element with a blue background color.</div>

To change the text color of a <p> element to red, you can use the text-danger class:

<p class="text-danger">This is a paragraph element with red text.</p>

Display​

You can use Bootstrap utility classes to control the display of elements. Here are some commonly used classes:

  • d-none: Hide an element
  • d-block: Display an element as a block-level element
  • d-inline: Display an element as an inline-level element
  • d-flex: Display an element as a flex container
  • d-grid: Display an element as a grid container

As an example:

To hide a <div> element, you can use the d-none class:

<div class="d-none">This div element is hidden.</div>

To display a <span> element as a block-level element, you can use the d-block class:

<span class="d-block">
     This span element is displayed as a block-level element.
</span>

Text​

Bootstrap also provides utility classes to style text:

  • text-*: Change the color of the text (* can be replaced with a color name or a hexadecimal code)
  • text-decoration-*: Add a text decoration (such as underline or strikethrough) to the text
  • text-nowrap: Prevent text from wrapping to the next line
  • text-truncate: Truncate text that overflows its container

As an example:

To add an underline to a <h2> element, you can use the text-decoration-underline class:

<h2 class="text-decoration-underline">
     This is an h2 element with an underline.
</h2>

To prevent text from wrapping to the next line in a <p> element, you can use the text-nowrap class:

<p class="text-nowrap">
     This is a paragraph element that does not wrap to the next line.
</p>

Flexbox​

Bootstrap provides a powerful set of utility classes for working with flexbox layout. Here are some commonly used classes:

  • d-flex: Display an element as a flex container
  • flex-direction-*: Set the direction of the flex container ( can be row, row-reverse, column, or column-reverse)
  • flex-wrap-*: Set whether the flex items should wrap when they exceed the container's width ( can be nowrap, wrap, or wrap-reverse)
  • justify-content-*: Set the alignment of the flex items along the main axis ( can be start, end, center, between, or around)
  • align-items-*: Set the alignment of the flex items along the cross axis ( can be start, end, center, stretch, or baseline)

As an example:

<div class="d-flex flex-wrap">
     <div class="flex-fill">Column 1</div>
     <div class="flex-fill">Column 2</div>
</div>

Text alignment​

You can use Bootstrap utility classes to control the text alignment of elements. Here are some commonly used classes:

  • text-start: Set the text alignment to the left
  • text-end: Set the text alignment to the right
  • text-center: Center the text
  • text-justify: Justify the text

As an example:

<h1 class="text-center">Hello, world!</h1>

Height and Width​

Bootstrap also provides utility classes to control the height and width of elements. Here are some commonly used classes:

Height:

  • h-*: Set the height of an element to a specific value in pixels or percentage ( can be replaced with a number from 25 to 100, in increments of 25, or "auto")
  • vh-*: Set the height of an element to a specific percentage of the viewport height ( can be replaced with a number from 25 to 100, in increments of 25)
  • min-vh-*: Set the minimum height of an element to a specific percentage of the viewport height ( can be replaced with a number from 25 to 100, in increments of 25)

Width:

  • w-*: Set the width of an element to a specific value in pixels or percentage ( can be replaced with a number from 25 to 100, in increments of 25, or "auto")
  • vw-*: Set the width of an element to a specific percentage of the viewport width ( can be replaced with a number from 25 to 100, in increments of 25)
  • min-vw-*: Set the minimum width of an element to a specific percentage of the viewport width ( can be replaced with a number from 25 to 100, in increments of 25)

Here are some examples:

<div class="h-50">This element has a height of 50 pixels.</div>
<div class="h-75">This element has a height of 75 pixels.</div>
<div class="h-100">This element has a height of 100 pixels.</div>
<div class="h-50 vh-50">
     This element has a height of 50% of the viewport height.
</div>
<div class="h-75 min-vh-50">
     This element has a minimum height of 50% of the viewport height and a
     height of 75 pixels.
</div>
<div class="w-50">This element has a width of 50 pixels.</div>
<div class="w-75">This element has a width of 75 pixels.</div>
<div class="w-100">This element has a width of 100 pixels.</div>
<div class="w-50 vw-50">
     This element has a width of 50% of the viewport width.
</div>
<div class="w-75 min-vw-50">
     This element has a minimum width of 50% of the viewport width and a width
     of 75 pixels.
</div>