Bootstrap 5 Utilities / Helper Classes

There are numerous utility and helper classes in Bootstrap 5 that can be used to quickly style elements without writing any CSS.

Below are some of the ones that I've found to work in World Anvil.

Note: This article is part of a Bootstrap 5 series.

Borders

To add or remove borders from an element, use the border classes:

Code

[section:border] [/section]
[section:border-0] [/section]
[section:border-top-0] [/section]
[section:border-end-0] [/section]
[section:border-bottom-0] [/section]
[section:border-start-0] [/section]


[section:y border-top] [/section]
[section:y border-end] [/section]
[section:y border-bottom] [/section]
[section:y border-start] [/section]

Border Width

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

Code

[section:border border-1] [/section]
[section:border-2] [/section]
[section:border-3] [/section]
[section:border-4] [/section]
[section:border-5] [/section]

Border Color

Any of the contextual color classes can be used to add color to the border:

Code

[section:border-primary] [/section]
[section:border-secondary] [/section]
[section:border-success] [/section]
[section:border-danger] [/section]
[section:border-warning] [/section][br]
[section:border-info] [/section]
[section:border-light] [/section]
[section:border-dark] [/section]
[section:border-white] [/section]

Border Radius

Add rounded corners to an element with the rounded classes:

Code

[section:rounded] [/section]
[section:rounded-top] [/section]
[section:rounded-end] [/section]
[section:rounded-bottom] [/section]
[section:rounded-start] [/section]
[section:rounded-circle] [/section]
[section:rounded-pill] [/section]
[section:rounded-0] [/section]
[section:rounded-1] [/section]
[section:rounded-2] [/section]
[section:rounded-3] [/section]
[section:rounded-4] [/section]
[section:rounded-5] [/section]

Float and Clearfix

Use the .float-end or .float-start classes to float an element to the right or left, respectively, and the .clearfix class to remove any floating points:

[section:float-start] .float-start [/section] [section:float-end] .float-end [/section]

Responsive Floats

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

[section:float-sm-end].float-sm-end - small screens or wider[/section]
[section:float-md-end].float-md-end - medium screens or wider[/section]
[section:float-lg-end].float-lg-end - large screens or wider[/section]
[section:float-xl-end].float-xl-end - extra large screens or wider[/section]
[section:float-xxl-end].float-xxl-end - XXL screens or wider[/section]
[section:float-none].float-none[/section]

Center Align

The .mx-auto class centers elements and adds margin-left and margin-right: auto

[container:mx-auto] Centered [/container]

Vertical Align

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

baseline top middle bottom text-top text-bottom

Code

[section:align-baseline]baseline[/section]
[section:align-top]top[/section]
[section:align-middle]middle[/section]
[section:align-bottom]bottom[/section]
[section:align-text-top]text-top[/section]
[section:align-text-bottom]text-bottom[/section]

Width

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%

Height

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% Auto Height Max Height 100%

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)
• xxl (≥ 1400px)

Note: 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 & padding-right or margin-left & margin-right
• y - sets both padding-top & padding-bottom or margin-top & 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

Spacing Examples

.m-# / m-*-#	margin on all sides
.mt-# / mt-*-#	margin top
.mb-# / mb-*-#	margin bottom
.ms-# / ms-*-#	margin left
.me-# / me-*-#	margin right
.mx-# / mx-*-#	margin left and right
.my-# / my-*-#	margin top and bottom

.p-# / p-*-#	padding on all sides
.pt-# / pt-*-#	padding top
.pb-# / pb-*-#	padding bottom
.ps-# / ps-*-#	padding left
.pe-# / pe-*-#	padding right
.py-# / py-*-#	padding top and bottom
.px-# / px-*-#	padding left and right

Shadows

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

[container:shadow-none] No shadow [/container]

[container:shadow-sm] Small shadow [/container]

[container:shadow] Default shadow [/container]

[container:shadow-lg] Large shadow [/container]

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:

      <!-- Aspect ratio 1:1 -->
      [container:ratio ratio-1x1] [/container]
      <!-- Aspect ratio 4:3 -->
      [container:ratio ratio-4x3] [/container]
      <!-- Aspect ratio 16:9 -->
      [container:ratio ratio-16x9] [/container]
      <!-- Aspect ratio 21:9 -->
      [container:ratio ratio-21x9] [/container]

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:

    [container:visible]I am visible[/container]
    [container:invisible]I am invisible[/container]

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.

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-primary.bg-gradient

.bg-secondary.bg-gradient

.bg-success.bg-gradient

.bg-danger.bg-gradient

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-warning.bg-gradient

.bg-info.bg-gradient

.bg-light.bg-gradient

.bg-dark.bg-gradient

Text Colors

The classes for text colors are:

.text-primary, .text-secondary, .text-success, .text-danger, .text-warning, .text-info, .text-light, .text-dark, .text-body (default), .text-muted, and .text-white.

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. You can also add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:

.text-primary .text-light .text-secondary .text-dark .text-success .text-body .text-danger .text-muted .text-warning .text-white .text-info .text-black-50 .text-primary .bg-dark .text-white-50 .text-secondary .bg-dark .text-light .bg-dark .text-success .bg-dark .text-muted .bg-dark .text-danger .bg-dark .text-white .bg-dark .text-warning .bg-dark .text-white-50 .bg-dark .text-info .bg-dark

Typography Classes

Bootstrap 5 utilizes a default font-size of 1rem, which typically equates to 16 pixels. Additionally, it employs a line-height value of 1.5 to provide spacing between lines of text. All paragraph [p] elements in Bootstrap 5 have margin-top: 0 and margin-bottom: 1rem (16px by default).

To apply any of the typography classes, use them in any [section] or [container] element.

The [p] element defines a regular paragraph.

Use the .lead class to make a paragraph stand out.

[p]The p element defines a regular paragraph.[/p]
[section:lead]Use the .lead class to make a paragraph stand out.[/section]

.text-lowercase lowers text case.
.text-uppercase uppers text case.
.text-capitalize capitalizes text.

[section:text-lowercase].text-lowercase lowers text case.[/section]
[section:text-uppercase].text-uppercase uppers text case.[/section]
[section:text-capitalize].text-capitalize capitalizes text.[/section]

.text-nowrap prevents text wrapping.

[section:text-nowrap].text-nowrap prevents text wrapping. .text-nowrap prevents text wrapping. .text-nowrap prevents text wrapping.[/section]

.list-inline places all list items on a single line, when used together with the .list-inline-item.

Coffee Tea Milk

[ul]
[container:list-inline]
[section:list-inline-item]Coffee[/section]
[section:list-inline-item]Tea[/section]
[section:list-inline-item]Milk[/section]
[/container]
[/ul]

Use the .text-decoration-none class to remove the underline from a link.

[section:text-decoration-none]Use the .text-decoration-none class to remove the underline from a [url:#]link[/url].[/section]

.text-start left-aligns text.
.text-center centers text.
.text-end right-aligns text.

[section:text-start].text-start left-aligns text.[/section]
[section:text-center].text-center centers text.[/section]
[section:text-end].text-end right-aligns text.[/section]

.list-unstyled removes the default list-style and left margin on list items (immediate children only).

Coffee
Tea
• Black tea
• Green tea
Milk

[ul]
[container:list-unstyled]
[li]Coffee[/li]
[li]Tea
[ul]
[li]Black tea[/li]
[li]Green tea[/li]
[/ul]
[/li]
[li]Milk[/li]
[/container]
[/ul]

---

References

^{Bootstrap 5, www.w3schools.com/bootstrap5.
Material Design for Bootstrap, www.mdbootstrap.com.}