Bootstrap Typography & Styles
Duration : 00:05:00
Headings:
Headings are fundamental for organizing content hierarchy in web pages. You can structure text elements with varying importance levels and font sizes using HTML's '<h1>' through '<h6>' tags.Example:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
Customizing Headings:
Bootstrap empowers you to personalize headings with classes. Applying classes like 'text-primary' can change heading colors, maintaining consistent design across your site.Example:
<h1 class="text-primary">Custom Heading</h1>
<h2 class="text-muted">Another Heading</h2>
Display Headings:
Display headings, bold and large text, and grab attention for titles or headers. Bootstrap offers classes such as 'display-1' and 'display-2' for creating impactful display headings with distinct sizes.Example:
<h1 class="display-1">Display 1</h1>
<h2 class="display-2">Display 2</h2>
Lead:
Use the 'lead' class to emphasize introductory content. It increases font size and enhances visual prominence.Example:
<p class="lead">This is a lead paragraph.</p>
Inline Text Elements:
Use inline elements like '<em>' (emphasis) and '<strong>' (strong) within paragraphs for different text styles.Example:
<p>You can use <em>emphasis</em> or <strong>strong</strong> text.</p> Text Utilities:
Bootstrap's text utility classes offer quick text styling. For instance, 'text-success' changes text color for success, while 'text-danger' indicates errors.Example:
<p class="text-success">Success text</p>
<p class="text-danger">Error text</p>
Abbreviations:
Make abbreviations more informative with the 'abbr' tag and 'title' attribute. Users get full abbreviation meanings on hover.Example:
<p><abbr title="HyperText Markup Language">HTML</abbr> is important.</p>
Blockquotes:
Use the 'blockquote' class to style quoted content. The 'blockquote-footer' class adds author or citation information.Example:
<blockquote class="blockquote">
<p>Quoted content goes here.</p>
<footer class="blockquote-footer">Author</footer>
</blockquote>
Naming a Source:
For proper attribution, Use the 'cite' tag within 'blockquote-footer' to associate titles or sources with quoted content.Example:
<blockquote class="blockquote">
<p>Quoted content.</p>
<footer class="blockquote-footer">Author <cite>Title</cite></footer>
</blockquote>
Alignment:
Control text alignment with classes like 'text-left' and 'text-center' for desired layouts.Example:
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
Lists:
Organize information using ordered '<ol>' and unordered '<ul>' lists with '<li>' items.Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>Item A</li>
<li>Item B</li>
</ol>
Unstyled Lists:
Use the 'list-unstyled' class to remove list styling, suitable for custom designs.Example:
<ul class="list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
</ul>
Inline Lists:
Use 'list-inline' class for horizontal list presentation, useful for navigation menus.Example:
<ul class="list-inline">
<li class="list-inline-item">Item 1</li>
<li class="list-inline-item">Item 2</li>
</ul>
Description List Alignment:
Use the grid system for aligning terms and descriptions in description lists.Example:
<dl class="row">
<dt class="col-sm-3">Term</dt>
<dd class="col-sm-9">Description</dd>
</dl>
Nesting:
Achieve hierarchy by nesting lists within lists for subcategories or related content.Example:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Nested Item 1</li>
<li>Nested Item 2</li>
</ul>
</li>
</ul>
Responsive Font Sizes:
Adapt to different devices with responsive font size classes like 'fs-1' and 'fs-4'.Example:
<p class="fs-1">Larger text</p>
<p class="fs-4">Smaller text</p>
Miscellaneous Typography Elements:
Use Bootstrap's typography elements for distinct text representation.Example:
<p><mark>Highlighted</mark> text.</p>
<p><del>Deleted</del> text.</p>
<p><ins>Inserted</ins> text.</p>
Still have some questions? Let's discuss.
CONTACT US