Bootstrap Button groups label

Overview

Inside of the pages we make we regularly have a several feasible solutions to introduce as well as a few actions which can be eventually required involving a particular item or a topic so it would definitely be quite valuable in the case that they had an practical and easy method styling the controls responsible for the user taking one path or a different in a compact group with wide-spread look and styling.

To take care of such cases the most recent version of the Bootstrap framework-- Bootstrap 4 has complete help to the so called Bootstrap Button groups panel which in turn typically are precisely what the title states-- groups of buttons covered as a one element with all of the components inside looking almost the very same and so it is really convenient for the site visitor to pick the right one and it's a lot less troubling for the eye because there is definitely no free space between the some elements in the group-- it looks as a single button bar using numerous alternatives.

The ways to use the Bootstrap Button groups label:

Creating a button group is really uncomplicated-- everything you require is an element together with the class

.btn-group

to wrap in your buttons. This generates a horizontally adjusted group of buttons-- just in case you seek a vertically stacked group employ the

.btn-group-vertical

class alternatively.

The scale of the buttons inside of a group can be widely dealt with so with assigning a single class to all group you are able to acquire either large or small buttons inside it-- simply provide

.btn-group-sm

for small or else

.btn-group-lg

class to the

.btn-group

component and all the buttons inside will get the determined sizing. Unlike the former version you just can't tell the buttons in the group to present extra small considering that the

.btn-group-xs

class in no longer supported by Bootstrap 4 framework. You have the ability to eventually mix a number of button groups in to a toolbar simply covering them in a

.btn-toolbar

element or nest a group in another to place a dropdown element inside the child button group.

General illustration

Cover a variety of buttons by using

.btn

within

.btn-group

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

Example of the Button Toolbar

Mix sets of Bootstrap Button groups form into button toolbars for additional compound elements. Utilize utility classes functioning as required to space out groups, buttons, and more.

<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>

Don't hesitate to mix input groups with button groups in your toolbars. Much like the example aforementioned, you'll very likely need several utilities though to place stuffs properly.

<div class="btn-toolbar mb-3" 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="input-group">
    <span class="input-group-addon" id="btnGroupAddon">@</span>
    <input type="text" class="form-control" placeholder="Input group example" aria-describedby="btnGroupAddon">
  </div>
</div>

<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" 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="input-group">
    <span class="input-group-addon" id="btnGroupAddon2">@</span>
    <input type="text" class="form-control" placeholder="Input group example" aria-describedby="btnGroupAddon2">
  </div>
</div>

Measurements

Rather than utilizing button measurements classes to each button inside of a group, just add

.btn-group-*

to each

.btn-group

, featuring every one when nesting numerous groups

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>

Nesting

Set a

.btn-group

inside of another

.btn-group

when you want dropdown menus combined with a set of buttons. ( discover more here)

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

Vertical variety

Build a package of buttons appear up and down stacked rather than horizontally. Split button dropdowns are not maintained here.

<div class="btn-group-vertical">
  ...
</div>

Popovers plus Tooltips

Because of the certain setup ( and also other elements), a bit of significant casing is required for tooltips as well as popovers just within button groups. You'll need to indicate the option

container: 'body'

to keep away from undesirable side results ( including the element increasing wider and/or missing its own round corners once the tooltip or else popover is triggered). ( read here)

Other issue to note

To get a dropdown button within a

.btn-group

make an additional component holding the very same class inside it and wrap it around a

<button>

with the

.dropdown-toggle

class,

data-toggle="dropdown"

plus

type="button"

attributes. Next along with this

<button>

put a

<div>

with the class

.dropdown-menu

and generate the web links of your dropdown within it making sure you have certainly designated the

.dropdown-item

class to each one of them. That is really the quick and simple solution generating a dropdown in a button group. Optionally you have the ability to establish a split dropdown following the exact same routine simply putting extra regular button before the

.dropdown-toggle

element and removing the text inside it with the result that just the small triangle arrow remains.

Final thoughts

Basically that is certainly the method the buttons groups become developed by using probably the most well-known mobile friendly framework in its current version-- Bootstrap 4. These may be very useful not just display a number of possible options or a paths to take but additionally as a secondary navigation items taking place at certain locations of your web page featuring regular appearance and easing up the navigating and total user appearance.