Skip to content
Web Frameworks
Bootstrap
Bootstrap Typography & Content — Complete Practical Guide

Bootstrap Typography & Content — Complete Practical Guide

DodaTech Updated Jun 6, 2026 11 min read

Bootstrap provides consistent, browser-agnostic styling for all HTML content — typography, images, tables, and figures — so your content looks polished everywhere without writing custom CSS.

What You’ll Learn

  • Apply heading, display, lead, and inline text classes
  • Use text alignment, transform, weight, and color utilities
  • Style responsive images with rounded corners and thumbnails
  • Build tables with striped rows, hover effects, and responsive scroll
  • Understand Bootstrap’s Reboot CSS normalization

Why Content Styling Matters

Every website has text, images, and data tables. Without consistent styling, headings look different on Chrome vs Firefox, tables overflow on mobile, and images break layouts.

At DodaTech, the Durga Antivirus Pro scan reports use Bootstrap tables to display threat data, Doda Browser uses lead paragraphs for search results, and DodaZIP uses image utilities to show file thumbnails — all styled with Bootstrap content classes.

Your Learning Path 

    flowchart LR
  A[Bootstrap Basics] --> B[Bootstrap Content]
  B --> C[Bootstrap Components 1]
  C --> D[Bootstrap Components 2]
  D --> E[Bootstrap Components 3]
  B:::current

  classDef current fill:#0d6efd,color:#fff,stroke:#0a58ca,stroke-width:2px
Prerequisites: Basic HTML (tags, attributes) and the Bootstrap Basics. You need a Bootstrap-enabled page — use the CDN setup from the previous tutorial.

Typography — The Foundation of Readable Content

Headings

Bootstrap styles <h1> through <h6> with consistent sizes, weights, and margins:

<!-- Bootstrap gives each heading a specific font-size and weight.
     h1 = 2.5rem (40px), h2 = 2rem (32px), down to h6 = 1rem (16px) -->
<h1>h1 heading</h1>
<h2>h2 heading</h2>
<h3>h3 heading</h3>
<h4>h4 heading</h4>
<h5>h5 heading</h5>
<h6>h6 heading</h6>

<!-- You can apply heading sizes to OTHER elements using .h1 through .h6.
     This is useful when you want a <span> or <p> to look like a heading
     without changing its semantic tag. -->
<p class="h1">Styled as h1 but still a paragraph</p>
<span class="h4">Styled as h4 but still a span</span>

Display Headings — For Hero Sections

Display headings are larger and lighter than regular headings. They’re meant for landing pages, not article content.

<!-- Display headings range from display-1 (5rem, light weight)
     to display-6. They're designed for hero sections and banners. -->
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Why not just use h1? Regular h1 is bold and compact. Display headings are lighter (lower font-weight) and larger, creating visual impact. Think of h1 as a newspaper headline and display-1 as a billboard.

Lead & Inline Text 

<!-- .lead makes a paragraph stand out with larger, lighter text.
     Use it for the opening paragraph of a section. -->
<p class="lead">This paragraph stands out with larger, lighter text.</p>

<!-- Inline text elements — each has a semantic meaning that
     screen readers understand, not just visual styling. -->
<p>You can use the <mark>mark tag to highlight</mark> text.</p>
<p><del>This line of text is deleted.</del></p>     <!-- Deleted content -->
<p><s>This line is no longer accurate.</s></p>      <!-- Strikethrough -->
<p><ins>This line is inserted text.</ins></p>       <!-- Inserted -->
<p><u>This line is underlined.</u></p>              <!-- Underline -->
<p><small>This line is fine print.</small></p>      <!-- Small/legal -->
<p><strong>Bold text</strong> and <em>italic text</em>.</p>

Abbreviations & Blockquotes 

<!-- <abbr> shows the full text on hover via the title attribute -->
<p><abbr title="HyperText Markup Language">HTML</abbr></p>
<!-- .initialism makes the abbreviation slightly smaller -->
<p><abbr title="Cascading Style Sheets" class="initialism">CSS</abbr></p>

<!-- .blockquote gives the citation a styled box with border -->
<blockquote class="blockquote">
    <p>The best way to predict the future is to create it.</p>
    <!-- .blockquote-footer adds the citation line with an em dash -->
    <footer class="blockquote-footer">Peter Drucker</footer>
</blockquote>

Text Utilities — Quick Styling Without CSS 

<!-- Alignment — responsive: text-sm-center works on sm+ screens -->
<p class="text-start">Left aligned</p>
<p class="text-center">Center aligned</p>
<p class="text-end">Right aligned</p>

<!-- Transformation — changes case regardless of the original text -->
<p class="text-lowercase">Lowercase</p>
<p class="text-uppercase">Uppercase</p>
<p class="text-capitalize">Capitalize Each Word</p>

<!-- Font weight — controls thickness of letters -->
<p class="fw-bold">Bold text</p>
<p class="fw-bolder">Bolder (relative to parent)</p>
<p class="fw-semibold">Semibold</p>
<p class="fw-normal">Normal weight</p>
<p class="fw-light">Light weight</p>
<p class="fst-italic">Italic</p>

<!-- Font size — fs-1 (largest) through fs-6 (smallest) -->
<p class="fs-1">Font size 1 — largest</p>
<p class="fs-6">Font size 6 — smallest</p>

<!-- Line height — controls spacing between lines of text -->
<p class="lh-1">Tight (1)</p>
<p class="lh-sm">Small (1.25)</p>
<p class="lh-base">Base (1.5) — default</p>
<p class="lh-lg">Large (2)</p>

<!-- Truncation — cuts text with ellipsis when it overflows -->
<p class="text-truncate" style="max-width: 150px;">
    This long text will be cut off with three dots...
</p>

<!-- Misc -->
<p class="font-monospace">Monospace text (like code)</p>
<a href="#" class="text-reset">Reset link color to parent</a>
<a href="#" class="text-decoration-none">No underline on link</a>

Why use utilities instead of CSS? You write classes directly in HTML — no new stylesheet rules, no naming things, no specificity wars. It’s faster and more maintainable.

Colors — Semantic Communication

Text Colors

Bootstrap uses semantic color classes — the class name describes the meaning, not the color. This makes it easy to maintain themes.

<p class="text-primary">Primary (blue — main brand color)</p>
<p class="text-secondary">Secondary (gray)</p>
<p class="text-success">Success (green — positive action)</p>
<p class="text-danger">Danger (red — error or warning)</p>
<p class="text-warning">Warning (yellow — caution)</p>
<p class="text-info">Info (cyan — neutral information)</p>
<p class="text-light bg-dark">Light — only visible on dark backgrounds</p>
<p class="text-dark">Dark</p>
<p class="text-muted">Muted — less important content</p>
<p class="text-white bg-dark">White</p>

Background Colors 

<div class="bg-primary">Primary background</div>
<div class="bg-success">Success background</div>
<div class="bg-danger">Danger background</div>
<div class="bg-warning">Warning background</div>
<div class="bg-info">Info background</div>
<div class="bg-light">Light gray background</div>
<div class="bg-dark text-white">Dark background with white text</div>
<div class="bg-transparent">Transparent background</div>

<!-- .bg-gradient adds a subtle gradient overlay -->
<div class="bg-primary bg-gradient">Primary with gradient</div>

Opacity 

<!-- Control opacity in 25% increments -->
<div class="bg-primary bg-opacity-75">75% opaque primary background</div>
<div class="text-danger text-opacity-50">50% opaque red text</div>

Images — Responsive by Default

Images are naturally fixed-size — they overflow containers on small screens. Bootstrap’s image classes fix this:

<!-- .img-fluid makes the image scale with its parent:
     max-width: 100% and height: auto. Without it, the image
     stays its original size and breaks the layout on mobile. -->
<img src="photo.jpg" class="img-fluid" alt="Responsive image">

<!-- Shape helpers -->
<img src="photo.jpg" class="rounded" alt="Rounded corners (4px radius)">
<img src="photo.jpg" class="rounded-circle" alt="Perfect circle image">
<img src="photo.jpg" class="rounded-pill" alt="Pill/capsule shape">

<!-- .img-thumbnail adds a 4px rounded border with padding,
     giving an old-school Polaroid effect -->
<img src="photo.jpg" class="img-thumbnail" alt="Thumbnail style">

<!-- Alignment — combine with float or flex utilities -->
<img src="photo.jpg" class="rounded float-start" alt="Floats left">
<img src="photo.jpg" class="rounded float-end" alt="Floats right">
<img src="photo.jpg" class="rounded mx-auto d-block" alt="Centered">

Figures — Images with Captions 

<!-- The <figure> element pairs an image with a caption.
     .figure-img adds bottom margin to separate from the caption.
     .figure-caption styles the caption text (muted, smaller). -->
<figure class="figure">
    <img src="photo.jpg" class="figure-img img-fluid rounded" alt="...">
    <figcaption class="figure-caption">A caption for the image.</figcaption>
</figure>

Tables — Structured Data Display

Bootstrap makes plain HTML tables look professional with just one class:

<!-- Add .table and your plain table transforms into a styled one
     with proper borders, padding, and striped rows (optional). -->
<table class="table table-striped table-hover">
    <thead>
        <tr><th>#</th><th>Name</th><th>Email</th></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>Alice</td><td>alice@example.com</td></tr>
        <tr><td>2</td><td>Bob</td><td>bob@example.com</td></tr>
    </tbody>
</table>

Table Variants

ClassEffect
.table-darkInverted dark color scheme
.table-stripedAlternating row background colors
.table-borderedBorders on all sides of all cells
.table-borderlessNo borders at all
.table-hoverHighlight row on mouse hover
.table-smCompact (half padding)
<!-- Combine multiple variants -->
<table class="table table-striped table-hover table-bordered table-sm">

Contextual Rows — Color-Coded Rows 

<tr class="table-success"><td>Success row (green)</td></tr>
<tr class="table-danger"><td>Danger row (red)</td></tr>
<tr class="table-warning"><td>Warning row (yellow)</td></tr>
<tr class="table-info"><td>Info row (blue)</td></tr>

Responsive Tables — Mobile-Friendly 

<!-- Wrap your table in .table-responsive to make it horizontally
     scrollable on small screens. Otherwise, a wide table will
     overflow and break the page layout. -->
<div class="table-responsive">
    <table class="table">...</table>
</div>

<!-- Control the breakpoint at which scrolling kicks in -->
<div class="table-responsive-sm">   <!-- Scrolls below sm (576px) -->
<div class="table-responsive-md">   <!-- Scrolls below md (768px) -->
<div class="table-responsive-lg">   <!-- Scrolls below lg (992px) -->

Reboot — The Invisible Foundation

Bootstrap’s Reboot module is a CSS reset that normalizes browser inconsistencies. You don’t need to add anything — it’s baked into bootstrap.min.css.

What Reboot does:

  • Removes default margin from <body>
  • Sets box-sizing: border-box on all elements (so padding doesn’t add to width)
  • Removes list bullets and padding from <ul> and <ol>
  • Removes all margin-top (uses margin-bottom only for consistent spacing)
  • Sets a base font on <html> and inherits it everywhere
<!-- Reboot removes bullets automatically. Use .list-unstyled to
     explicitly remove them (adds it back + removes padding). -->
<ul class="list-unstyled">
    <li>No bullets</li>
    <li>No left padding</li>
</ul>

<!-- .list-inline turns a list into horizontal items -->
<ul class="list-inline">
    <li class="list-inline-item">Inline item</li>
    <li class="list-inline-item">Inline item</li>
</ul>

<!-- Description list with grid alignment -->
<dl class="row">
    <dt class="col-sm-3">Term</dt>
    <dd class="col-sm-9">Description aligned in a grid</dd>
</dl>

Comparison: Bootstrap Content vs Plain HTML

FeaturePlain HTMLBootstrap
Heading sizesBrowser-dependentConsistent across all browsers
Image responsivenessMust write CSSJust add img-fluid
Table stylingDefault browser chromeProfessional with .table
Mobile table scrollBreaks layout.table-responsive fixes
Text truncationRequires CSSJust .text-truncate
Cross-browserInconsistentNormalized by Reboot

Common Mistakes

1. Forgetting img-fluid on images

Without img-fluid, images keep their original pixel size and overflow containers on small screens. Always add it unless you explicitly want a fixed-size image.

2. Using text-muted on dark backgrounds

text-muted has low contrast on light backgrounds but becomes invisible on dark ones. Pair it with a light background or use text-white-50 on dark themes.

3. Not using .table-responsive for wide tables

A table with 8+ columns will overflow the viewport on mobile. Always wrap it in .table-responsive unless the table is narrow enough to fit.

4. Confusing display headings with regular headings

display-1 is NOT for page titles — it’s for hero/banner text. Use regular <h1> for article headings and display-* for visual impact sections.

5. Overriding Reboot’s margin model

Bootstrap removes top margins from everything. If you set margin-top manually, you’ll fight Bootstrap’s consistent spacing system. Stick to margin-bottom only.

Practice Questions

  1. What’s the difference between .h1 and <h1>? Answer: <h1> is a semantic HTML tag for headings. .h1 is a CSS class that makes any element (like a <p>) look like an h1 without changing its semantic meaning.

  2. When would you use .display-1 instead of <h1>? Answer: Use display-1 for landing page hero sections or marketing banners where you want a large, lightweight heading. Use <h1> for article titles and page headings.

  3. Why does img-fluid exist? Why not just make all images responsive by default? Answer: Making all images max-width: 100% by default would break layouts where images intentionally overflow (like full-bleed banners). Bootstrap gives you the choice.

  4. What does .table-striped add to a table? Answer: It adds alternating background colors to every other row (using CSS :nth-child), making long tables easier to read by creating visual separation between rows.

  5. How do you make a table horizontally scrollable on mobile? Answer: Wrap the <table> in <div class="table-responsive">. The container allows horizontal scrolling when the table is wider than the viewport.

Challenge: Create a product catalog table with 6 columns (ID, Product, Category, Price, Stock, Status) that scrolls horizontally on mobile, uses striped rows, and has a green badge for “In Stock” items. Use table-dark on the header only.

FAQ

What is the difference between h1 and display-1?
h1 is for regular page headings (2.5rem, bold). display-1 is larger (5rem, lighter weight) for hero sections and landing pages.
How do I center an image in Bootstrap?
Use <img class="mx-auto d-block"> (auto margins on flex block) or wrap in a text-center parent.
What does img-thumbnail do?
It adds a 4px rounded border with padding, giving the image a thumbnail appearance. It also includes img-fluid behavior.
What is the difference between muted and secondary text?
text-muted uses --bs-secondary-color with reduced emphasis. text-secondary uses the secondary theme color. Use muted for less important content.
How do I remove table borders?
Add table-borderless to the table class. Or use table alone for minimal styling.
What is Reboot in Bootstrap?
Reboot is a CSS reset baked into Bootstrap that normalizes browser differences (box-sizing, margins, font inheritance) so your design looks consistent everywhere.

Try It Yourself 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Product Catalog</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container py-4">
        <h1 class="display-4">Product Catalog</h1>
        <p class="lead text-muted">Browse our latest products with pricing and availability.</p>

        <div class="table-responsive">
            <table class="table table-striped table-hover align-middle">
                <thead class="table-dark">
                    <tr>
                        <th>#</th>
                        <th>Product</th>
                        <th>Category</th>
                        <th>Price</th>
                        <th>Stock</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td><img src="https://picsum.photos/seed/prod1/40/40" class="rounded me-2" alt="">Wireless Mouse</td>
                        <td>Electronics</td>
                        <td class="fw-bold">$29.99</td>
                        <td>150</td>
                        <td><span class="badge bg-success">In Stock</span></td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td><img src="https://picsum.photos/seed/prod2/40/40" class="rounded me-2" alt="">LED Desk Lamp</td>
                        <td>Lighting</td>
                        <td class="fw-bold">$49.99</td>
                        <td>0</td>
                        <td><span class="badge bg-danger">Out of Stock</span></td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td><img src="https://picsum.photos/seed/prod3/40/40" class="rounded me-2" alt="">USB-C Hub</td>
                        <td>Electronics</td>
                        <td class="fw-bold">$34.99</td>
                        <td>85</td>
                        <td><span class="badge bg-success">In Stock</span></td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td><img src="https://picsum.photos/seed/prod4/40/40" class="rounded me-2" alt="">Notebook Set</td>
                        <td>Stationery</td>
                        <td class="fw-bold">$14.99</td>
                        <td>200</td>
                        <td><span class="badge bg-warning text-dark">Low Stock</span></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <figure class="figure mt-4">
            <img src="https://picsum.photos/seed/banner/800/200" class="figure-img img-fluid rounded" alt="Banner">
            <figcaption class="figure-caption text-center">New arrivals every week — check back often!</figcaption>
        </figure>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

This sandbox demonstrates: display headings, lead paragraphs, tables with striped/hover rows, contextual badges, rounded images, and figures.

What’s Next

TopicDescription
Bootstrap Components Part 1Alerts, buttons, cards, and accordion
Bootstrap FormsInputs, validation, and form layouts
HTML TablesUnderstanding HTML table structure
Bootstrap UtilitiesSpacing, flex, and display helpers

What’s Next

Congratulations on completing this Bootstrap Content tutorial! Here’s where to go from here:

  • Practice daily — Consistency is more important than long study sessions
  • Build a project — Apply what you learned by building something real
  • Explore related topics — Check out other tutorials in the same category
  • Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!

Previous Bootstrap Basics — Complete Guide to Setup, Grid & Layout Next Bootstrap Components Explained — Alerts, Buttons, Cards & Accordion

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Bootstrap