Elements
These modular elements can be readily used and customized across pages and in different blocks.
Button groups <> show code
<!-- 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
Size Variations <> show code
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: