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>

	<!-- Mixed styles -->
	<div class="btn-group" role="group" aria-label="Basic mixed styles example">
	  <button type="button" class="btn btn-danger">Left</button>
	  <button type="button" class="btn btn-warning">Middle</button>
	  <button type="button" class="btn btn-success">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


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

	<!-- Mixed styles -->
	<div class="btn-group" role="group" aria-label="Basic mixed styles example">
	  <button type="button" class="btn btn-danger btn-lg">Left</button>
	  <button type="button" class="btn btn-warning btn-lg">Middle</button>
	  <button type="button" class="btn btn-success 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

© Copyright Bigbag Store Bootstrap Template by Abdus.