Bootstrap 5 Tutorial

Bootstrap 5 List Groups

Last modified on: October 27, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">&nbsp;</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="ab68467a-c4ce-4dff-bce1-1e466cce96b1" data-message-model-slug="gpt-4o-mini">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>Bootstrap 5: List Groups</h3>
<p>List groups in Bootstrap 5 are a flexible and powerful way to present a series of content in a list format. They are used for displaying items such as navigation links, contact details, or any other grouped information. List groups can also include various content types such as images, badges, and links.</p>
<hr />
<h3>Key Features of Bootstrap 5 List Groups</h3>
<ol>
<li><strong>Simple Structure</strong>: Easy to implement with a straightforward markup.</li>
<li><strong>Customizable Styles</strong>: Supports various styles such as flush, horizontal, and contextual variations.</li>
<li><strong>Interactive Elements</strong>: You can include links, buttons, and other interactive elements within the list items.</li>
<li><strong>Badges and Labels</strong>: Easily incorporate badges to indicate counts or statuses.</li>
</ol>
<hr />
<h3>Example: Creating List Groups in Bootstrap 5</h3>
<p>Here&rsquo;s an example demonstrating how to create and style list groups in Bootstrap 5:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Bootstrap 5 List Groups Example&lt;/title&gt;
    &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="container mt-5"&gt;
        &lt;h1&gt;Bootstrap 5 List Groups&lt;/h1&gt;

&lt;!-- Basic List Group --&gt;
        &lt;ul class="list-group"&gt;
            &lt;li class="list-group-item"&gt;Item 1&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Item 2&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Item 3&lt;/li&gt;
        &lt;/ul&gt;

&lt;hr&gt;

&lt;!-- List Group with Links --&gt;
        &lt;h2&gt;List Group with Links&lt;/h2&gt;
        &lt;ul class="list-group"&gt;
            &lt;li class="list-group-item"&gt;
                &lt;a href="#" class="stretched-link"&gt;Link Item 1&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="list-group-item"&gt;
                &lt;a href="#" class="stretched-link"&gt;Link Item 2&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="list-group-item"&gt;
                &lt;a href="#" class="stretched-link"&gt;Link Item 3&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;

&lt;hr&gt;

&lt;!-- List Group with Badges --&gt;
        &lt;h2&gt;List Group with Badges&lt;/h2&gt;
        &lt;ul class="list-group"&gt;
            &lt;li class="list-group-item d-flex justify-content-between align-items-center"&gt;
                Item 1
                &lt;span class="badge bg-primary rounded-pill"&gt;14&lt;/span&gt;
            &lt;/li&gt;
            &lt;li class="list-group-item d-flex justify-content-between align-items-center"&gt;
                Item 2
                &lt;span class="badge bg-secondary rounded-pill"&gt;2&lt;/span&gt;
            &lt;/li&gt;
            &lt;li class="list-group-item d-flex justify-content-between align-items-center"&gt;
                Item 3
                &lt;span class="badge bg-success rounded-pill"&gt;1&lt;/span&gt;
            &lt;/li&gt;
        &lt;/ul&gt;

&lt;hr&gt;

&lt;!-- Flush List Group --&gt;
        &lt;h2&gt;Flush List Group&lt;/h2&gt;
        &lt;ul class="list-group list-group-flush"&gt;
            &lt;li class="list-group-item"&gt;Flush Item 1&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Flush Item 2&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Flush Item 3&lt;/li&gt;
        &lt;/ul&gt;

&lt;hr&gt;

&lt;!-- Horizontal List Group --&gt;
        &lt;h2&gt;Horizontal List Group&lt;/h2&gt;
        &lt;ul class="list-group list-group-horizontal"&gt;
            &lt;li class="list-group-item"&gt;Horizontal Item 1&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Horizontal Item 2&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Horizontal Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;

&lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Explanation of the Code</h3>
<ul>
<li><strong>Basic List Group</strong>: The most straightforward implementation is an unordered list (<code>&lt;ul&gt;</code>) with the class <code>.list-group</code>. Each item is a list item (<code>&lt;li&gt;</code>) with the class <code>.list-group-item</code>.</li>
<li><strong>List Group with Links</strong>: You can make list items clickable by wrapping them in anchor tags. The class <code>.stretched-link</code> allows the link to cover the entire list item.</li>
<li><strong>List Group with Badges</strong>: Badges are added using the <code>&lt;span&gt;</code> tag with the class <code>.badge</code>. This is useful for displaying counts or notifications alongside list items.</li>
<li><strong>Flush List Group</strong>: To remove the borders and padding around list items, use the <code>.list-group-flush</code> class.</li>
<li><strong>Horizontal List Group</strong>: If you want to display the items horizontally, use the <code>.list-group-horizontal</code> class.</li>
</ul>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More