Bootstrap 5 Tutorial

Bootstrap 5 Button 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="57fc4971-1dbc-4054-8252-86d9665c612a" 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: Button Groups</h3>
<p>Bootstrap 5 button groups allow you to group multiple buttons together, making them easier to use and visually coherent. Button groups are particularly useful for actions that are related and need to be presented together.</p>
<hr />
<h3>Key Features of Bootstrap 5 Button Groups</h3>
<ol>
<li><strong>Grouping</strong>: Combine multiple buttons into a single group to indicate related actions.</li>
<li><strong>Vertical Alignment</strong>: You can arrange button groups horizontally or vertically.</li>
<li><strong>Dropdown Support</strong>: Integrate dropdown menus with button groups for additional actions.</li>
<li><strong>Flexibility</strong>: Button groups can contain any combination of button types.</li>
</ol>
<hr />
<h3>Example: Creating Button Groups in Bootstrap 5</h3>
<p>Here&rsquo;s an example demonstrating how to create button 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 Button 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 Button Groups&lt;/h1&gt;

&lt;!-- Horizontal Button Group --&gt;
        &lt;div class="btn-group" role="group" aria-label="Basic example"&gt;
            &lt;button type="button" class="btn btn-primary"&gt;Left&lt;/button&gt;
            &lt;button type="button" class="btn btn-primary"&gt;Middle&lt;/button&gt;
            &lt;button type="button" class="btn btn-primary"&gt;Right&lt;/button&gt;
        &lt;/div&gt;

&lt;hr&gt;

&lt;!-- Vertical Button Group --&gt;
        &lt;div class="btn-group-vertical" role="group" aria-label="Vertical button group"&gt;
            &lt;button type="button" class="btn btn-secondary"&gt;Button 1&lt;/button&gt;
            &lt;button type="button" class="btn btn-secondary"&gt;Button 2&lt;/button&gt;
            &lt;button type="button" class="btn btn-secondary"&gt;Button 3&lt;/button&gt;
        &lt;/div&gt;

&lt;hr&gt;

&lt;!-- Button Group with Dropdown --&gt;
        &lt;div class="btn-group" role="group"&gt;
            &lt;button type="button" class="btn btn-success"&gt;Action&lt;/button&gt;
            &lt;button type="button" class="btn btn-success"&gt;Another Action&lt;/button&gt;
            &lt;div class="btn-group"&gt;
                &lt;button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"&gt;
                    Dropdown
                &lt;/button&gt;
                &lt;ul class="dropdown-menu"&gt;
                    &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Another Action&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/div&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>Button Group Classes</strong>: The <code>.btn-group</code> class is used for horizontal groups, while <code>.btn-group-vertical</code> is used for vertical alignment.</li>
<li><strong>Button Types</strong>: Each button within the group retains its context (e.g., <code>.btn-primary</code>, <code>.btn-secondary</code>).</li>
<li><strong>Dropdown Button</strong>: The dropdown is integrated with a button group, using the <code>.dropdown-toggle</code> class and the associated dropdown menu structure.</li>
</ul>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More