Bootstrap 4 Button Group

Button Group

Bootstrap allows you to group a series of buttons together in a single line. Use a <div> element with class ".btn-group" to create a button group:

Example 1: Bootstrap 4 Button Group

<div class="btn-group">
    <button type="button" class="btn btn-danger">Home</button>
    <button type="button" class="btn btn-danger">About</button>
    <button type="button" class="btn btn-danger">Contact</button>
</div>

Button Sizing

Instead of applying button sizes to every button in a group, use class .btn-group-lg|sm in a group or groups.

<div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-danger">Home</button>
    <button type="button" class="btn btn-danger">About</button>
    <button type="button" class="btn btn-danger">Contact</button>
</div>

Button toolbar

Combine the sets of button groups into button toolbars

<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-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-secondary">8</button>
  </div>
</div>

Vertical Button Groups

To create a vertical button group, use Bootstrap class ".btn-group-vertical".

<div class="btn-group-vertical">
    <button type="button" class="btn btn-danger">Home</button>
    <button type="button" class="btn btn-danger">About</button>
    <button type="button" class="btn btn-danger">Contact</button>
</div>

Dropdown Menus

<div class="btn-group">
    <button type="button" class="btn btn-danger">Home</button>
    <button type="button" class="btn btn-danger">About</button>
    <div class="btn-group">
    <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    Course </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">HTML</a>
          <a class="dropdown-item" href="#">CSS</a>
          <a class="dropdown-item" href="#">JS</a>
        </div>
    </div>
</div> 

Split Dropdown Button

<div class="btn-group">
    <button type="button" class="btn btn-danger">Home</button>
    <button type="button" class="btn btn-danger">About</button>
    <button type="button" class="btn btn-danger">Course</button>
    
    <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="#">HTML</a>
        <a class="dropdown-item" href="#">CSS</a>
        <a class="dropdown-item" href="#">JS</a>
    </div>
</div>

Dropdown Button with Divider

<ul class="dropdown-menu">
    <li><a href="#">Our Work</a></li>
    <li><a href="#">Our Team</a></li>
    <li><a href="#">Contact</a></li>
    <li class="dropdown-divider"></li>
    <li><a href="#">More..</a></li>
</ul>

Dropdown Header

<ul class="dropdown-menu">
    <li class="dropdown-header">HTML</li>
    <li><a href="#">HTML 4</a></li>
    <li><a href="#">HTML 5</a></li>
    <li class="divider"></li>
    <li class="dropdown-header">CSS</li>
    <li><a href="#">CSS 1</a></li>
    <li><a href="#">CSS 2</a></li>
    <li><a href="#">CSS 3</a></li>
</ul>

Dropup menu

If you want the dropdown menu to expand upwards instead of downwards, change the <div> element with class="dropup".

<button type="button" class="btn btn-danger">Home</button>
    <button type="button" class="btn btn-danger">About</button>
    <div class="btn-group dropup">
    <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Course</button>
        <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JS</a></li>
            <li><a href="#">PHP</a></li>
        </ul>
    </div>
</div>

Styling Checkbox

Bootstrap's button styles can be applied to other elements, such as checkbox or radio button. Add data-toggle="buttons" to a .btn-group and add .btn-group-toggle to style the <input>s within your buttons. The checked state for these buttons is only updated via click event on the button.
Note that pre-checked buttons require you to manually add the .active class to the input's label.

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-danger active">
    <input type="checkbox" checked autocomplete="off"> Active
  </label>
  <label class="btn btn-danger">
    <input type="checkbox" autocomplete="off"> Check
  </label>
  <label class="btn btn-danger">
    <input type="checkbox" autocomplete="off"> Check
  </label>
</div>

Styling RadioButton

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-danger active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-danger">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-danger">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>