Typography and text
From the start Bootstrap gives text one system font, a 1rem size and a comfortable line height. On top of that there are classes that change text size, style and alignment. With them the landing page heading and table labels are styled without your own CSS.
Large headings
Regular h1–h6 are already styled. For the main landing page heading there are display-1–display-6 classes — larger and lighter. The lead class highlights an intro paragraph:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<h1 class="display-5 fw-bold">Tasks under control</h1>
<p class="lead">Tasko helps a team agree on who does what by Friday.</p>
<p>A regular paragraph for comparison.</p>The preview shows a large bold heading, larger intro text and a regular paragraph.
Size and style
| Class | What it does |
|---|---|
fs-1 … fs-6 | Font size like h1 … h6 |
fw-bold, fw-semibold, fw-normal, fw-light | Weight |
fst-italic | Italic |
small | Small text |
text-uppercase, text-lowercase, text-capitalize | Letter case |
text-decoration-none, text-decoration-underline | Underline |
lh-1, lh-sm, lh-base, lh-lg | Line height |
The h1–h6 classes make any element look like a heading without changing its meaning in HTML: <p class="h4"> looks like a heading but stays a paragraph.
Alignment and wrapping
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<p class="text-center">Centered</p>
<p class="text-end">Right-aligned</p>
<p class="text-center text-md-start">Centered on a phone, left from 768 pixels</p>
<div class="text-truncate border p-2" style="max-width: 220px">
A very long task title that does not fit on one line
</div>The last block cuts the text with an ellipsis, so long task titles do not break a table row. text-nowrap forbids wrapping, and text-break allows breaking a long word or URL.
Lists
list-unstyled removes a list's markers and indent, and list-inline with list-inline-item on the items puts them in a row:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<ul class="list-inline">
<li class="list-inline-item">About</li>
<li class="list-inline-item">Pricing</li>
<li class="list-inline-item">Contact</li>
</ul>This gives a row of links for the landing page footer.
Quotes
A customer review is marked up with <blockquote class="blockquote">, and the caption under it with the blockquote-footer class. The caption turns gray and gets a dash before the text.
Common mistake
Using h1 for big text and h4 for small text. The heading level is for page structure: search engines and screen readers rely on it. Choose the tag by meaning and adjust the size with fs-*, display-* or the h1–h6 classes.