Learn with us

In Bootstrap 5, the Utilities classes provide a set of helpful CSS classes that can be used to modify and enhance the appearance and behavior of elements. These utility classes are designed to offer quick and easy styling options without the need to write custom CSS. Here are some commonly used utility classes in Bootstrap 5:

1. Text Alignment:

• text-start: Aligns text to the left.
• text-center: Centers text horizontally.
• text-end: Aligns text to the right.
• text-justify: Justifies text.

1. Display:

• d-none: Hides an element.
• d-block: Makes an element a block-level element.
• d-inline: Makes an element an inline-level element.
• d-inline-block: Makes an element an inline-block element.

1. Visibility:

• visible: Makes an element visible.
• invisible: Hides an element while keeping the space it occupies.

1. Sizing:

• w-25, w-50, w-75: Sets the width of an element to 25%, 50%, or 75% respectively.
• h-25, h-50, h-75: Sets the height of an element to 25%, 50%, or 75% respectively.
• mw-100: Sets the maximum width of an element to 100%.
• mh-100: Sets the maximum height of an element to 100%.
• min-vw-100: Sets the minimum viewport width of an element to 100%.
• min-vh-100: Sets the minimum viewport height of an element to 100%.

1. Spacing:

• m-1, m-2, m-3: Adds margin to an element (e.g., m-1 adds margin of 0.25rem).
• p-1, p-2, p-3: Adds padding to an element (e.g., p-1 adds padding of 0.25rem).
• mx-auto: Centers an element horizontally by setting left and right margins to auto.

These are just a few examples of the utility classes available in Bootstrap 5. There are many more utility classes that can be used for various purposes, such as colors, typography, borders, flexbox, and more. You can combine these classes to achieve the desired styling and layout for your elements.

To use utility classes, simply add the desired class name to the HTML element you want to style. The classes can be applied to any HTML element, including divs, headings, paragraphs, buttons, etc.

For a comprehensive list and detailed explanation of the utility classes in Bootstrap 5, refer to the official Bootstrap documentation’s “Utilities” section.

Here are some examples of Bootstrap 5 utility classes along with their usage:

1. Text Alignment:

<p class="text-start">Left-aligned text.</p>
<p class="text-center">Center-aligned text.</p>
<p class="text-end">Right-aligned text.</p>
<p class="text-justify">Justified text.</p>

2. Display:

<div class="d-none">This element is hidden.</div>
<span class="d-block">This element is a block-level element.</span>
<span class="d-inline">This element is an inline-level element.</span>
<span class="d-inline-block">This element is an inline-block element.</span>

3. Visibility:

<span class="visible">This element is visible.</span>
<span class="invisible">This element is invisible.</span>

4. Sizing:

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

5. Spacing:

<div class="m-1">This element has a margin of 0.25rem.</div>
<div class="p-2">This element has a padding of 0.5rem.</div>
<div class="mx-auto">This element is horizontally centered.</div>

These examples demonstrate how you can apply Bootstrap 5 utility classes to various elements to achieve different styling and layout effects. Feel free to combine and experiment with these classes to suit your specific needs.

Remember to include the necessary Bootstrap CSS and JavaScript files in your project to ensure the utility classes work as expected.