Loading...

Buttons Colors

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

Inverted Buttons

.btn-white .btn-outline-white 
<div class="p-3 bg-1100">
  <a class="btn btn-white me-3" href="#!">.btn-white</a>
  <a class="btn btn-outline-white" href="#!"> .btn-outline-white </a>
</div>

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

.btn .btn-capsule 
 <a href="#!" class="btn btn-primary">.btn</a>
 <a href="#!" class="btn btn-primary rounded-capsule">.btn-capsule</a>
Play Buttons

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-light"> .btn-outline-light </button><button class="btn btn-outline-light"> .btn-outline-light </button><button class="btn btn-outline-light"> .btn-outline-light</button></div>

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 w-100" role="group"> <button class="btn btn-outline-light"> .btn-outline-light </button><button class="btn btn-outline-light"> .btn-outline-light </button><button class="btn btn-outline-light"> .btn-outline-light</button></div>