Code has been added to clipboard!

Forming a Bootstrap Button Group: Why, When and How

Reading time 2 min
Published Nov 9, 2017
Updated Oct 2, 2019

TL;DR – Bootstrap button groups refer to a number of buttons placed on a single line and wrapped with .btn in .btn-group.

The Use of Bootstrap Button Group

Bootstrap button groups indicate that a set of buttons belongs to the same group contextually. Classes for styling button groups are Bootstrap btn classes.

Creating Button Toolbars

It is possible to combine Bootstrap buttons to create a button toolbar.

You can organize buttons into toolbars by nesting the group in the <div> element with the .btn-toolbar.

Example
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-info">1</button>
<button type="button" class="btn btn-info">2</button>
</div>

Sizing

You can manipulate the sizes of buttons in Bootstrap by adding btn-group-lg (for large buttons) or the btn-group-sm (for small buttons).

Example
<div class="btn-group btn-group-lg"> 
 <button class="btn btn-success" type="button">Button</button>
 <button class="btn btn-info" type="button">Button</button>
 <button class="btn btn-warning" type="button">Button</button>
</div>
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid certificates of completion
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

Connecting Buttons Into a Group

A <div> container with the btn-group Bootstrap class puts separate buttons into a group.

Example
<div class="btn-group">
 <button class="btn btn-success" type="button">Button</button>
 <button class="btn btn-info" type="button">Button</button>
 <button class="btn btn-warning" type="button">Button</button>
</div>

Vertical Groups

You can create a group of vertical Bootstrap 4 buttons by adding the -vertical suffix to the .btn-group class name.

Example
<div class="btn-group-vertical">
 <button class="btn btn-success" type="button">Button</button>
 <button class="btn btn-info" type="button">Button</button>
 <button class="btn btn-warning" type="button">Button</button>
</div>

Nesting to Create Dropdown Menus

By placing one Bootstrap button group into another (nesting), you can create simple dropdown menus.

The code example below consists of three main buttons. The third button has a dropdown menu with two buttons:

Example
<div class="btn-group">
  <button type="button" class="btn btn-danger">Bikes</button>
  <button type="button" class="btn btn-danger">Scooters</button>
  <div class="btn-group">
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
       Cars
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Manual</a>
      <a class="dropdown-item" href="#">Automatic</a>
    </div>
  </div>
</div>

To create a split button dropdown, you need to use .dropdown-toggle-split class. It does small changes to the padding to make the dropdown look cleaner.

Example
<div class="btn-group">
  <button type="button" class="btn btn-danger">Cars</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Manual</a>
    <a class="dropdown-item" href="#">Automatic</a>
  </div>
</div>

If a vertical Bootstrap button group-based dropdown menu works better for your page design, you can make one as well. See the example below. Again, the third button has a dropdown menu with two options:

Example
<div class="btn-group-vertical">
  <button type="button" class="btn btn-danger">Bikes</button>
  <button type="button" class="btn btn-danger">Scooters</button>
  <div class="btn-group">
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
       Cars
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Manual</a>
      <a class="dropdown-item" href="#">Automatic</a>
    </div>
  </div>
</div>

Bootstrap Button Group: Useful Tips

  • Bootstrap buttons have defined styles than you can find here.
  • role="group" and role="toolbar" should be added to make sure that screen readers recognize groups of Bootstrap buttons.

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 05/03/2021
3176 People Used
Only 97 Left
Rating
5.0