• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Button Groups

← Previous Next →

When building user interfaces, it is common to have multiple buttons that perform related actions. Instead of placing them randomly on a page, grouping buttons together improves the user experience, keeps the interface clean, and ensures consistency. Bootstrap 4 offers a convenient component called Button Groups for this purpose. This tutorial will cover everything from basic usage to advanced customization and practical examples.

What Are Button Groups?

A button group is a container that holds multiple buttons in a single line, making them appear connected visually. Button groups can contain buttons of the same style or mix different styles. They help organize related actions, such as text formatting options, CRUD operations, or navigation elements.

Bootstrap 4 uses the .btn-group class to create a button group. Each button inside the group uses the .btn class combined with a contextual class (like .btn-primary) for styling.

Creating a Basic Button Group

The simplest button group contains multiple buttons inside a .btn-group container. By default, buttons are displayed inline and share a border radius that visually connects them.

<div class="btn-group" role="group">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

In this example, the three buttons appear as a single unit with no gaps between them. This creates a clean and professional appearance.

Button Group Sizes

Bootstrap 4 allows you to adjust the size of an entire button group using .btn-group-lg for large buttons or .btn-group-sm for small buttons. The size class should be applied to the .btn-group container rather than individual buttons.

<div class="btn-group btn-group-lg" role="group">
  <button type="button" class="btn btn-success">Large Left</button>
  <button type="button" class="btn btn-success">Large Right</button>
</div>

<div class="btn-group btn-group-sm" role="group">
  <button type="button" class="btn btn-warning">Small Left</button>
  <button type="button" class="btn btn-warning">Small Right</button>
</div>

Vertical Button Groups

Sometimes, you may want buttons to stack vertically instead of appearing side by side. Bootstrap provides the .btn-group-vertical class to create a vertical button group. This is especially useful for sidebar menus or forms with limited horizontal space.

<div class="btn-group-vertical" role="group">
  <button type="button" class="btn btn-info">Top</button>
  <button type="button" class="btn btn-info">Middle</button>
  <button type="button" class="btn btn-info">Bottom</button>
</div>

Vertical button groups behave similarly to horizontal groups but stack the buttons neatly while keeping them visually connected.

Mixed Styles and Colors

You are not limited to using the same style for all buttons in a group. Mixing colors or styles can emphasize specific actions. However, use this sparingly to avoid a cluttered interface.

<div class="btn-group" role="group">
  <button type="button" class="btn btn-primary">Save</button>
  <button type="button" class="btn btn-warning">Edit</button>
  <button type="button" class="btn btn-danger">Delete</button>
</div>

In this example, each button’s style reflects its action, improving clarity for the user.

Button Toolbar

A button toolbar allows you to group multiple button groups together on a single line. This is helpful when creating complex interfaces with multiple sets of related actions.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-secondary">A</button>
    <button type="button" class="btn btn-secondary">B</button>
  </div>
</div>

Using .btn-toolbar, you can align multiple groups neatly and manage spacing using margin utility classes like .mr-2.

Nesting Button Groups

Button groups can also be nested with dropdowns. This is useful when some actions have additional options or sub-actions.

<div class="btn-group" role="group">
  <button type="button" class="btn btn-primary">Primary</button>
  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Option 1</a>
      <a class="dropdown-item" href="#">Option 2</a>
    </div>
  </div>
</div>

This combination allows for powerful interfaces with multiple related actions and sub-options.

Accessibility Considerations

Bootstrap 4 button groups are designed with accessibility in mind. Always include role="group" and proper aria attributes. This ensures assistive technologies recognize the buttons as a single unit and can navigate them easily.

Best Practices

  1. Group buttons that are logically related to avoid confusing the user.

  2. Use consistent button sizes within a group.

  3. Limit the number of buttons in a single group for better usability.

  4. Use spacing between groups to prevent clutter.

  5. Combine with icons when appropriate to make actions clearer.

Practical Examples

  • Text Editor: Group buttons for Bold, Italic, and Underline.

  • Form Actions: Group Save, Reset, and Cancel buttons.

  • CRUD Interface: Group View, Edit, and Delete actions.

  • Navigation Toolbar: Group navigation buttons for related pages.

Summary of the Tutorial

Button groups in Bootstrap 4 provide a clean and consistent way to organize related buttons. They are flexible, responsive, and accessible, offering horizontal, vertical, and nested arrangements. By using button groups correctly, you can make your user interface more intuitive, visually appealing, and professional.

Practice Questions

  1. Create a basic horizontal button group with three buttons labeled “Left,” “Middle,” and “Right,” all using the Primary style.

  2. Create a vertical button group with three buttons labeled “Top,” “Middle,” and “Bottom,” all using the Info style.

  3. Create a large button group using .btn-group-lg containing two buttons: “Accept” and “Decline,” both using the Success style.

  4. Create a small button group using .btn-group-sm containing two buttons: “Yes” and “No,” both using the Warning style.

  5. Create a button group with mixed styles: one Primary button labeled “Save,” one Warning button labeled “Edit,” and one Danger button labeled “Delete.”

  6. Create a button toolbar with two button groups: the first group containing three Primary buttons labeled “1,” “2,” “3,” and the second group containing two Secondary buttons labeled “A” and “B.”

  7. Create a button group with a nested dropdown. The first button should be labeled “Main,” and the dropdown should have two options: “Option 1” and “Option 2.”

  8. Create a vertical button group where one button has an icon from Font Awesome, for example, a download icon with the text “Download.”

  9. Create a horizontal button group with spacing between groups using the .mr-2 utility class. Include two groups, one with two buttons and the second with three buttons.

  10. Create a button group that mimics a text editor toolbar with buttons for Bold, Italic, and Underline, each using different contextual styles for clarity.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top