Bootstrap 5 Framework

Lists and Blockquotes

12 min Lesson 11 of 40

Lists and Blockquotes in Bootstrap 5

Bootstrap 5 provides excellent styling for lists, blockquotes, and code elements. These components help you present structured content, quotations, and technical information in a clean, readable format.

1. Unstyled Lists

By default, lists have bullets or numbers. Use .list-unstyled to remove list markers and left padding.

<!-- Default Unordered List -->
<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

<!-- Unstyled List -->
<ul class="list-unstyled">
    <li>First item (no bullet)</li>
    <li>Second item (no bullet)</li>
    <li>Third item (no bullet)</li>
</ul>

<!-- Nested Unstyled List -->
<ul class="list-unstyled">
    <li>Parent item</li>
    <li>
        Parent item
        <ul>
            <li>Nested child still has bullet</li>
            <li>Another nested child</li>
        </ul>
    </li>
</ul>
        

Note: The .list-unstyled class only removes styling from immediate children. Nested lists retain their default styling unless explicitly styled.

2. Inline Lists

Transform list items to display horizontally with .list-inline on the list and .list-inline-item on each item.

<!-- Inline List -->
<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>

<!-- Inline List with Separators -->
<ul class="list-inline text-muted">
    <li class="list-inline-item">Home</li>
    <li class="list-inline-item">&middot;</li>
    <li class="list-inline-item">About</li>
    <li class="list-inline-item">&middot;</li>
    <li class="list-inline-item">Contact</li>
</ul>

<!-- Navigation-style Inline List -->
<ul class="list-inline mb-0">
    <li class="list-inline-item"><a href="#">Privacy</a></li>
    <li class="list-inline-item"><a href="#">Terms</a></li>
    <li class="list-inline-item"><a href="#">Support</a></li>
</ul>
        

Use Case: Inline lists are perfect for breadcrumbs, social media links, footer navigation, or tag lists.

3. Description Lists

Description lists are perfect for displaying key-value pairs like glossaries or metadata.

<!-- Standard Description List -->
<dl>
    <dt>Description Term</dt>
    <dd>Description details for the term.</dd>

    <dt>Another Term</dt>
    <dd>More details about this term.</dd>

    <dt>Term with Multiple Details</dt>
    <dd>First detail line</dd>
    <dd>Second detail line</dd>
</dl>

<!-- Horizontal Description List -->
<dl class="row">
    <dt class="col-sm-3">Name</dt>
    <dd class="col-sm-9">John Doe</dd>

    <dt class="col-sm-3">Email</dt>
    <dd class="col-sm-9">john@example.com</dd>

    <dt class="col-sm-3">Phone</dt>
    <dd class="col-sm-9">+1 (555) 123-4567</dd>

    <dt class="col-sm-3 text-truncate">Very Long Term</dt>
    <dd class="col-sm-9">This is a longer description</dd>
</dl>

<!-- Styled Description List -->
<dl class="row border-bottom pb-2 mb-2">
    <dt class="col-sm-4 fw-bold text-primary">Product</dt>
    <dd class="col-sm-8 mb-0">Bootstrap 5 Course</dd>
</dl>
<dl class="row border-bottom pb-2 mb-2">
    <dt class="col-sm-4 fw-bold text-primary">Price</dt>
    <dd class="col-sm-8 mb-0">$49.99</dd>
</dl>
        

Horizontal Layout: Use the grid system (row, col-*) to create horizontal description lists where terms and definitions sit side by side.

4. Blockquotes and Citations

Blockquotes are used to quote content from another source. Bootstrap provides clean styling for quotes with proper attribution.

<!-- Basic Blockquote -->
<blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

<!-- Blockquote with Citation -->
<figure>
    <blockquote class="blockquote">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Integer posuere erat a ante.</p>
    </blockquote>
    <figcaption class="blockquote-footer">
        Someone famous in <cite title="Source Title">Source Title</cite>
    </figcaption>
</figure>

<!-- Centered Blockquote -->
<figure class="text-center">
    <blockquote class="blockquote">
        <p>The best way to predict the future is to invent it.</p>
    </blockquote>
    <figcaption class="blockquote-footer">
        Alan Kay
    </figcaption>
</figure>

<!-- Styled Blockquote -->
<figure class="border-start border-primary border-4 ps-3 py-2">
    <blockquote class="blockquote mb-0">
        <p>Design is not just what it looks like and feels like.
        Design is how it works.</p>
    </blockquote>
    <figcaption class="blockquote-footer mt-2">
        Steve Jobs
    </figcaption>
</figure>
        

Semantic HTML: Use <figure> and <figcaption> elements with blockquotes for proper semantic structure and accessibility.

5. Code and Pre-formatted Text

Bootstrap provides styling for inline code, code blocks, and pre-formatted text.

<!-- Inline Code -->
<p>
    Use the <code>.container</code> class to create a container.
    The <code>&lt;code&gt;</code> element displays code inline.
</p>

<!-- Code Block with Pre -->
<pre><code>&lt;div class="container"&gt;
    &lt;h1&gt;Hello World&lt;/h1&gt;
&lt;/div&gt;</code></pre>

<!-- Scrollable Code Block -->
<pre class="pre-scrollable"><code>
<!-- Very long code that will scroll -->
function exampleFunction() {
    // Line 1
    // Line 2
    // ... many lines ...
    // Line 50
}
</code></pre>

<!-- Keyboard Input -->
<p>
    Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.
    Use <kbd><kbd>Ctrl</kbd> + <kbd>S</kbd></kbd> to save.
</p>

<!-- Sample Output -->
<p>
    <samp>This text is meant to be treated as sample output
    from a computer program.</samp>
</p>

<!-- Variables -->
<p>The equation is <var>y</var> = <var>m</var><var>x</var> + <var>b</var></p>
        

Pre-scrollable: The .pre-scrollable class sets a max-height of 340px and provides vertical scrolling for long code blocks.

6. Custom List Styles

Combine utility classes to create custom styled lists.

<!-- Icon List -->
<ul class="list-unstyled">
    <li class="mb-2">
        <i class="bi bi-check-circle-fill text-success me-2"></i>
        First feature with icon
    </li>
    <li class="mb-2">
        <i class="bi bi-check-circle-fill text-success me-2"></i>
        Second feature with icon
    </li>
    <li class="mb-2">
        <i class="bi bi-check-circle-fill text-success me-2"></i>
        Third feature with icon
    </li>
</ul>

<!-- Numbered List with Badges -->
<ul class="list-unstyled">
    <li class="d-flex align-items-start mb-3">
        <span class="badge bg-primary me-3">1</span>
        <div>
            <strong>First Step</strong>
            <p class="mb-0 text-muted">Description of the first step</p>
        </div>
    </li>
    <li class="d-flex align-items-start mb-3">
        <span class="badge bg-primary me-3">2</span>
        <div>
            <strong>Second Step</strong>
            <p class="mb-0 text-muted">Description of the second step</p>
        </div>
    </li>
</ul>

<!-- Timeline-style List -->
<ul class="list-unstyled border-start border-2 border-primary ps-3">
    <li class="mb-3 position-relative">
        <strong>2024</strong>
        <p class="mb-0">Major milestone achieved</p>
    </li>
    <li class="mb-3 position-relative">
        <strong>2023</strong>
        <p class="mb-0">Project launched successfully</p>
    </li>
</ul>
        

7. Practical Example: Documentation Section

<div class="container py-5">
    <h2 class="mb-4">API Documentation</h2>

    <!-- Parameters List -->
    <h3 class="h5 mb-3">Request Parameters</h3>
    <dl class="row">
        <dt class="col-sm-3"><code>api_key</code></dt>
        <dd class="col-sm-9">
            <span class="badge bg-danger">Required</span>
            Your API authentication key
        </dd>

        <dt class="col-sm-3"><code>limit</code></dt>
        <dd class="col-sm-9">
            <span class="badge bg-secondary">Optional</span>
            Number of results (default: 10)
        </dd>
    </dl>

    <!-- Example Request -->
    <h3 class="h5 mb-3 mt-4">Example Request</h3>
    <pre><code>GET /api/users?api_key=YOUR_KEY&amp;limit=20</code></pre>

    <!-- Features List -->
    <h3 class="h5 mb-3 mt-4">Features</h3>
    <ul class="list-unstyled">
        <li class="mb-2">
            <i class="bi bi-check2 text-success me-2"></i>
            Fast and reliable
        </li>
        <li class="mb-2">
            <i class="bi bi-check2 text-success me-2"></i>
            Secure authentication
        </li>
        <li class="mb-2">
            <i class="bi bi-check2 text-success me-2"></i>
            Comprehensive documentation
        </li>
    </ul>

    <!-- Important Note -->
    <figure class="mt-4 bg-light p-3 border-start border-warning border-4">
        <blockquote class="blockquote mb-0">
            <p>Always keep your API key secure. Never expose it in
            client-side code or public repositories.</p>
        </blockquote>
    </figure>
</div>
        

Practice Exercise

Task: Create a "Features" section with the following requirements:

An unstyled list with 5 feature items
Each item has an icon (use text or emoji) and description
A blockquote with a customer testimonial and attribution
A horizontal description list showing product specifications (at least 3 items)
An inline list for social media links in the footer

Bonus: Style the blockquote with a left border and background color.

Summary

Use .list-unstyled to remove bullets and padding from lists
.list-inline and .list-inline-item create horizontal lists
Description lists (<dl>) are perfect for key-value pairs
Use grid classes with description lists for horizontal layouts
.blockquote and .blockquote-footer style quotations
Wrap blockquotes in <figure> for semantic HTML
<code> displays inline code, <pre> for code blocks
.pre-scrollable adds scrolling to long code blocks
Combine unstyled lists with utility classes for custom designs