Bootstrap - Button Groups

Creating a Basic Button Group

To create a basic button group in Bootstrap, use the .btn-group class. This class is applied to a container element that holds a series of buttons. By nesting the individual buttons inside the .btn-group container, they will be styled and spaced to form a button group.

<div class="btn-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>

We have a <div> element with the class .btn-group, which acts as the container for the button group. Inside the container, we have three <button> elements, each with the classes .btn and .btn-primary. These classes style the buttons with the primary color scheme and give them a consistent look.

When rendered in a web page, the buttons will be grouped together, with no spacing between them. The .btn-group class removes the margins and applies the correct borders to create a seamless button group.

You can change the look of the buttons within the group by using different button classes, such as .btn-secondary, .btn-success, .btn-danger, etc. You can also mix and match button sizes within a group by applying size-specific classes like .btn-lg or .btn-sm to individual buttons.

Button groups are a simple way to organize and present related actions or options in your web pages. They make it easy for users to understand and interact with your interface by grouping together similar or related buttons.

Button Group Sizes

Bootstrap offers two classes to change the size of button groups: .btn-group-lg for large button groups and .btn-group-sm for small button groups. These classes are applied to the .btn-group container element to change the size of all buttons within the group.

<div class="btn-group btn-group-lg">
  <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>

The .btn-group-lg class increases the padding and font size of the buttons within the group, making them larger than the default size.

<div class="btn-group btn-group-sm">
  <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>

The .btn-group-sm class decreases the padding and font size of the buttons within the group, making them smaller than the default size.

The size classes (.btn-group-lg and .btn-group-sm) should be used together with the .btn-group class to apply the sizing styles to the button group container. These size classes only affect the buttons within the group and do not change the overall size of the button group itself.

Use the .btn-group-lg and .btn-group-sm classes to create button groups with different sizes to fit the needs of your design and improve the user experience by providing visual hierarchy and clarity to your button groups.

Vertical Button Groups

Bootstrap lets you create vertical button groups. To create a vertical button group, add the .btn-group-vertical class to the .btn-group container element. This will stack the buttons vertically instead of horizontally.

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

We have a <div> element with the classes .btn-group-vertical, which creates a vertical button group container. Inside the container, we have three <button> elements, each with the classes .btn and .btn-primary. These buttons will be stacked vertically within the group.

Vertical button groups are useful when you want to show related actions or options in a compact vertical layout. They are commonly used in sidebars, navigation menus, or when vertical space is limited.

When using vertical button groups, keep in mind that the width of the group will be set by the widest button within the group. If you want the buttons to have equal widths, you can add the .btn-block class to each button, which will make them span the full width of the container.

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

Vertical button groups can also be combined with button sizes by adding the .btn-group-lg or .btn-group-sm classes to the .btn-group-vertical container to create large or small vertical button groups.

Vertical button groups provide a compact and organized way to show related actions or options in a vertical layout, making them a useful addition to your Bootstrap toolkit.

Button Toolbar

When you need to group multiple button groups together, Bootstrap provides the .btn-toolbar class. By wrapping a series of .btn-group elements inside a .btn-toolbar container, you can create a button toolbar that combines multiple button groups into a single component.

The .btn-toolbar class adds spacing and alignment between the button groups, allowing them to be displayed inline and work as a single unit. This is useful when you have complex interfaces or want to show a set of related actions or options in a compact and organized way.

<div class="btn-toolbar">
  <div class="btn-group mr-2">
    <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 mr-2">
    <button type="button" class="btn btn-secondary">4</button>
    <button type="button" class="btn btn-secondary">5</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-info">6</button>
  </div>
</div>

We have a <div> element with the class .btn-toolbar, which serves as the container for the button toolbar. Inside the toolbar, there are three .btn-group elements, each containing a set of buttons.

The first .btn-group contains three buttons with the .btn-primary class, the second .btn-group contains two buttons with the .btn-secondary class, and the third .btn-group contains a single button with the .btn-info class.

Notice the use of the .mr-2 class on the first two .btn-group elements. This adds a right margin to those groups, creating spacing between them. You can change the margin by changing the number in the class name (e.g., .mr-3 for a larger margin).

Button toolbars are good for organizing complex sets of actions or options, such as rich text editors, data manipulation controls, or custom navigation components. By grouping related buttons together in a toolbar, you can make your interface easier to use and understand.

Use appropriate button classes and sizes within the button groups to keep consistency and readability. You can also combine button toolbars with other Bootstrap components, such as dropdown menus or input groups, to create even more functional interfaces.

Nesting Dropdown Menus in Button Groups

Bootstrap lets you include dropdown menus within button groups. This is done by adding a button with the .dropdown-toggle class and the data-toggle="dropdown" attribute, along with a .dropdown-menu containing the menu items.

To create a button group with a nested dropdown menu, start with a regular .btn-group container. Inside the container, add buttons as needed. For the button that will toggle the dropdown menu, add the .dropdown-toggle class and the data-toggle="dropdown" attribute. Then, add a .dropdown-menu element after the dropdown toggle button to hold the menu items.

<div class="btn-group">
  <button type="button" class="btn btn-primary">Action</button>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
  </ul>
</div>

We have a <div> element with the class .btn-group, which serves as the container for the button group. Inside the group, there are two buttons: one regular button with the text "Action" and another button with the .dropdown-toggle class and data-toggle="dropdown" attribute. The dropdown toggle button also includes a <span> element with the class .caret, which displays the dropdown arrow icon.

After the dropdown toggle button, there is a <ul> element with the class .dropdown-menu. This element contains the dropdown menu items, each represented by an <li> element with an <a> element inside. The <a> elements serve as the menu item links.

When the dropdown toggle button is clicked, the dropdown menu will appear below the button group. The user can then click on a menu item to perform the related action.

You can customize the look and behavior of the dropdown menu by using additional classes and attributes. For example, you can add the .dropdown-header class to an <li> element to create a section header within the dropdown menu, or you can use the .divider class to add a divider between menu items.

Nesting dropdown menus in button groups allows you to add more options and actions to your button groups. This can make your interfaces more compact and easier to use, as users can access related options without leaving the context of the button group.

Justified Button Groups

Bootstrap lets you create justified button groups that span the full width of their container. Justified button groups are useful when you want the buttons to have equal widths and fill the entire width of the parent element.

To create a justified button group, add the .btn-group-justified class to the .btn-group container. This will make the buttons within the group take up equal widths, regardless of their content.

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">Left</a>
  <a href="#" class="btn btn-primary">Middle</a>
  <a href="#" class="btn btn-primary">Right</a>
</div>

We have a <div> element with the classes .btn-group and .btn-group-justified, which creates a justified button group container. Inside the container, there are three <a> elements, each with the classes .btn and .btn-primary. These elements serve as the buttons within the justified group.

When rendered, the buttons will have equal widths and span the full width of the container. The .btn-group-justified class uses CSS table layout to achieve equal button widths, so it's important to use <a> elements instead of <button> elements for the buttons within the justified group.

You can still apply different button styles and sizes to the individual buttons within the justified group. For example, you can use .btn-success, .btn-info, or .btn-danger to apply different color schemes, or use .btn-lg or .btn-sm to change the button sizes.

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary btn-lg">Left</a>
  <a href="#" class="btn btn-success">Middle</a>
  <a href="#" class="btn btn-info btn-sm">Right</a>
</div>

Justified button groups are handy when you have a set of buttons that should be given equal importance and prominence within a container. They create a balanced and visually appealing layout, making it easier for users to understand and interact with the options presented.

Keep in mind that justified button groups work best with a small number of buttons. If you have many buttons or buttons with varying content lengths, the equal width distribution might not be ideal, and you may consider using regular button groups or button toolbars instead.

Combining Button Groups with Other Components

Button groups in Bootstrap can be combined with other components to create more complex and functional user interfaces. You can integrate button groups with input groups, forms, and navigation elements to provide additional actions or options related to those components.

One common combination is using button groups with input groups. Input groups allow you to attach additional elements, such as buttons or dropdown menus, to form inputs. By combining button groups with input groups, you can create powerful input controls with related actions.

<div class="input-group">
  <input type="text" class="form-control" placeholder="Search...">
  <div class="input-group-append">
    <button type="button" class="btn btn-primary">Search</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

Another common combination is using button groups within forms. Button groups can be used to provide form actions or to group related form controls.

<form>
  <div class="form-group">
    <label for="inputEmail">Email</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="inputPassword">Password</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
  </div>
  <div class="btn-group">
    <button type="submit" class="btn btn-primary">Submit</button>
    <button type="reset" class="btn btn-secondary">Reset</button>
  </div>
</form>

Button groups can also be combined with navigation elements, such as navbars or tabs. By incorporating button groups into navigation components, you can provide additional actions or options related to the navigation.

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item btn-group">
    <a class="nav-link" href="#">Dropdown</a>
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"></a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
</ul>

By combining button groups with other Bootstrap components, you can create user interfaces that are more intuitive, functional, and visually appealing. Experiment with different combinations to find the best way to represent your application's actions and options.