Utilizor
HomeBootstrap 5 BasicsBS5 Utilities

BBS5 Utilities

Learn about Bootstrap 5 utility classes.

BS5 Utilities

Bootstrap 5 consists of dozens of utility classes for simple and fast styling without writing CSS code.

Borders

Use .border, .border-0, .border-top-0, etc. to manage borders.

Use .border-primary, .border-white, etc. to color borders.

Use .rounded, .rounded-circle, .rounded-pill for border radius.

Spacing

Bootstrap 5 offers a wide range of responsive margin and padding utility classes.

The classes are named using the format {property}{sides}-{size}.

  • Property: m (margin), p (padding)
  • Sides: t (top), b (bottom), s (start), e (end), x (left&right), y (top&bottom), blank (all 4 sides)
  • Size: 0, 1, 2, 3, 4, 5, auto

Shadows

Use .shadow-none, .shadow-sm, .shadow, .shadow-lg to add box-shadows.

Examples

Borders

html/css

Styling borders.

<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>
<br>
<span class="border border-primary"></span>
<span class="rounded"></span>
<span class="rounded-circle"></span>

Spacing (Margin and Padding)

html/css

Using spacing utilities.

<div class="p-5 bg-primary text-white">Padding 5</div>
<div class="m-5 bg-success text-white">Margin 5</div>
<div class="mx-auto bg-warning" style="width:150px">Centered with mx-auto</div>

Shadows

html/css

Adding shadows to elements.

<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>

Test Your Knowledge

1. Which utility class adds a large shadow?

2. What does '.mt-3' stand for?