• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Typography

← Previous Next →

What is Bootstrap 4 Typography?

Bootstrap 4 Typography refers to the set of built-in classes and utilities that control the appearance, alignment, and spacing of text on a web page. Typography is crucial for readability, hierarchy, and overall visual appeal of a website. Bootstrap 4 provides a wide range of classes that make it easy to style headings, paragraphs, lists, and inline text without writing custom CSS.

With a mobile-first approach, Bootstrap ensures that typography adapts seamlessly across all screen sizes, maintaining consistency and readability on smartphones, tablets, and desktops.

Headings in Bootstrap 4

Bootstrap 4 supports six levels of headings, <h1> to <h6>, which automatically have appropriate font sizes and weight. You can also style headings using classes for additional customization.

Example:

<h1 class="display-1">Display Heading 1</h1>
<h2 class="display-2">Display Heading 2</h2>
<h3 class="display-3">Display Heading 3</h3>
<h4 class="display-4">Display Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

  • .display-1 to .display-4 are used for prominent headings, often on landing pages or hero sections.

  • Default <h1> to <h6> are responsive and scale automatically.

  • Headings help establish hierarchy on the page, improving readability.

Paragraphs and Lead Text

Bootstrap 4 provides utility classes to enhance paragraphs:

<p>This is a normal paragraph in Bootstrap 4.</p>
<p class="lead">This is lead text for highlighting important content.</p>

  • .lead adds larger font size and lighter weight, making content stand out.

  • Line-height and spacing are consistent, improving readability on mobile and desktop.

Inline Text and Alignment

Bootstrap 4 allows alignment and inline text styling with simple classes.

Example:

<p class="text-left">Left aligned text</p>
<p class="text-center">Center aligned text</p>
<p class="text-right">Right aligned text</p>

<p class="text-muted">Muted text</p>
<p class="text-primary">Primary colored text</p>
<p class="text-success">Success colored text</p>
<p class="text-danger">Danger colored text</p>
<p class="text-warning">Warning colored text</p>
<p class="text-info">Info colored text</p>
<p class="text-dark">Dark text</p>
<p class="text-light bg-dark">Light text</p>

  • Alignment classes help organize content for headings, captions, and callouts.

  • Color classes make it easy to highlight or differentiate text without custom CSS.

  • .text-muted is often used for secondary or less important information.

Blockquotes

Blockquotes are commonly used to highlight quotes or references:

<blockquote class="blockquote">
  <p class="mb-0">Bootstrap makes typography easy!</p>
  <footer class="blockquote-footer">Author Name <cite title="Source Title">Source</cite></footer>
</blockquote>

  • .blockquote applies proper indentation, spacing, and font style.

  • .blockquote-footer adds attribution in smaller, muted text.

Lists

Bootstrap 4 supports ordered, unordered, and inline lists with additional styling options.

Example:

<ul class="list-unstyled">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

<ul class="list-inline">
  <li class="list-inline-item">Item 1</li>
  <li class="list-inline-item">Item 2</li>
  <li class="list-inline-item">Item 3</li>
</ul>

  • .list-unstyled removes default bullets for clean layouts.

  • .list-inline and .list-inline-item display items horizontally for menus or tags.

Text Transform and Weight

Bootstrap 4 provides classes to control text case and weight:

<p class="text-uppercase">Uppercase Text</p>
<p class="text-lowercase">lowercase text</p>
<p class="text-capitalize">capitalize text</p>

<p class="font-weight-bold">Bold Text</p>
<p class="font-weight-normal">Normal Text</p>
<p class="font-italic">Italic Text</p>

  • .text-uppercase, .text-lowercase, .text-capitalize control text casing.

  • .font-weight-bold, .font-weight-normal, .font-italic adjust font weight and style.

  • These classes eliminate the need for custom CSS for common typographic needs.

Responsive Typography

Bootstrap 4 includes responsive utility classes to make text adjust on different screen sizes:

<p class="h1 d-none d-md-block">Visible on Medium and Larger</p>
<p class="h2 d-block d-md-none">Visible on Small and Extra Small</p>

  • d-none and d-block control visibility across breakpoints.

  • Combining with heading classes allows dynamic typography for responsive design.

Best Practices for Bootstrap Typography

  1. Use built-in heading classes to maintain hierarchy and consistency.

  2. Apply .lead for important introductory paragraphs.

  3. Use inline alignment classes to control text flow.

  4. Utilize color classes for highlighting or status messages.

  5. Use blockquotes and lists for structured content.

  6. Avoid excessive custom CSS for text; rely on Bootstrap utility classes.

  7. Test typography across all devices for legibility and spacing.

Summary of the Tutorial

This tutorial covered Bootstrap 4 Typography, including headings, paragraphs, inline text, blockquotes, lists, text transforms, and responsive utilities. You learned how to apply built-in classes for alignment, color, and emphasis, ensuring text remains readable and visually appealing across devices. Mastering Bootstrap typography is essential for clean, structured, and responsive web design.

Practice Questions

  1. Create six headings from <h1> to <h6> and apply .display-1 to .display-4 classes to see the difference in size.

  2. Add a paragraph with normal text and another paragraph with .lead class for emphasis.

  3. Center a paragraph using .text-center and right-align another paragraph using .text-right.

  4. Apply .text-muted, .text-primary, .text-success, .text-danger, .text-warning, .text-info, .text-dark, and .text-light to different paragraphs.

  5. Create a blockquote with a quote and a footer citation using .blockquote and .blockquote-footer.

  6. Build an unordered list using .list-unstyled and a horizontal list using .list-inline and .list-inline-item.

  7. Convert a paragraph to uppercase, lowercase, and capitalized text using .text-uppercase, .text-lowercase, and .text-capitalize.

  8. Apply font-weight and font-style classes like .font-weight-bold, .font-weight-normal, and .font-italic to different text.

  9. Show a heading that is visible only on medium and larger devices using d-none d-md-block and another heading only on small devices using d-block d-md-none.

  10. Create a paragraph with .lead inside a container and apply .text-center to make it both prominent and centered.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top