Tutorials Tonight's Logo

BOOTSTRAP 4 BUTTONS GROUP


Using Bootstrap 4 you can group a series of buttons together in a single line with the button group.

To wrap a series of buttons with .btn class just put all those buttons in a div element and add .btn-group class to it.

<div class="btn-group">
  <button class="btn btn-primary">HTML</button>
  <button class="btn btn-primary">CSS</button>
  <button class="btn btn-primary">Javascript</button>
</div>
▶ Run the code

Button Group Size

You can increase and decrease size of each button using bootstrap 4 button group class. Instead of applying button sizing classes to every button just add .btn-group-lg and .btn-group-sm to increase and decrease button size respectively.

Large button group

Default button

Small button group
<p>Large button group</p>
<div class="btn-group btn-group-lg">
  <button class="btn btn-primary">HTML</button>
  <button class="btn btn-primary">CSS</button>
  <button class="btn btn-primary">Javascript</button>
</div>
<p>Default button sizes</p>
<div class="btn-group">
  <button class="btn btn-primary">HTML</button>
  <button class="btn btn-primary">CSS</button>
  <button class="btn btn-primary">Javascript</button>
</div>
<p>Small button group</p>
<div class="btn-group btn-group-sm">
  <button class="btn btn-primary">HTML</button>
  <button class="btn btn-primary">CSS</button>
  <button class="btn btn-primary">Javascript</button>
</div>
▶ Run the code

Nesting Button Groups In Bootstrap

Using bootstrap you can also nest button groups. Place a .btn-group within another .btn-group to create a dropdown menus inside button groups.

<div class="btn-group">
  <button class="btn btn-primary">C++</button>
  <button class="btn btn-primary">Java</button>
  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Web Development</button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">HTML</a>
      <a class="dropdown-item" href="#">CSS</a>
      <a class="dropdown-item" href="#">Javascript</a>
    </div>
  </div>
</div>
▶ Run the code


Split Button Dropdown

To create button split use .dropdown-toggle-split class.

<div class="btn-group">
  <button type="button" class="btn btn-primary">Web Development</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="#">HTML</a>
    <a class="dropdown-item" href="#">CSS</a>
    <a class="dropdown-item" href="#">Javascript</a>
  </div>
</div>
▶ Run the code

Verticle Button Group In Bootstrap

By default buttons in button group in bootstrap is in horizontal but you can chage orientation of button to verticle order.

To create a verticlly stacked button group just replace .btn-group with .btn-group-vertical.

<div class="btn-group-vertical">
  <button class="btn btn-primary">C++</button>
  <button class="btn btn-primary">Java</button>
  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Web Development</button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">HTML</a>
      <a class="dropdown-item" href="#">CSS</a>
      <a class="dropdown-item" href="#">Javascript</a>
    </div>
  </div>
</div>
▶ Run the code

Bootstrap 4 Button Toolbar

For more complex components you can combine sets of button groups into toolbars. To create a button toolbar make a collection of button groups and use bootstrap's utility classes to saperate them. Example: for margin-right use .mr-*.

<div class="btn-group mr-2">
  <button type="button" class="btn btn-primary">
    <i class="fa fa-bold"></i>
  </button>
  <button type="button" class="btn btn-primary">
    <i class="fa fa-italic"></i>
  </button>
  <button type="button" class="btn btn-primary">
    <i class="fa fa-underline"></i>
  </button>
</div>
<div class="btn-group mr-2">
  <button type="button" class="btn btn-primary">
    <i class="fa fa-align-left"></i>
  </button>
  <button type="button" class="btn btn-primary">
    <i class="fa fa-align-center"></i>
  </button>
  <button type="button" class="btn btn-primary">
    <i class="fa fa-align-right"></i>
  </button>
  <button type="button" class="btn btn-primary">
    <i class="fa fa-align-justify"></i>
  </button>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-primary">
    <i class="fa fa-undo"></i>
  </button>
  <button type="button" class="btn btn-primary">
    <i class="fa fa-copy"></i>
  </button>
</div>
▶ Run the code

Points to remember:

  1. To create a button group just wrap your buttons with .btn classes by a div element and add .btn-group class to it.
  2. To create a vertical button group replace .btn-group with .btn-group-vertical.
  3. You can also nest a group element into one another.
Bootstrap 4 Lists

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.