Bootstrap Typography & Styles

Level : Beginner
Mentor: Shailendra Chauhan
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>

Self-paced Membership
  • 22+ Video Courses
  • 800+ Hands-On Labs
  • 400+ Quick Notes
  • 55+ Skill Tests
  • 45+ Interview Q&A Courses
  • 10+ Real-world Projects
  • Career Coaching Sessions
  • Email Support
Upto 60% OFF
Know More
Still have some questions? Let's discuss.
CONTACT US
Accept cookies & close this