Bootstrap 5 Tutorial

Bootstrap 5 Typography

Last modified on: October 27, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">&nbsp;</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="3d32f5e0-1192-41c3-857d-9c43f890d3fe" data-message-model-slug="gpt-4o-mini">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>Bootstrap 5: Typography</h3>
<p>Bootstrap 5 offers a comprehensive set of typography utilities and components to help you create beautifully styled text that is responsive and consistent across devices. The typography system is built on top of the default HTML elements and provides utility classes to customize text styles, sizes, weights, and alignment easily.</p>
<hr />
<h3>Key Features of Bootstrap 5 Typography</h3>
<ol>
<li><strong>Headings</strong>: Bootstrap provides six levels of headings (<code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code>), each with predefined styles.</li>
<li><strong>Text Utilities</strong>: Utility classes for text color, size, alignment, transformation, and decoration.</li>
<li><strong>Lists</strong>: Styled lists with various options for ordered and unordered lists.</li>
<li><strong>Blockquotes</strong>: Styles for quotations.</li>
<li><strong>Fonts</strong>: Option to use custom fonts or integrate with Google Fonts.</li>
<li><strong>Lead Text</strong>: A special class for highlighting introductory paragraphs.</li>
</ol>
<hr />
<h3>Example: Typography in Bootstrap 5</h3>
<p>Here&rsquo;s a simple example demonstrating various typography features in Bootstrap 5:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Bootstrap 5 Typography&lt;/title&gt;
    &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="container mt-5"&gt;
        &lt;h1&gt;Bootstrap 5 Typography&lt;/h1&gt;

&lt;h2&gt;Headings&lt;/h2&gt;
        &lt;h1&gt;This is a Heading 1&lt;/h1&gt;
        &lt;h2&gt;This is a Heading 2&lt;/h2&gt;
        &lt;h3&gt;This is a Heading 3&lt;/h3&gt;
        &lt;h4&gt;This is a Heading 4&lt;/h4&gt;
        &lt;h5&gt;This is a Heading 5&lt;/h5&gt;
        &lt;h6&gt;This is a Heading 6&lt;/h6&gt;

&lt;h2 class="mt-4"&gt;Text Utilities&lt;/h2&gt;
        &lt;p class="lead"&gt;This is a lead paragraph. It stands out from the regular paragraph.&lt;/p&gt;
        &lt;p class="text-primary"&gt;This is a primary text.&lt;/p&gt;
        &lt;p class="text-secondary"&gt;This is a secondary text.&lt;/p&gt;
        &lt;p class="text-success"&gt;This text indicates success.&lt;/p&gt;
        &lt;p class="text-danger"&gt;This text indicates danger.&lt;/p&gt;
        &lt;p class="text-warning"&gt;This text indicates a warning.&lt;/p&gt;
        &lt;p class="text-info"&gt;This text provides additional information.&lt;/p&gt;
        &lt;p class="text-light bg-dark"&gt;This text is light on a dark background.&lt;/p&gt;
        &lt;p class="text-dark"&gt;This text is dark.&lt;/p&gt;
        &lt;p class="text-muted"&gt;This text is muted.&lt;/p&gt;
        
        &lt;h2 class="mt-4"&gt;Text Alignment&lt;/h2&gt;
        &lt;p class="text-start"&gt;Left aligned text.&lt;/p&gt;
        &lt;p class="text-center"&gt;Center aligned text.&lt;/p&gt;
        &lt;p class="text-end"&gt;Right aligned text.&lt;/p&gt;

&lt;h2 class="mt-4"&gt;Lists&lt;/h2&gt;
        &lt;ul&gt;
            &lt;li&gt;Unordered list item 1&lt;/li&gt;
            &lt;li&gt;Unordered list item 2&lt;/li&gt;
            &lt;li&gt;Unordered list item 3&lt;/li&gt;
        &lt;/ul&gt;
        &lt;ol&gt;
            &lt;li&gt;Ordered list item 1&lt;/li&gt;
            &lt;li&gt;Ordered list item 2&lt;/li&gt;
            &lt;li&gt;Ordered list item 3&lt;/li&gt;
        &lt;/ol&gt;

&lt;h2 class="mt-4"&gt;Blockquotes&lt;/h2&gt;
        &lt;blockquote class="blockquote"&gt;
            &lt;p&gt;This is a blockquote example.&lt;/p&gt;
            &lt;footer class="blockquote-footer"&gt;Someone famous in &lt;cite title="Source Title"&gt;Source Title&lt;/cite&gt;&lt;/footer&gt;
        &lt;/blockquote&gt;
    &lt;/div&gt;

&lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Explanation of the Code</h3>
<ul>
<li><strong>Headings</strong>: The example includes all six levels of headings, demonstrating their sizes and default styles.</li>
<li><strong>Text Utilities</strong>: Various utility classes are used to style paragraphs with different text colors, lead paragraphs, and more.</li>
<li><strong>Text Alignment</strong>: Shows how to align text using classes like <code>.text-start</code>, <code>.text-center</code>, and <code>.text-end</code>.</li>
<li><strong>Lists</strong>: Displays both unordered and ordered lists with standard Bootstrap styling.</li>
<li><strong>Blockquotes</strong>: An example of using the blockquote component for quotations, complete with a citation.</li>
</ul>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More