Bootstrap Button groups grid

Overview

Inside the pages we generate we often have a several available opportunities to present or else a couple of actions which in turn can be ultimately required concerning a particular item or a topic so it would most likely be quite helpful in the event that they got an handy and uncomplicated solution styling the controls tasked with the site visitor having one route or yet another inside of a compact group with common appeal and styling.

To deal with this kind of cases the latest version of the Bootstrap framework-- Bootstrap 4 has entire assistance to the so knowned as Bootstrap Button groups panel which in turn generally are precisely what the name mention-- sets of buttons enclosed just as a single feature with all the elements in seeming nearly the very same so it is definitely uncomplicated for the site visitor to select the right one and it's a lot less worrieding for the vision given that there is no free area in between the some components in the group-- it appears as a single button bar having several selections.

Exactly how to utilize the Bootstrap Button groups responsive:

Building a button group is certainly really easy-- everything you need is an element together with the class

.btn-group

to wrap in your buttons. This specific generates a horizontally aligned group of buttons-- in the event that you want a up and down stacked group use the

.btn-group-vertical

class alternatively.

The size of the buttons inside of a group can possibly be widely controlled so using designating a single class to the whole group you can certainly get either small or large buttons in it-- simply bring in

.btn-group-sm

for small-sized or

.btn-group-lg

class to the

.btn-group

component and all the buttons inside will obtain the defined sizing. As opposed to the previous version you can't tell the buttons in the group to expose extra small because the

.btn-group-xs

class in no longer sustained by Bootstrap 4 framework. You can eventually mix a couple of button groups in to a toolbar simply just covering them inside a

.btn-toolbar

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

Standard illustration

Cover a group of buttons using

.btn

inside of

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

Instance of the Button Toolbar

Merge packs of Bootstrap Button groups dropdown right into button toolbars for extra system elements. Apply utility classes functioning as needed to space out groups, buttons, 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 with button groups in your toolbars. Similar to the example aforementioned, you'll likely need to have some utilities though to space items appropriately.

<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

Instead of using button scale classes to each button inside of a group, just include

.btn-group-*

to each and every

.btn-group

, incorporating each 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 one more

.btn-group

once you really want dropdown menus merged with a series of buttons. ( more helpful hints)

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

Upright version

Produce a group of buttons turn up upright stacked as opposed to horizontally. Split button dropdowns are not assisted here.

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

Popovers and also Tooltips

Due to the special execution ( plus a few other elements), a bit of unique casing is required for tooltips and also popovers inside button groups. You'll must indicate the option

container: 'body'

to stay away from unwanted lesser results ( like the element growing larger and/or getting rid of its rounded edges when the tooltip or popover is caused). ( learn more here)

One more factor to take note

To get a dropdown button inside a

.btn-group

create an additional component carrying the very same class inside it and wrap it around a

<button>

using the

.dropdown-toggle

class,

data-toggle="dropdown"

and

type="button"

attributes. Next along with this

<button>

put a

<div>

with the class

.dropdown-menu

and generate the urls of your dropdown within it being sure you have actually specified the

.dropdown-item

class to every one of them. That is really the fast and easy way creating a dropdown within a button group. Optionally you are able to build a split dropdown following the identical routine simply placing extra regular button right before the

.dropdown-toggle

element and getting rid of the text in it so only the small triangle pointer remains.

Final thoughts

Generally that is certainly the method the buttons groups get designed by using the most well-known mobile friendly framework in its recent version-- Bootstrap 4. These can possibly be quite handy not only exhibit a number of attainable options or a courses to take but additionally as a additional navigation items taking place at particular locations of your webpage having regular look and easing up the navigating and whole user appeal.