bootstrap
  1. bootstrap-button-groups
PreviousNext

Bootstrap Button Groups

  • Bootstrap Button Groups allow you to group a series of buttons together on a single line.
  • This can be useful for creating navigation menus or for displaying a group of related options.

Syntax

To create a button group in Bootstrap, use the following syntax:

<div class="btn-group" role="group" aria-label="Button group">
  <button type="button" class="btn btn-primary">Button 1</button>
  <button type="button" class="btn btn-primary">Button 2</button>
  <button type="button" class="btn btn-primary">Button 3</button>
</div>

You can also use the btn-group-vertical class to create a vertical button group.

Example

Here is an example of a horizontal button group.

<div class="btn-group" role="group" aria-label="Button group">
    <button type="button" class="btn btn-primary">Large button</button>
    <button type="button" class="btn btn-primary">Middle button</button>
    <button type="button" class="btn btn-primary">Small button</button>
</div>
<div class="btn-group mt-3" role="group" aria-label="Button group">
    <button type="button" class="btn btn-outline-primary">Left outline button</button>
    <button type="button" class="btn btn-outline-primary">Middle outline button</button>
    <button type="button" class="btn btn-outline-primary">Right outline button</button>
</div>
Try Playground

Vertical

Here is an example of a Vertical button group.

<div class="btn-group-vertical" role="group" aria-label="Button group">
    <button type="button" class="btn btn-primary">Large button</button>
    <button type="button" class="btn btn-primary">Middle button</button>
    <button type="button" class="btn btn-primary">Small button</button>
</div>
<div class="btn-group-vertical" role="group" aria-label="Button group">
    <button type="button" class="btn btn-outline-primary">Left outline button</button>
    <button type="button" class="btn btn-outline-primary">Middle outline button</button>
    <button type="button" class="btn btn-outline-primary">Right outline button</button>
</div>
Try Playground

Sizing

<div class="btn-group btn-group-lg mb-3" role="group" aria-label="Large button group">
    <button type="button" class="btn btn-outline-primary">Left outline button</button>
    <button type="button" class="btn btn-outline-primary">Middle outline button</button>
    <button type="button" class="btn btn-outline-primary">Right outline button</button>
</div>

<div class="btn-group" role="group mb-3" aria-label="Default button group">
    <button type="button" class="btn btn-outline-primary">Left outline button</button>
    <button type="button" class="btn btn-outline-primary">Middle outline button</button>
    <button type="button" class="btn btn-outline-primary">Right outline button</button>
</div>

<div class="btn-group btn-group-sm mb-3" role="group" aria-label="Small button group">
    <button type="button" class="btn btn-outline-primary">Left outline button</button>
    <button type="button" class="btn btn-outline-primary">Middle outline button</button>
    <button type="button" class="btn btn-outline-primary">Right outline button</button>
</div>
Try Playground

Explanation

In the code above, we used the following classes to style the button group and buttons:

  • btn-group: this class is used to group the buttons together.
  • btn: this is the basic button class provided by Bootstrap.
  • btn-primary: this class sets the primary color for the button.
  • btn-lg, btn-sm: these classes are used to set the button size to large and small respectively.

Use

Button Groups can be useful for creating navigation menus, filtering options, and action buttons on various elements. It allows you to keep the related actions or options together in a concise manner.

Important Points

  • Bootstrap Button Groups allow you to group a series of buttons together on a single line.
  • Button Groups allow you to style and group the buttons in a concise and organized manner.
  • By using different classes provided by Bootstrap, you can customize the size, style, and other properties of the button group and buttons.

Summary

Bootstrap Button Groups are a convenient way to group buttons together. By using different classes provided by Bootstrap, you can create horizontal or vertical button groups, customize their size, style, and other properties.

ButtonsCard
Published on: