Default Buttons


<button type="button" class="btn btn-primary mt-2">Primary</button>

Default Buttons Rounded Shape


<button type="button" class="btn btn-primary rounded-pill mt-2">Primary</button>

Outline Buttons


<button type="button" class="btn btn-outline-primary mt-2">Primary</button>

Rounded Outline Buttons


<button type="button" class="btn btn-outline-primary rounded-pill mt-2">Primary</button>

Default Buttons


<button type="button" class="mt-2 btn btn-primary btn-with-icon"><i class="ri-bill-fill"></i>Primary</button>

Default Buttons Rounded Shape


<button type="button" class="mt-2 btn btn-primary rounded-pill btn-with-icon"><i class="ri-bill-fill"></i>Primary</button>

Outline Buttons


<button type="button" class="btn btn-outline-primary mt-2 btn-with-icon"><i class="ri-heart-line"></i>Primary</button>

Rounded Outline Buttons


<button type="button" class="btn btn-outline-primary rounded-pill mt-2 btn-with-icon"><i class="ri-heart-line"></i>Primary</button>

Button Tags


<a class="mt-2 btn btn-primary" href="#" role="button">Link</a>
<button class="mt-2 btn btn-success" type="submit">Button</button>
<input class="mt-2 btn btn-danger" type="button" value="Input">
<input class="mt-2 btn btn-warning" type="submit" value="Submit">
<input class="mt-2 btn btn-info" type="reset" value="Reset">
Link

Buttons Sizes


<button type="button" class="btn btn-primary btn-sm mr-2">Small Button</button>
<button type="button" class="btn btn-success mr-2">Button</button>
<button type="button" class="btn btn-info btn-lg">Large Button</button>

Block Buttons


<button type="button" class="btn btn-primary btn-block">Block level button</button>

Icons Buttons


<button type="button" class="btn btn-primary mt-2"><i class="ri-heart-fill pr-0"></i></button>
<button type="button" class="btn btn-primary mt-2 btn-with-icon"><i class="ri-heart-fill"></i>Buttons</button>

Social Disabled State


<button type="button" class="mt-2 btn btn-primary" disabled>Primary button</button>

Buttons Toggle States


<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" >
Single toggle
</button>

Default Buttons Active


<button type="button" class="btn btn-primary active mt-2">Active</button>
<button type="button" class="btn btn-secondary active mt-2">Active</button>
<button type="button" class="btn btn-warning active mt-2">Active</button>
<button type="button" class="btn btn-accent disabled mt-2" disabled="">Disabled</button>
<button type="button" class="btn btn-primary disabled mt-2" disabled="">Disabled</button>
<button type="button" class="btn btn-outline-primary disabled mt-2" disabled="">Disabled</button>

Button Group Sizing


<button type="button" class="btn btn-primary mt-2">Left</button>

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>

Button Dropdown


<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
   <button type="button" class="btn btn-primary">1</button>
   <button type="button" class="btn btn-primary">2</button>
   <div class="btn-group" role="group">
      <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
         aria-haspopup="true" aria-expanded="false">
         Dropdown
      </button>
      <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
         <a class="dropdown-item" href="#">Dropdown link</a>
         <a class="dropdown-item" href="#">Dropdown link</a>
      </div>
   </div>
</div>