Bootstrap Text, Colors and Spacing

Utility classes are small Bootstrap classes that do one job, such as centring text or adding a margin.

Typography

Bootstrap styles headings and text for you. These classes change them further:

Class	Effect
`display-1` to `display-6`	Very large, eye-catching headings
`lead`	A slightly larger intro paragraph
`fw-bold`, `fw-semibold`, `fw-normal`, `fw-light`	Font weight
`fst-italic`	Italic text
`fs-1` to `fs-6`	Font size (1 is largest)
`text-start`, `text-center`, `text-end`	Alignment
`text-uppercase`, `text-capitalize`	Letter case
`small`	Smaller text

Example

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container py-4 text-center">
  <p class="text-uppercase fw-semibold small text-secondary">Admissions open</p>
  <h1 class="display-4 fw-bold">Learn IT Skills</h1>
  <p class="lead">Short courses for students and job seekers in Karachi.</p>
  <p class="fst-italic">Classes on weekdays and weekends.</p>
</div>

</body>
</html>

Try it Yourself »

Theme Colours

Bootstrap has a set of named colours. Use them with text- and bg-:

Name	Typical use
`primary`	Main brand colour (blue)
`secondary`	Less important things (grey)
`success`	Done, correct, paid (green)
`danger`	Errors, delete (red)
`warning`	Warnings (yellow)
`info`	Information (light blue)
`light`, `dark`	Light grey and near-black

Example

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">

<p class="text-primary">Primary text</p>
<p class="text-success">Your fee is paid.</p>
<p class="text-danger">This roll number is not valid.</p>

<div class="bg-dark text-white p-3 mb-2">Dark background</div>
<div class="bg-warning p-3 mb-2">Warning background</div>
<div class="text-bg-info p-3">text-bg-info picks a readable text colour for you</div>

</body>
</html>

Try it Yourself »

Spacing: Margin and Padding

Spacing classes follow the pattern property, side, size: {m or p}{side}-{size}.

Part	Options
Property	`m` (margin), `p` (padding)
Side	`t` top, `b` bottom, `s` start (left), `e` end (right), `x` left and right, `y` top and bottom, blank for all sides
Size	`0` to `5`, or `auto`

Examples: mt-3 (margin top), px-4 (padding left and right), mb-0 (no bottom margin), mx-auto (centre a block).

Size	Space
`1`	0.25rem
`2`	0.5rem
`3`	1rem
`4`	1.5rem
`5`	3rem

Bootstrap uses s (start) and e (end) instead of left and right. This makes layouts work for right-to-left languages like Urdu and Arabic too.

Display and Flex

Class	Effect
`d-none`	Hide the element
`d-block`, `d-inline-block`	Change display
`d-md-none`	Hide from the md breakpoint up
`d-flex`	Turn on Flexbox
`justify-content-between`	Space items apart
`align-items-center`	Centre items vertically
`gap-3`	Space between flex items

Borders, Rounding and Shadows

border, border-top, border-primary, border-2 add and colour borders
rounded, rounded-3, rounded-pill, rounded-circle round the corners
shadow-sm, shadow, shadow-lg add shadows

Example

html

<div class="d-flex justify-content-between align-items-center border rounded-3 shadow-sm p-3">
  <span class="fw-bold">Order #2051</span>
  <span class="badge text-bg-success rounded-pill">Delivered</span>
</div>

Exercise

Which class adds padding on the left and right only?

py-3px-3ps-3p-3