Bootstrap 4 Tutorial

BS4 Button Groups

Last modified on: October 26, 2024

<h1>Bootstrap 4 Button Groups</h1>
<p>Button groups in Bootstrap 4 allow you to group a series of buttons together on a single line, making them perfect for actions that are related to each other. Button groups are easy to set up and customize, making them useful for toolbars, navigation, and actions in forms or tables.</p>
<h2>Key Features of Bootstrap 4 Button Groups</h2>
<ol>
<li><strong>Alignment</strong>: Easily align multiple buttons in a single row for compact layout and quick access.</li>
<li><strong>Vertical Grouping</strong>: Create vertical button groups when space is limited horizontally.</li>
<li><strong>Sizing Options</strong>: Use different sizes (small, large, or default) to match the UI requirements.</li>
<li><strong>Button Toolbar</strong>: Group multiple button groups together in a toolbar for a more complex layout.</li>
</ol>
<h2>Basic Button Group Structure</h2>
<p>To create a button group, use the <code>.btn-group</code> class and place your buttons inside the div. Here&rsquo;s a simple example:</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="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;
</code></pre>
</div>
</div>
</div>
</div>
<h2>Examples of Bootstrap 4 Button Groups</h2>
<h3>1. Basic Horizontal Button Group</h3>
<p>This is a simple, horizontally aligned button group:</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="btn-group" role="group" aria-label="Basic example"&gt;
    &lt;button type="button" class="btn btn-secondary"&gt;Left&lt;/button&gt;
    &lt;button type="button" class="btn btn-secondary"&gt;Middle&lt;/button&gt;
    &lt;button type="button" class="btn btn-secondary"&gt;Right&lt;/button&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>2. Vertical Button Group</h3>
<p>For a vertical layout, use <code>.btn-group-vertical</code>:</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="btn-group-vertical" role="group" aria-label="Vertical button group"&gt;
    &lt;button type="button" class="btn btn-info"&gt;Top&lt;/button&gt;
    &lt;button type="button" class="btn btn-info"&gt;Middle&lt;/button&gt;
    &lt;button type="button" class="btn btn-info"&gt;Bottom&lt;/button&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>3. Button Toolbar</h3>
<p>Combine multiple button groups into a toolbar using <code>.btn-toolbar</code>:</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="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"&gt;
    &lt;div class="btn-group mr-2" role="group" aria-label="First group"&gt;
        &lt;button type="button" class="btn btn-dark"&gt;1&lt;/button&gt;
        &lt;button type="button" class="btn btn-dark"&gt;2&lt;/button&gt;
        &lt;button type="button" class="btn btn-dark"&gt;3&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="btn-group mr-2" role="group" aria-label="Second group"&gt;
        &lt;button type="button" class="btn btn-secondary"&gt;A&lt;/button&gt;
        &lt;button type="button" class="btn btn-secondary"&gt;B&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="btn-group" role="group" aria-label="Third group"&gt;
        &lt;button type="button" class="btn btn-light"&gt;X&lt;/button&gt;
        &lt;button type="button" class="btn btn-light"&gt;Y&lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>4. Sizing Button Groups</h3>
<p>Change the size of a button group by adding <code>.btn-group-lg</code> or <code>.btn-group-sm</code> classes:</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;!-- Large button group --&gt;
&lt;div class="btn-group btn-group-lg" role="group" aria-label="Large button group"&gt;
    &lt;button type="button" class="btn btn-warning"&gt;Large Left&lt;/button&gt;
    &lt;button type="button" class="btn btn-warning"&gt;Large Middle&lt;/button&gt;
    &lt;button type="button" class="btn btn-warning"&gt;Large Right&lt;/button&gt;
&lt;/div&gt;

&lt;!-- Small button group --&gt;
&lt;div class="btn-group btn-group-sm mt-2" role="group" aria-label="Small button group"&gt;
    &lt;button type="button" class="btn btn-danger"&gt;Small Left&lt;/button&gt;
    &lt;button type="button" class="btn btn-danger"&gt;Small Middle&lt;/button&gt;
    &lt;button type="button" class="btn btn-danger"&gt;Small Right&lt;/button&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>5. Button Group with Dropdown</h3>
<p>Add dropdown functionality within button groups using <code>.dropdown-toggle</code>:</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="btn-group" role="group"&gt;
    &lt;button type="button" class="btn btn-success"&gt;Main&lt;/button&gt;
    &lt;button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
        &lt;span class="sr-only"&gt;Toggle Dropdown&lt;/span&gt;
    &lt;/button&gt;
    &lt;div class="dropdown-menu"&gt;
        &lt;a class="dropdown-item" href="#"&gt;Option 1&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Option 2&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Option 3&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Complete Example: Bootstrap 4 Button Groups Page</h3>
<p>Here&rsquo;s a full example of Bootstrap 4 button groups in action:</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 4 Button Groups Example&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;

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

&lt;!-- Basic Button Group --&gt;
        &lt;div class="btn-group mb-3" role="group" aria-label="Basic button group"&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;!-- Vertical Button Group --&gt;
        &lt;div class="btn-group-vertical mb-3" role="group" aria-label="Vertical button group"&gt;
            &lt;button type="button" class="btn btn-info"&gt;Top&lt;/button&gt;
            &lt;button type="button" class="btn btn-info"&gt;Middle&lt;/button&gt;
            &lt;button type="button" class="btn btn-info"&gt;Bottom&lt;/button&gt;
        &lt;/div&gt;

&lt;!-- Button Toolbar --&gt;
        &lt;div class="btn-toolbar mb-3" role="toolbar" aria-label="Button toolbar"&gt;
            &lt;div class="btn-group mr-2" role="group"&gt;
                &lt;button type="button" class="btn btn-secondary"&gt;1&lt;/button&gt;
                &lt;button type="button" class="btn btn-secondary"&gt;2&lt;/button&gt;
            &lt;/div&gt;
            &lt;div class="btn-group" role="group"&gt;
                &lt;button type="button" class="btn btn-light"&gt;3&lt;/button&gt;
                &lt;button type="button" class="btn btn-light"&gt;4&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;

&lt;!-- Button Group with Dropdown --&gt;
        &lt;div class="btn-group" role="group"&gt;
            &lt;button type="button" class="btn btn-success"&gt;Main&lt;/button&gt;
            &lt;button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                &lt;span class="sr-only"&gt;Toggle Dropdown&lt;/span&gt;
            &lt;/button&gt;
            &lt;div class="dropdown-menu"&gt;
                &lt;a class="dropdown-item" href="#"&gt;Action 1&lt;/a&gt;
                &lt;a class="dropdown-item" href="#"&gt;Action 2&lt;/a&gt;
                &lt;a class="dropdown-item" href="#"&gt;Action 3&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>&nbsp;</h3>

Web Technology View More