Bootstrap 4 Button Groups Tutorial With Example

In Bootstrap 4 Buttons Groups Tutorial With Example, you will learn to use Bootstrap 4 button group component. In the previous tutorial, you’ve learned how to create different types of individual buttons and change them with predefined classes. Bootstrap allows you to group series of buttons in a single line through the button group component.

Bootstrap 4 Button Groups Tutorial With Example

Using Bootstrap 4 you can create button groups. Bootstrap 4 button groups are valuable for showing that a set of buttons refers to the same group contextually.

#1: Bootstrap 4 Button Groups

Bootstrap 4 button groups allow you to a group of buttons together, either horizontally or vertically. Use a <div> element with the class .btn-group to create a button group. Let us create a button group of three buttons using “.btn-group” class with a div tag.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Button Groups Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Button Group</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-info">Honda</button>
    <button type="button" class="btn btn-info">Volkswagen</button>
    <button type="button" class="btn btn-info">Suzuki</button>
  </div>
</div>
</body>
</html>

The output of the example looks like below image.

bootstrap 4 button groups tutorial

#2: Bootstrap 4 Vertical Button Groups 

You can create a vertical button group by simply adding a -vertical suffix to the .btn-group class name.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Button Groups Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Vertical Button Group</h2>
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-info">Honda</button>
    <button type="button" class="btn btn-info">Volkswagen</button>
    <button type="button" class="btn btn-info">Suzuki</button>
  </div>
</div>
</body>
</html>

The output of the example looks like below image.

bootstrap 4 button groups example

#3: Bootstrap 4 Button Group Size

Bootstrap 4 enables you to control the size of all buttons within the group. Add either of the .btn-group-sm or .btn-group-lg class to the .button-group class to make any buttons within the group small or large.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Button Groups Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Button Groups Sizes</h2>
<div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-info">Honda</button>
    <button type="button" class="btn btn-info">Volkswagen</button>
    <button type="button" class="btn btn-info">Suzuki</button>
  </div>
  <h3>Default Buttons:</h3>
  <div class="btn-group">
    <button type="button" class="btn btn-info">Honda</button>
    <button type="button" class="btn btn-info">Volkswagen</button>
    <button type="button" class="btn btn-info">Suzuki</button>
  </div>
  <h3>Small Buttons:</h3>
  <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-info">Honda</button>
    <button type="button" class="btn btn-info">Volkswagen</button>
    <button type="button" class="btn btn-info">Suzuki</button>
  </div>
</div>
</body>
</html>

The output of the example looks like below image.

bootstrap 4 button group size example

#4: Bootstrap 4 Button Group Toolbar

You can combine sets of button groups together for creating complex components like button toolbar. To create button toolbar wrap sets of button groups in a <div> element and apply the class .btn-toolbar on it.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Button Groups Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Button Groups Toolbar</h2>
    <div class="btn-toolbar">
        <div class="btn-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>
            <button type="button" class="btn btn-primary">4</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-info">5</button>
            <button type="button" class="btn btn-info">6</button>
            <button type="button" class="btn btn-info">7</button>
        </div>
    </div>
</div>
</body>
</html>

It will produce the following result on the browser.

bootstrap 4 button groups toolbar example

#5: Bootstrap 4 Nesting Button Groups & Dropdown Menus

Nest button groups to create by placing the .btn-group class inside another .btn-group class.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Button Groups Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Nesting Button Groups</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-info">1</button>
    <button type="button" class="btn btn-info">2</button>
    <div class="btn-group">
      <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
      3
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">31</a>
        <a class="dropdown-item" href="#">32</a>
      </div>
    </div>
  </div>
</div>
</body>
</html>

This will give the following result on the browser.

bootstrap 4 nested button group and dropdown example

#6: Bootstrap 4 Split Button Dropdown 

Use button groups to create a split dropdown menu.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Button Groups Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Split Button Dropdown</h2>
<div class="btn-group">
    <button type="button" class="btn btn-info">Apple</button>
    <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">iPhone</a>
      <a class="dropdown-item" href="#">Macbook</a>
    </div>
  </div>
</div>
</body>
</html>

It will give the following result on the browser

bootstrap 4 split button dropdown example

#7: Bootstrap 4 Vertical Button Group Dropdown

Similar to horizontal nesting, vertical button groups can also be nested with a dropdown.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Button Groups Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Vertical Button Group with Dropdown</h2>
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-info">1</button>
    <button type="button" class="btn btn-info">2</button>
    <div class="btn-group">
      <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
      3
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">31</a>
        <a class="dropdown-item" href="#">32</a>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Below screenshot is how the result will look like.

bootstrap 4 vertical button group with dropdown example

Post Your Thoughts

This site uses Akismet to reduce spam. Learn how your comment data is processed.