Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Typography Essentials in Bootstrap | Basic Concepts
Bootstrap Essentials for Modern Websites

book
Typography Essentials in Bootstrap

Bootstrap provides a set of typography classes for consistent styling of text elements. These classes can be applied to headings, paragraphs, spans, and other text elements.

Common Typography Classes

Headings

Headings can be styled using classes such as h1 to h6 to adjust their sizes.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Typography Part 1 Example 1</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<h1 class="h1">Heading 1</h1>
<h2 class="h2">Heading 2</h2>
<h3 class="h3">Heading 3</h3>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
</body>
</html>

Font size

Bootstrap provides classes like fs-1, fs-2, fs-3, fs-4, fs-5, and fs-6 to control font (text) sizes.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Typography Part 1 Example 2</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<p class="fs-1">fs-1 Text</p>
<p class="fs-2">fs-2 Text</p>
<p class="fs-3">fs-3 Text</p>
<p class="fs-4">fs-4 Text</p>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
</body>
</html>

Font weight and italics

Font weights can be set using the class fw-* (font-weight), while italic styling can be achieved using the class fst-*(font-style).

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Typography Part 1 Example 3</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="row">
<div class="col">
<h1 class="h2">Font weight variations</h1>
<p class="fw-bold">This text is bold.</p>
<p class="fw-semibold">This text is semibold.</p>
<p class="fw-normal">This text is normal.</p>
<p class="fw-light">This text is light.</p>
<p class="fw-lighter">This text is even lighter.</p>
</div>
<div class="col">
<h1 class="h2">Font style variations</h1>
<p class="fst-italic">This text is italicized.</p>
<p class="fst-normal">This text is in normal font style.</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
</body>
</html>

Lead text

The lead class is used to add emphasis to a paragraph by increasing its font size and weight.

Text alignment

Classes like text-start, text-center, and text-left are used to align text elements.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Typography Part 1 Example 4</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<p class="lead">This is a lead paragraph.</p>
<p class="text-center">Center-aligned text.</p>
<p class="text-end">Right-aligned text.</p>
<p class="text-start">Left-aligned text.</p>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
</body>
</html>

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 2

Pergunte à IA

expand
ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

We use cookies to make your experience better!
some-alt