# Utility Classes

Adjust spacing, color, text, borders and flex layout with Bootstrap's small, single-purpose utility classes, without writing CSS.

Apprentice · CSS · HTML · Web Development · Updated November 3, 2026

## After this lesson you can

- Style elements with Bootstrap's utility classes for spacing, color, text and flex layout

## Key takeaways

- A spacing class is property, side and size: `mt-4` is margin-top, size 4, and `px-4` is padding on the left and right.
- Spacing sizes run from `0` to `5`, or `auto`: `mx-auto` centers an element that has a set width, such as `width: 300px`, with automatic side margins.
- Text and background colors use the theme's names, such as `text-primary` and `bg-dark`. Check that the text stays easy to read on its background.
- `d-flex` makes a flex container, and classes such as `justify-content-between` and `align-items-center` arrange its children.
- Display classes take breakpoints: `d-none d-md-block` hides an element on small screens and shows it from `md` up.

Components give you whole pieces of interface. **Utility classes** are the small adjustments: a little more space here, centered text there, a different color. Each does one job, and its name says what.

## Spacing: margin and padding

Spacing classes are built from three parts:

| Part | Choices |
|---|---|
| property | `m` margin (space outside), `p` padding (space inside) |
| side | `t` top, `b` bottom, `s` start (left), `e` end (right), `x` left and right, `y` top and bottom, or nothing for all four |
| size | `0` to `5`, from none to large, or `auto` |

```html
<h1 class="mt-4 mb-2">Featured Books</h1>
<div class="p-3">Padding on every side</div>
<div class="px-4 py-2">More padding left and right than top and bottom</div>
<div class="mx-auto" style="width: 300px;">Centered by automatic side margins</div>
```

`mt-4` is margin-top, size 4; `px-4` is padding on the x axis (left and right). Once you know the three parts, you can read any spacing class.

## Text

```html
<p class="text-center">Centered text</p>
<p class="text-end">Right-aligned text</p>
<p class="fw-bold">Bold text</p>
<p class="fst-italic">Italic text</p>
<p class="text-uppercase">Uppercase text</p>
<p class="fs-4">A larger font size</p>
```

## Colors and backgrounds

Text and background colors use the theme's names, the same ones as buttons:

```html
<p class="text-primary">Primary-colored text</p>
<p class="text-body-secondary">Quieter, secondary text</p>
<div class="bg-dark text-white p-3">White text on a dark background</div>
<div class="bg-success-subtle p-3">A pale green background</div>
```

When you set a background, check that the text color is still easy to read on it.

## Borders, corners and shadows

```html
<div class="border p-3">A border all around</div>
<div class="border-bottom">A border underneath</div>
<img src="images/learning-csharp.svg" class="rounded" alt="A book cover with rounded corners">
<div class="shadow p-3">A shadow under the box</div>
```

## Flex layout

The `d-flex` class turns an element into a flex container, as `display: flex` does in CSS. Further classes then arrange its children:

```html
<div class="d-flex justify-content-between align-items-center border-bottom py-2">
    <span class="fw-bold">Learning C# Step by Step</span>
    <a href="#" class="btn btn-sm btn-primary">Buy Now</a>
</div>
```

| Class | Does |
|---|---|
| `d-flex` | lays the children out in a row |
| `justify-content-between` | pushes them to the two ends, with the space between |
| `justify-content-center` | centers them along the row |
| `align-items-center` | centers them vertically |
| `gap-3` | puts space between them |
| `flex-column` | stacks them in a column instead |

## Hiding and showing by screen size

Display classes take breakpoints too: `d-none d-md-block` hides an element on small screens and shows it from `md` up.

```html
<p class="d-none d-md-block">Shown only on tablets and wider screens.</p>
```

## Check yourself

2 questions to try on the lesson page.

## So what

Utility classes handle the hundred small adjustments every page needs, right in the HTML, so most pages need little or no CSS of your own.

## Key terms

- [Utility Class](https://www.ask-codey.com/glossary/utility-class-css)
- [Margin](https://www.ask-codey.com/glossary/margin)
- [Padding](https://www.ask-codey.com/glossary/padding)

## Cheat sheets

- [Utility Classes](https://www.ask-codey.com/cheat-sheets/bootstrap-utility-classes-cheat-sheet)

Source: https://www.ask-codey.com/lessons/bootstrap-utility-classes