Elements

  1. Home
  2. Components

	<!-- Default button group -->
	<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>

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

	<!-- Rounded button group -->
	<div class="btn-group" role="group" aria-label="Basic example">
	  <button type="button" class="btn btn-success btn-rounded">Left</button>
	  <button type="button" class="btn btn-success btn-rounded">Middle</button>
	  <button type="button" class="btn btn-success btn-rounded">Right</button>
	</div>
How to use
  • Wrap a series of buttons with .btn into a .btn-group parent wrapper.

Example:

Outlined button group

Rounded button group

btn-search 

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

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

	<!-- Default size button group -->
	<div class="btn-group" role="group" aria-label="Basic example">
	  <button type="button" class="btn btn-info btn-default">Left</button>
	  <button type="button" class="btn btn-info btn-default">Middle</button>
	  <button type="button" class="btn btn-info btn-default">Right</button>
	</div>

	<!-- Large button group -->
	<div class="btn-group" role="group" aria-label="Basic example">
	  <button type="button" class="btn btn-danger btn-lg">Left</button>
	  <button type="button" class="btn btn-danger btn-lg">Middle</button>
	  <button type="button" class="btn btn-danger btn-lg">Right</button>
	</div>
How to use
  • Based on different button size use .btn-sm ,.btn-mid , .btn-lg , .btn-default class with .btn

Example:

Accessories
BRANDS
Accessories
Get in Touch

© 2017 Copyright Bigbag Store Bootstrap Template by Abdus.