Bootstrap 4 Tutorial

BS4 Typography

Last modified on: October 25, 2024

<h1>Bootstrap 4 Typography</h1>
<p>Bootstrap 4 provides a rich set of typography styles and utilities that make it easy to create visually appealing text elements on your website. The typography styles are designed to ensure readability and responsiveness across different devices.</p>
<h2>Key Typography Features in Bootstrap 4</h2>
<ol>
<li>
<p><strong>Headings</strong>: Bootstrap 4 includes six predefined heading styles, from <code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code>, which automatically scale and adjust in size.</p>
</li>
<li>
<p><strong>Text Utilities</strong>: Bootstrap provides utility classes for text alignment, color, and decoration.</p>
</li>
<li>
<p><strong>Font Styles</strong>: You can easily apply italic, bold, and small text styles with predefined classes.</p>
</li>
<li>
<p><strong>Blockquotes</strong>: Bootstrap includes styling for blockquotes to enhance quotes and citations.</p>
</li>
<li>
<p><strong>Lists</strong>: You can style ordered and unordered lists with Bootstrap&rsquo;s classes.</p>
</li>
</ol>
<h2>1. Headings</h2>
<p>Bootstrap&rsquo;s heading classes can be used to create responsive headings. Here&rsquo;s an example:</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;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;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Result:</h3>
<ul>
<li>The headings are styled with appropriate sizes, weights, and margins.</li>
</ul>
<h2>2. Text Utilities</h2>
<p>You can align text and change its color easily using utility classes. Here&rsquo;s how:</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;p class="text-left"&gt;Left aligned text.&lt;/p&gt;
&lt;p class="text-center"&gt;Center aligned text.&lt;/p&gt;
&lt;p class="text-right"&gt;Right aligned text.&lt;/p&gt;
&lt;p class="text-primary"&gt;This is a primary colored text.&lt;/p&gt;
&lt;p class="text-success"&gt;This is a success colored text.&lt;/p&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Result:</h3>
<ul>
<li>The text will align and color based on the applied utility classes.</li>
</ul>
<h2>3. Font Styles</h2>
<p>Bootstrap makes it easy to apply different font styles. Here are a few examples:</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;p class="font-weight-bold"&gt;This text is bold.&lt;/p&gt;
&lt;p class="font-weight-light"&gt;This text is light.&lt;/p&gt;
&lt;p class="font-italic"&gt;This text is italic.&lt;/p&gt;
&lt;p class="small"&gt;This is small text.&lt;/p&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Result:</h3>
<ul>
<li>Each style modifies the appearance of the text accordingly.</li>
</ul>
<h2>4. Blockquotes</h2>
<p>You can use blockquotes to emphasize quotes:</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;blockquote class="blockquote"&gt;
    &lt;p class="mb-0"&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;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Result:</h3>
<ul>
<li>Blockquotes are styled with proper indentation and formatting.</li>
</ul>
<h2>5. Lists</h2>
<p>Bootstrap 4 offers styling for both ordered and unordered lists:</p>
<h3>Unordered List Example:</h3>
<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;ul class="list-group"&gt;
    &lt;li class="list-group-item"&gt;Item 1&lt;/li&gt;
    &lt;li class="list-group-item"&gt;Item 2&lt;/li&gt;
    &lt;li class="list-group-item"&gt;Item 3&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Ordered List Example:</h3>
<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;ol class="list-group"&gt;
    &lt;li class="list-group-item"&gt;First item&lt;/li&gt;
    &lt;li class="list-group-item"&gt;Second item&lt;/li&gt;
    &lt;li class="list-group-item"&gt;Third item&lt;/li&gt;
&lt;/ol&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Result:</h3>
<ul>
<li>The lists are styled with Bootstrap's list-group classes for better visuals.</li>
</ul>
<h2>Example: Complete Bootstrap 4 Typography</h2>
<p>Here&rsquo;s a complete example that demonstrates the Bootstrap 4 typography features:</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 4 Typography Example&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="container mt-5"&gt;
        &lt;h1&gt;Bootstrap 4 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&gt;Text Utilities&lt;/h2&gt;
        &lt;p class="text-left"&gt;Left aligned text.&lt;/p&gt;
        &lt;p class="text-center"&gt;Center aligned text.&lt;/p&gt;
        &lt;p class="text-right"&gt;Right aligned text.&lt;/p&gt;
        &lt;p class="text-primary"&gt;This is a primary colored text.&lt;/p&gt;
        &lt;p class="text-success"&gt;This is a success colored text.&lt;/p&gt;

&lt;h2&gt;Font Styles&lt;/h2&gt;
        &lt;p class="font-weight-bold"&gt;This text is bold.&lt;/p&gt;
        &lt;p class="font-weight-light"&gt;This text is light.&lt;/p&gt;
        &lt;p class="font-italic"&gt;This text is italic.&lt;/p&gt;
        &lt;p class="small"&gt;This is small text.&lt;/p&gt;

&lt;h2&gt;Blockquotes&lt;/h2&gt;
        &lt;blockquote class="blockquote"&gt;
            &lt;p class="mb-0"&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;h2&gt;Lists&lt;/h2&gt;
        &lt;ul class="list-group mb-3"&gt;
            &lt;li class="list-group-item"&gt;Item 1&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Item 2&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Item 3&lt;/li&gt;
        &lt;/ul&gt;

&lt;ol class="list-group"&gt;
            &lt;li class="list-group-item"&gt;First item&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Second item&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Third item&lt;/li&gt;
        &lt;/ol&gt;
    &lt;/div&gt;

&lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>&nbsp;</h3>

Web Technology View More