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>