Letzte Änderung: 27. Juni 2026


Bootstrap 5 Tipps

Centering methods in Bootstrap 5


Use

justify-content-center

utilities on

Flexbox containers

to change the alignment of flex items. Example: <div class="d-flex justify-content-center">...</div>

mx-auto

for centering

block elements with a defined width, (%, vw, px, etc..)

. Example: <div class="mx-auto w-50">Text</div>

div wrapper

for center

text and inline elements inside a block element

. Example: <div class="text-center"><img src="bild.png" alt=""></div>

d-block to convert block element

for center

text and inline elements

. Example: <img src="bild.png" class="d-block mx-auto" alt="">

d-inline-block to convert inline element

for center inline element without inheritance. Example: <div class="text-center"><pre class="d-inline-block text-start text-light p-3 mb-0"><code>... content ...</code></pre>

Text decoration


Reset a text or link’s color with class="text-reset"

Blockquote: class="blockquote"

<p class="fw-bold">Bold text.</p>

<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>

<p class="fw-normal">Normal weight text.</p>

<p class="fw-light">Light weight text.</p>

<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>

<p class="fst-italic">Italic text.</p>

<p class="fst-normal">Text with normal font style</p>

<p class="text-decoration-underline">This text has a line underneath it.</p>

<p class="text-decoration-line-through">This text has a line going through it.</p>

<a href="#" class="text-decoration-none">This link has its text decoration removed</a>

Font size


<p class="font-monospace">This is in monospace</p>

<p class="lead">This is a lead paragraph. It stands out from regular paragraphs.</p>

<p class="fs-6">Text</p>

<p class="fs-5">Text</p>

<p class="fs-4">Text</p>

<p class="fs-3">Text</p>

<p class="fs-2">Text</p>

<p class="fs-1">Text</p>


<p class="h6">h6 Bootstrap heading</p>

<p class="h5">h5 Bootstrap heading</p>

<p class="h4">h4 Bootstrap heading</p>

<p class="h3">h3 Bootstrap heading</p>

<p class="h2">h2 Bootstrap heading</p>

<p class="h1">h1 Bootstrap heading</p>


<h1 class="display-6">Display 6</h1>

<h1 class="display-5">Display 5</h1>

<h1 class="display-4">Display 4</h1>

<h1 class="display-3">Display 3</h1>

<h1 class="display-2">Display 2</h1>

<h1 class="display-1">Display 1</h1>