Bootstrap - Utilities

Bootstrap 5 introduces a comprehensive set of utility classes that make it easier to style your web pages without writing custom CSS. These utilities cover a wide range of common CSS properties such as spacing, text alignment, display, positioning, colours, and more. They are designed to be responsive and help you build your layout faster.

This guide covers:

What are Bootstrap 5 Utilities?

Spacing Utilities

Display Utilities

Text and Color Utilities

Position Utilities

Border and Shadow Utilities

Flexbox and Grid Utilities

Visibility and Responsive Utilities

Best Practices

1. What are Bootstrap 5 Utilities?

Bootstrap 5 Utilities are predefined CSS classes that you can use to quickly apply styles to elements. These classes are built on top of the core Bootstrap framework and can be used to adjust margins, paddings, colours, text alignment, and more.

Example

Instead of writing custom CSS like this:

CSS code:

.my-element {

margin-bottom: 20px;

text-align: center;

background-color: #f8f9fa;

}

You can simply use utility classes:

HTML code:

<div class="mb-4 text-center bg-light">Bootstrap Utilities Example</div>

2. Spacing Utilities

Bootstrap 5 provides spacing utilities for margin and padding. The classes are structured as:

m for margin

p for padding

Followed by t (top), b (bottom), s (start), e (end), x (horizontal), y (vertical), or no letter for all sides

Values range from 0 to 5, where 0 is 0 spacing and 5 is 3rem

Examples

HTML code:

<div class="mb-3">Margin Bottom</div>

<div class="pt-5">Padding Top</div>

<div class="mx-auto">Centered Horizontally</div>

<div class="p-4">Padding on All Sides</div>

Explanation

mb-3: Adds margin-bottom of 1rem

pt-5: Adds padding-top of 3rem

mx-auto: Centers the element horizontally

p-4: Adds padding of 1.5rem on all sides

3. Display Utilities

The display utilities help control the display property of an element, such as making it block, inline, or hidden.

Examples

<div class="d-block">Block Element</div>

<div class="d-inline">Inline Element</div>

<div class="d-none d-md-block">Hidden on Mobile, Shown on Desktop</div>

Explanation

d-block: Displays the element as a block

d-inline: Displays the element as inline

d-none d-md-block: Hides the element on smaller screens and shows it on md and larger screens

4. Text and Color Utilities

Bootstrap 5 includes utilities for text alignment, text colors, background colors, and more.

Examples

<p class="text-center text-primary">Centered Blue Text</p>

<p class="text-end text-danger">Right-Aligned Red Text</p>

<div class="bg-warning text-dark p-3">Yellow Background</div>

Explanation

text-center: Centers the text

text-primary: Applies Bootstrap's primary color (usually blue)

bg-warning: Applies a yellow background color

text-dark: Applies a dark text color

5. Position Utilities

These utilities allow you to control the position of elements using classes like position-relative, position-absolute, top-0, and more.

Examples

<div class="position-absolute top-0 end-0">Top Right Corner</div>

</div>

Explanation

position-relative: Sets the parent element to relative positioning

position-absolute: Positions the child element absolutely within its parent

top-0 end-0: Positions the element at the top-right corner

6. Border and Shadow Utilities

Bootstrap 5 includes utilities for adding borders and shadows to your elements.

Examples

<div class="border border-primary p-2">Primary Border</div>

<div class="rounded-circle bg-success p-3">Circle Shape</div>

<div class="shadow-lg p-4">Large Shadow</div>

Explanation

border-primary: Adds a blue border

rounded-circle: Makes the element circular

shadow-lg: Applies a large shadow effect

7. Flexbox and Grid Utilities

Bootstrap 5 has extensive support for Flexbox and Grid utilities to help with layout.

Flexbox Examples

</div>

d-flex: Enables Flexbox layout

justify-content-between: Distributes space between items

Grid Examples

<div class="col-6 col-lg-4">Column 1</div>

<div class="col-6 col-lg-4">Column 2</div>

<div class="col-6 col-lg-4">Column 3</div>

</div>

col-6: Makes the column span 6 out of 12 units on smaller screens

col-lg-4: Adjusts the column to 4 out of 12 units on large screens

8. Visibility and Responsive Utilities

You can show or hide elements based on screen size using Bootstrap 5 visibility utilities.

Examples

<div class="d-none d-sm-block">Visible on Small Screens and Above</div>

<div class="d-block d-md-none">Visible Only on Mobile</div>

d-none d-sm-block: Hides the element on extra-small screens, shows it on small screens and above

d-block d-md-none: Shows the element on mobile screens, hides it on medium screens and above

9. Best Practices

Combine Utilities: Leverage multiple utility classes to achieve complex designs without custom CSS.

Responsive Design: Use responsive utilities (d-md-block, text-lg-start) to create layouts that adapt to different screen sizes.

Avoid Overuse: While utilities are powerful, overusing them can lead to cluttered HTML. Use them judiciously for common styling needs.

Conclusion

Bootstrap 5 Utilities offer a powerful set of tools to speed up your web development process. From spacing and colors to flexbox and responsive visibility, these utility classes help you create clean, responsive layouts without writing custom CSS.