Bootstrap 3 Tutorial

Bootstrap 3 List Groups

Last modified on: October 28, 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="b975cf54-32d9-49dc-8c4f-31e5bcab0e6a" 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 3: List Groups</h3>
<p><strong>List Groups</strong> in Bootstrap 3 are a flexible and powerful component for displaying a series of content items. They can be used to create both simple lists and more complex structures with headings, badges, and links. List groups are great for presenting lists of items in a structured format, like navigation links, settings, or any type of categorized content.</p>
<hr />
<h3>Basic Usage of List Groups</h3>
<p>To create a list group, you can use the <code>.list-group</code> class, and each item within the list should have the <code>.list-group-item</code> class. You can also use additional classes to enhance the appearance, such as <code>.active</code> for the active item or <code>.disabled</code> for non-clickable items.</p>
<h4>Example of Basic List Group</h4>
<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;a href="#" class="list-group-item"&gt;
    List Group Item with Badge &lt;span class="badge"&gt;14&lt;/span&gt;
&lt;/a&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Key Features of Bootstrap 3 List Groups</h3>
<ol>
<li><strong>Flexible Structure</strong>: List groups can contain links, buttons, and other elements, making them versatile for different applications.</li>
<li><strong>Active and Disabled States</strong>:
<ul>
<li>Use <code>.active</code> to highlight the current item.</li>
<li>Use <code>.disabled</code> to indicate a non-clickable item.</li>
</ul>
</li>
<li><strong>Customizable</strong>: You can easily customize list group items with badges, icons, and different colors.</li>
</ol>
<h4>Example with Badges</h4>
<p>You can also add badges to list group items to display counts or notifications.</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;div class="spinner-border" role="status"&gt;
    &lt;span class="sr-only"&gt;Loading...&lt;/span&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<h3>Conclusion</h3>
<p>Bootstrap 3 List Groups are an effective way to display a list of items with various functionalities. Their simple and elegant design, combined with flexibility for customization, makes them suitable for many web applications, from navigation menus to categorizing items.</p>

Web Technology View More