Bootstrap Button groups responsive

Intro

Within the pages we create we regularly possess a number of available alternatives to expose or else a few actions which may possibly be ultimately required involving a particular item or a topic so it would undoubtedly be pretty beneficial in case they got an simple and practical way styling the controls responsible for the visitor having one way or a different within a small group with common look and styling.

To look after this kind of cases the most recent version of the Bootstrap framework-- Bootstrap 4 has full service to the so called Bootstrap Button groups set which commonly are just what the full name explain-- sets of buttons covered like a one feature with all the elements within looking almost the same and so it's convenient for the visitor to choose the right one and it's a lot less bothering for the sight because there is definitely no free area between the some components in the group-- it looks like a one button bar having several alternatives.

The best way to put into action the Bootstrap Button groups toogle:

Building a button group is definitely really simple-- all you really need is an element along with the class

.btn-group

to wrap in your buttons. This generates a horizontally aligned group of buttons-- in the event you want a vertically loaded group use the

.btn-group-vertical

class as an alternative.

The size of the buttons inside a group may possibly be widely handled so using appointing a single class to all group you have the ability to obtain either small or large buttons in it-- simply just incorporate

.btn-group-sm

for small-sized or else

.btn-group-lg

class to the

.btn-group

component and all the buttons inside will obtain the specified size. Compared to the former edition you aren't able to tell the buttons in the group to present extra small considering that the

.btn-group-xs

class in no more maintained by Bootstrap 4 framework. You can ultimately merge a several button groups into a toolbar just enclosing them inside a

.btn-toolbar

element or else nest a group in another to place a dropdown component into the child button group.

Standard example

Wrap a set of buttons having

.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 packs of Bootstrap Button groups set right into button toolbars for additional compound elements. Work with utility classes as demanded to space out groups, tabs, and even 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 mixture input groups along with button groups in your toolbars. Just like the good example mentioned earlier, you'll likely need special utilities though to space items correctly.

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

Sizing

Instead of employing button measurements classes to every button within a group, just include

.btn-group-*

to each and every

.btn-group

, featuring each one whenever 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

within an additional

.btn-group

when you wish dropdown menus combined with a set of buttons. ( useful reference)

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

Make a set of buttons appear like up and down stacked rather than horizontally. Split button dropdowns are not really upheld here.

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

Popovers and also Tooltips

Due to the specific setup (and a few other components), a bit of unique casing is required for tooltips and also popovers throughout button groups. You'll ought to determine the option

container: 'body'

to prevent unwanted side results (such as the element expanding wider and/or giving up its own round edges when the tooltip or popover is activated). ( get more info)

One more factor to consider

In order to get a dropdown button within a

.btn-group

produce one more feature holding the exact same class within it and wrap it around a

<button>

with the

.dropdown-toggle

class,

data-toggle="dropdown"

and

type="button"

attributes. Next together with this

<button>

put a

<div>

with the class

.dropdown-menu

and develop the hyperlinks of your dropdown within it making certain you have definitely specified the

.dropdown-item

class to every one of them. That is really the convenient and fast approach creating a dropdown in a button group. Optionally you can easily develop a split dropdown following the identical routine simply placing one more ordinary button right before the

.dropdown-toggle

component and cleaning out the text in it with the result that just the small triangle arrow remains.

Final thoughts

Generally that is simply the manner in which the buttons groups get produced with the aid of the most well-known mobile friendly framework in its recent edition-- Bootstrap 4. These can be pretty handy not only display a couple of feasible selections or a paths to take but additionally just as a additional navigation items occurring at particular places of your page coming with constant appearance and easing up the navigating and general user look.