LOADING

Getting Started

Introduction Source and Credits

Foundation

Support Changelog

Components

Alerts Badge Breadcrumb Buttons New Button group Card Carousel Collapse Dropdowns Hot Forms Jumbotron List group Media object Modal Navigations Pagination PopoversProgress Scrollspy Spinners Hot Tooltips

Section

Pages

Button Group

Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.

Basic example

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

Button Toolbar

         
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2 mt-4" role="group" aria-label="First group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
<button type="button" class="btn btn-primary">4</button>
</div>
<div class="btn-group mr-2 mt-4" role="group" aria-label="Second group">
<button type="button" class="btn btn-primary">5</button>
<button type="button" class="btn btn-primary">6</button>
<button type="button" class="btn btn-primary">7</button>
</div>
<div class="btn-group mt-4" role="group" aria-label="Third group">
<button type="button" class="btn btn-primary">8</button>
</div>
</div>

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu dropdown-menu-sm">
<a class="dropdown-item" href="#">Table</a> 
<a class="dropdown-item" href="#">Form</a> 
<a class="dropdown-item" href="#"> creative Button</a>  
<a class="dropdown-item" href="#">Servise Price</a> 
</div>
</div>
</div>

Vertical Small

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button></div>

Vertical Larg

Table Form creative Button Servise Price
Table Form creative Button Servise Price 
<div class="btn-group-vertical">
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Table</a> 
<a class="dropdown-item" href="#">Form</a> 
<a class="dropdown-item" href="#"> creative Button</a>  
<a class="dropdown-item" href="#">Servise Price</a> 
</div>
</div>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop2" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Table</a> 
<a class="dropdown-item" href="#">Form</a> 
<a class="dropdown-item" href="#"> creative Button</a>  
<a class="dropdown-item" href="#">Servise Price</a> 
</div>
</div>
</div>
</div>