Elements


These modular elements can be readily used and customized across pages and in different blocks.


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