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

Comments

Please Login in order to comment!

Eternal Sage kitoypoy

Jun 8, 2023 13:21 by Chris L

I love this so much! I have a testing page where I've done a few of these things, but you've gone above and beyond! What a great resource for Bootstrap!

Learn about the World of Wizard's Peak.

Sage 1337spectra

Jun 8, 2023 17:15 by Gabrielle Decker

These utility classes are probably the #1 thing my designs rely on. And because i rely on them so much, if I find BS5 doesn't have a specific class I need, I make them! For instance, I've extended the margin/padding classes: .mb-10{margin-bottom:8rem!important} .mt-10{margin-top:8rem!important} .ms-10{margin-left:8rem!important} .me-10{margin-right:8rem!important} .my-10{margin-top:8rem!important;margin-bottom:8rem!important} .pb-10{padding-bottom:8rem!important} .pt-10{padding-top:8rem!important} .py-10{padding-bottom:8rem!important;padding-top:8rem!important} ... etc.

Exalted Councilor of the Inner Sanctum Graylion

Jun 19, 2023 10:03

The like button really is not strong enough to convey my love of this article and series. There are so many great tips here and what's even better is you have presented them through the lense of how to use them in World Anvil. Thank you.

Graylion - Nexus Roleplaying
~~not Ruleplaying~~
~~not Rollplaying~~

Jun 19, 2023 12:24 by Gabrielle Decker

I have a whole lot more to add, but there's so much that it's a bit overwhelming O.o Lol but I'm super happy that they're proving helpful for people, and it means a lot to me that you love it! Def keep an eye out for update notifications!