Bootstrap 3 Tutorial

Bootstrap 3 Typography

Last modified on: October 28, 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="b92ddb77-061f-4387-9392-e5262587062e" data-message-model-slug="gpt-4o">
<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 3: Typography</h3>
<p>Bootstrap 3 includes a range of typography utilities and styles to make text look polished and easy to read on any screen. It provides basic styles for headings, body text, lists, inline elements, and more.</p>
<hr />
<h3>Typography Basics</h3>
<p>Bootstrap 3 automatically applies base font styles, including a default font size, line height, and color. Additional typography classes allow for easy formatting.</p>
<ol>
<li>
<p><strong>Font &amp; Text</strong>:</p>
<ul>
<li>Base font: <code>Helvetica Neue</code>, <code>Helvetica</code>, <code>Arial</code>, sans-serif.</li>
<li>Default font size: <code>14px</code> with a line height of <code>1.428</code>.</li>
<li>Links: Default link color with hover underline.</li>
</ul>
</li>
<li>
<p><strong>Headings</strong>:</p>
<ul>
<li>Supports <code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code>, with predefined sizes for each.</li>
<li><code>.h1</code> to <code>.h6</code> classes can also be used on any element to apply heading styles.</li>
</ul>
</li>
<li>
<p><strong>Text Alignment</strong>:</p>
<ul>
<li><code>.text-left</code>, <code>.text-center</code>, <code>.text-right</code>, <code>.text-justify</code>, and <code>.text-nowrap</code> control alignment and wrapping.</li>
</ul>
</li>
<li>
<p><strong>Text Colors</strong>:</p>
<ul>
<li><code>.text-muted</code>, <code>.text-primary</code>, <code>.text-success</code>, <code>.text-info</code>, <code>.text-warning</code>, and <code>.text-danger</code> classes apply colors consistently across your content.</li>
</ul>
</li>
</ol>
<hr />
<h3>Example: Typography in Bootstrap 3</h3>
<p>Here's an example that demonstrates the different typography options available in Bootstrap 3.</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"&gt;
    &lt;title&gt;Bootstrap 3 Typography&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="container"&gt;
    &lt;h1 class="text-primary"&gt;Bootstrap 3 Typography&lt;/h1&gt;
    &lt;p class="lead text-muted"&gt;Easily style and format text elements to create polished layouts.&lt;/p&gt;
    
    &lt;!-- Headings --&gt;
    &lt;h1&gt;h1. Bootstrap heading&lt;/h1&gt;
    &lt;h2&gt;h2. Bootstrap heading&lt;/h2&gt;
    &lt;h3&gt;h3. Bootstrap heading&lt;/h3&gt;
    &lt;h4&gt;h4. Bootstrap heading&lt;/h4&gt;
    &lt;h5&gt;h5. Bootstrap heading&lt;/h5&gt;
    &lt;h6&gt;h6. Bootstrap heading&lt;/h6&gt;
    
    &lt;!-- Inline Text Elements --&gt;
    &lt;p&gt;This is a &lt;mark&gt;highlighted text&lt;/mark&gt; and &lt;small&gt;small text.&lt;/small&gt; &lt;strong&gt;Bold text&lt;/strong&gt; and &lt;em&gt;italic text&lt;/em&gt; add emphasis.&lt;/p&gt;
    
    &lt;!-- Text Alignment --&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;!-- Text Colors --&gt;
    &lt;p class="text-primary"&gt;This text is styled with .text-primary.&lt;/p&gt;
    &lt;p class="text-success"&gt;This text is styled with .text-success.&lt;/p&gt;
    &lt;p class="text-info"&gt;This text is styled with .text-info.&lt;/p&gt;
    &lt;p class="text-warning"&gt;This text is styled with .text-warning.&lt;/p&gt;
    &lt;p class="text-danger"&gt;This text is styled with .text-danger.&lt;/p&gt;
&lt;/div&gt;

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Explanation of the Code</h3>
<ol>
<li>
<p><strong>Headings</strong>:</p>
<ul>
<li>Displays headings from <code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code> with decreasing font sizes, automatically set by Bootstrap.</li>
</ul>
</li>
<li>
<p><strong>Inline Text Elements</strong>:</p>
<ul>
<li>Inline elements like <code>&lt;mark&gt;</code>, <code>&lt;small&gt;</code>, <code>&lt;strong&gt;</code>, and <code>&lt;em&gt;</code> style portions of text within paragraphs.</li>
</ul>
</li>
<li>
<p><strong>Text Alignment</strong>:</p>
<ul>
<li><code>.text-left</code>, <code>.text-center</code>, and <code>.text-right</code> classes align text.</li>
</ul>
</li>
<li>
<p><strong>Text Colors</strong>:</p>
<ul>
<li>The color classes (<code>.text-primary</code>, <code>.text-success</code>, etc.) apply Bootstrap&rsquo;s theme colors to text, making it simple to indicate different message types.</li>
</ul>
</li>
</ol>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More