Buttons
Use the .btn class to create a button. You can also use the
Default Buttons
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
Rounded Buttons
<button type="button" class="btn rounded btn-primary">Primary</button>
<button type="button" class="btn rounded btn-secondary">Secondary</button>
<button type="button" class="btn rounded btn-success">Success</button>
<button type="button" class="btn rounded btn-danger">Danger</button>
<button type="button" class="btn rounded btn-warning">Warning</button>
<button type="button" class="btn rounded btn-info">Info</button>
<button type="button" class="btn rounded btn-light">Light</button>
<button type="button" class="btn rounded btn-dark">Dark</button>
<button type="button" class="btn rounded btn-link">Link</button>
Light Buttons
<button type="button" class="btn btn-primary-subtle">Primary</button>
<button type="button" class="btn btn-secondary-subtle">Secondary</button>
<button type="button" class="btn btn-success-subtle">Success</button>
<button type="button" class="btn btn-danger-subtle">Danger</button>
<button type="button" class="btn btn-warning-subtle">Warning</button>
<button type="button" class="btn btn-info-subtle">Info</button>
<button type="button" class="btn btn-light-subtle">Light</button>
<button type="button" class="btn btn-dark-subtle">Dark</button>
<button type="button" class="btn btn-link">Link</button>
Light Rounded Buttons
<button type="button" class="btn rounded btn-primary-subtle">Primary</button>
<button type="button" class="btn rounded btn-secondary-subtle">Secondary</button>
<button type="button" class="btn rounded btn-success-subtle">Success</button>
<button type="button" class="btn rounded btn-danger-subtle">Danger</button>
<button type="button" class="btn rounded btn-warning-subtle">Warning</button>
<button type="button" class="btn rounded btn-info-subtle">Info</button>
<button type="button" class="btn rounded btn-light-subtle">Light</button>
<button type="button" class="btn rounded btn-dark-subtle">Dark</button>
<button type="button" class="btn rounded btn-link">Link</button>
Outline Buttons
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
Outline Rounded Buttons
<button type="button" class="btn rounded btn-outline-primary">Primary</button>
<button type="button" class="btn rounded btn-outline-secondary">Secondary</button>
<button type="button" class="btn rounded btn-outline-success">Success</button>
<button type="button" class="btn rounded btn-outline-danger">Danger</button>
<button type="button" class="btn rounded btn-outline-warning">Warning</button>
<button type="button" class="btn rounded btn-outline-info">Info</button>
<button type="button" class="btn rounded btn-outline-light">Light</button>
<button type="button" class="btn rounded btn-outline-dark">Dark</button>
Disable Buttons
<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
<button type="button" class="btn btn-outline-secondary" disabled>Button</button
Loading Buttons
<button class="btn btn-primary btn-loader"> <span class="me-2">Loading</span> <span
class="loading"><span class="material-symbols-outlined">
clock_loader_10
</span></span> </button>
<button class="btn btn-secondary btn-loader"> <span class="me-2">Loading</span> <span
class="loading"><span class="material-symbols-outlined">
clock_loader_10
</span></span> </button>
<button class="btn btn-success btn-loader"> <span class="me-2">Loading</span> <span
class="loading"><span class="material-symbols-outlined">
clock_loader_10
</span></span> </button>
<button class="btn btn-danger btn-loader"> <span class="me-2">Loading</span> <span
class="loading"><span class="material-symbols-outlined">
clock_loader_10
</span></span> </button>
<button class="btn btn-warning btn-loader"> <span class="me-2">Loading</span> <span
class="loading"><span class="material-symbols-outlined">
clock_loader_10
</span></span> </button>
<button class="btn btn-info btn-loader"> <span class="me-2">Loading</span> <span
class="loading"><span class="material-symbols-outlined">clock_loader_20</span> </button>
<button class="btn btn-light btn-loader"> <span class="me-2">Loading</span> <span
class="loading"><span class="material-symbols-outlined">clock_loader_20</span> </button>
<button class="btn btn-dark btn-loader"> <span class="me-2">Loading</span> <span
class="loading"><span class="material-symbols-outlined">clock_loader_20</span> </button>
Icon Buttons
<div class="btn-list d-md-flex d-block gap-5">
<div class="d-flex flex-wrap align-items-center gap-2">
<button class="btn btn-primary icon-40 rounded">
<span class="material-symbols-outlined">add</span>
</button>
<button class="btn btn-info icon-40 rounded">
<span class="material-symbols-outlined">add</span>
</button>
<button class="btn btn-purple icon-40 rounded">
<span class="material-symbols-outlined">add</span>
</button>
<button class="btn btn-warning icon-40 rounded">
<span class="material-symbols-outlined">add</span>
</button>
</div>
<div class="d-flex flex-wrap align-items-center gap-2">
<button class="btn btn-primary-subtle icon-40">
<span class="material-symbols-outlined">add</span>
</button>
<button class="btn btn-info-subtle icon-40">
<span class="material-symbols-outlined">add</span>
</button>
<button class="btn btn-purple-subtle icon-40">
<span class="material-symbols-outlined">add</span>
</button>
<button class="btn btn-warning-subtle icon-40">
<span class="material-symbols-outlined">add</span>
</button>
</div>
<div class="d-flex flex-wrap align-items-center gap-2">
<button class="btn btn-outline-primary icon-40">
<span class="material-symbols-outlined">add</span>
</button>
<button class="btn btn-outline-info icon-40">
<span class="material-symbols-outlined">add</span>
</button>
<button class="btn btn-outline-purple icon-40">
<span class="material-symbols-outlined">add</span>
</button>
<button class="btn btn-outline-warning icon-40">
<span class="material-symbols-outlined">add</span>
</button>
</div>
</div>
Icon Size Buttons
<div class="btn-list d-md-flex d-block gap-5">
<div class="d-flex flex-wrap align-items-center gap-2">
<button class="btn btn-primary icon-20 rounded">
<span class="material-symbols-outlined">add</span>
</button>
<button class="btn btn-info icon-30 rounded">
<span class="material-symbols-outlined">add</span>
</button>
<button class="btn btn-purple icon-40 rounded">
<span class="material-symbols-outlined">add</span>
</button>
</div>
<div class="d-flex flex-wrap align-items-center gap-2">
<button class="btn btn-primary-subtle icon-20">
<span class="material-symbols-outlined">add</span>
</button>
<button class="btn btn-info-subtle icon-30">
<span class="material-symbols-outlined">add</span>
</button>
<button class="btn btn-purple-subtle icon-40">
<span class="material-symbols-outlined">add</span>
</button>
</div>
<div class="d-flex flex-wrap align-items-center gap-2">
<button class="btn btn-outline-primary icon-20">
<span class="material-symbols-outlined">add</span>
</button>
<button class="btn btn-outline-info icon-30">
<span class="material-symbols-outlined">add</span>
</button>
<button class="btn btn-outline-purple icon-40">
<span class="material-symbols-outlined">add</span>
</button>
</div>
</div>
Buttons Size
<button class="btn btn-sm btn-primary rounded">Small</button>
<button class="btn btn-primary rounded">Default</button>
<button class="btn btn-lg btn-primary rounded">Large</button>
Buttons Width
<button class="btn px-1 btn-primary rounded">Small</button>
<button class="btn px-3 btn-primary rounded">Default</button>
<button class="btn px-5 btn-primary rounded">Large</button>
block Buttons
<div class="d-grid gap-3">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
<div class="d-grid gap-2 d-md-block">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button class="btn btn-primary me-md-2" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
Custom Buttons
<button class="btn btn-primary-subtle border-0 border-2 border-bottom border-primary">Border
Bottom</button>
<button class="btn btn-info-subtle border-0 border-2 border-top border-info">Border
Top</button>
<button class="btn btn-purple-subtle border-0 border-2 border-start border-purple">Border
Start</button>
<button class="btn btn-pink-subtle border-0 border-2 border-end border-pink">Border
End</button>