Buttons
Discover versatile button styles, designed for seamless interactions and adaptable to any design requirement.
Buttons Colors
baikal use.btnclass for default button style. Customize the color of a button using.btn-* and.btn-outline-*. You can use the following classes.
For detail documentation, View Buttons on Bootstrap ⟶
Solid Buttons
.btn-primary .btn-secondary .btn-success .btn-info .btn-warning .btn-danger .btn-light .btn-dark<a class="mb-3 me-3 btn btn-primary" href="#!">.btn-primary</a>
<a class="mb-3 me-3 btn btn-secondary" href="#!">.btn-secondary</a>
<a class="mb-3 me-3 btn btn-success" href="#!">.btn-success</a>
<a class="mb-3 me-3 btn btn-info" href="#!">.btn-info</a>
<a class="mb-3 me-3 btn btn-warning" href="#!">.btn-warning</a>
<a class="mb-3 me-3 btn btn-danger" href="#!">.btn-danger</a>
<a class="mb-3 me-3 btn btn-light" href="#!">.btn-light</a>
<a class="mb-3 me-3 btn btn-dark" href="#!">.btn-dark</a>Outline Buttons
.btn-outline-primary .btn-outline-secondary .btn-outline-success .btn-outline-info .btn-outline-warning .btn-outline-danger .btn-outline-light .btn-outline-dark<a class="mb-3 me-3 btn btn-outline-primary" href="#!">.btn-outline-primary</a>
<a class="mb-3 me-3 btn btn-outline-secondary" href="#!">.btn-outline-secondary</a>
<a class="mb-3 me-3 btn btn-outline-success" href="#!">.btn-outline-success</a>
<a class="mb-3 me-3 btn btn-outline-info" href="#!">.btn-outline-info</a>
<a class="mb-3 me-3 btn btn-outline-warning" href="#!">.btn-outline-warning</a>
<a class="mb-3 me-3 btn btn-outline-danger" href="#!">.btn-outline-danger</a>
<a class="mb-3 me-3 btn btn-outline-light" href="#!">.btn-outline-light</a>
<a class="mb-3 me-3 btn btn-outline-dark" href="#!">.btn-outline-dark</a>Buttons Sizes
Customize the size of a button using .btn-xs,.btn-sm and .btn-lg
.btn-xs
.btn-sm
.btn
.btn-lg
<a class="btn btn-outline-primary btn-xs me-3 mb-3" href="#!">.btn-xs</a>
<a class="btn btn-outline-primary btn-sm me-3 mb-3" href="#!">.btn-sm</a>
<a class="btn btn-outline-primary me-3 mb-3" href="#!">.btn</a>
<a class="btn btn-outline-primary btn-lg mb-3" href="#!">.btn-lg </a>Buttons Shapes
Customize the shape of a button using .btn and .btn-capsule
<a href="#!" class="btn btn-primary">.btn</a>
<a href="#!" class="btn btn-primary rounded-capsule">.btn-capsule</a>
Button Group
Group a series of buttons together on a single line with the button group. Wrap a series of buttons with .btn in.btn-group
<div class="btn-group btn-group-vertical" role="group"> <button class="btn btn-outline-primary"> .btn-outline-primary </button><button class="btn btn-outline-primary"> .btn-outline-primary </button><button class="btn btn-outline-primary"> .btn-outline-primary</button></div>