Bootstrap Button Groups - Bootstrap

What are button groups?

Multiple buttons loaded together on a single line is called Button groups. This is beneficial when you want to place items like alignment buttons collected. You can add on optional JavaScript radio and checkbox style behavior with Bootstrap Button Plugin.

Next table summarizes the significant classes Bootstrap provides to use button groups −

Class

Description

Code Sample

.btn-group

This class is used for a basic button group. Wrap a series of buttons with class.btnin.btn-group.

<div class = "btn-group">

<button type = "button" class = "btn btn-default">Button1</button>

<button type = "button" class = "btn btn-default">Button2</button>

</div>

.btn-toolbar

This helps to combine sets of <div class = "btn-group"> into a <div class = "btn-toolbar"> for more complex components.

<div class = "btn-toolbar" role = "toolbar">

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

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

</div>

.btn-group-lg, .btn-group-sm, .btn-group-xs

These classes can be applied to button group instead of resizing each button.

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

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

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

.btn-group-vertical

This class make a set of buttons appear vertically stacked rather than horizontally.

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

...

</div>

Simple Button Group

The next instance proves the use of class .btn-group discussed in the overhead table −

Button Toolbar

The subsequent instance proves the use of class .btn-toolbar discussed in the beyond table −

Button Size

The next sample proves the use of class .btn-group-* discussed in the beyond table −


Nesting

You can shell button groups inside additional button group i.e, place a .btn-group within another .btn-group. This is through when you need dropdown menus mixed with a series of buttons.


Vertical Button group

The next instance shows the use of class .btn-group-vertical discussed in the overhead table −

vertical


All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Bootstrap Topics