Skip to content

Layout and Text Utilities

Bootstrap has a set of small, single-purpose class names called utility classes. Each one does exactly one thing — add spacing, change a font size, make something bold, lay elements out in a row. You mix and match them.

You have already used some: mb-3, mt-4, text-primary. This page introduces a few more that you will reach for constantly.

Laying things out in a row — d-flex and gap-

By default, HTML block elements stack on top of each other — each one takes a full line. Sometimes you want them side by side instead, like a row of buttons.

d-flex on a container makes its children sit in a row:

<div class="d-flex">
  <button class="btn btn-primary">Add</button>
  <button class="btn btn-secondary">Subtract</button>
  <button class="btn btn-success">Multiply</button>
</div>

The three buttons now sit side by side. But they are pressed right up against each other. That is where gap- comes in.

gap-2 adds equal spacing between all the children:

<div class="d-flex gap-2">
  <button class="btn btn-primary">Add</button>
  <button class="btn btn-secondary">Subtract</button>
  <button class="btn btn-success">Multiply</button>
</div>

The gap scale goes from gap-1 (tiny) to gap-5 (large). Try a few and see the difference.

Centering things — justify-content-center

Add justify-content-center to the flex container and the children move to the middle of the row:

<div class="d-flex gap-2 justify-content-center">
  <button class="btn btn-primary">Add</button>
  <button class="btn btn-secondary">Subtract</button>
  <button class="btn btn-success">Multiply</button>
</div>

justify-content-between spreads them to opposite ends. justify-content-start (the default) keeps them left. You do not need to memorise these — just know they exist and look them up when you need them.

Font size — fs-

fs- controls how big text is. The scale runs from fs-1 (largest) to fs-6 (smallest):

<p class="fs-1">Very large</p>
<p class="fs-3">Medium</p>
<p class="fs-5">Slightly smaller</p>
<p class="fs-6">Small</p>

Try these in a page and see how they scale. fs-5 is a good size for a result or a label you want to stand out a little without being a heading.

Font weight — fw-

fw-bold makes text bold. fw-normal resets it back to regular weight. fw-light makes it thinner:

<p class="fw-bold">This stands out.</p>
<p class="fw-normal">This is regular.</p>
<p class="fw-light">This is light.</p>

Combine with fs- and colour classes:

<p class="fs-5 fw-bold text-primary">Result: 42</p>

That is how you make a result line look like it belongs on the page.

Text alignment — text-center

Centers text inside its container:

<h1 class="text-center">Welcome</h1>
<p class="text-center">Fill in the form below.</p>

text-end aligns right. text-start is the default (left).

A quick reference

Class What it does
d-flex Children sit in a row instead of stacking
gap-2 Space between flex children (1–5)
justify-content-center Centers children in the flex row
justify-content-between Pushes children to opposite ends
fs-1 to fs-6 Font size — 1 is largest, 6 is smallest
fw-bold Bold text
fw-light Thin text
text-center Centers text

Challenge

Create a plain HTML page with Bootstrap linked. Put three buttons inside a d-flex gap-3 container and add justify-content-center. Below the buttons, add a paragraph and try different combinations of fs-, fw-, and text colour classes until the paragraph looks like a styled result line.

← Bootstrap in Flask    Next: Bootstrap Exercises →