Buttons
Default Buttons#
Use the button classes on an
<a>,
<button> or
<input> element.
<!-- 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-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-purple">Purple</button>
<button type="button" class="btn btn-pink">Pink</button>
<button type="button" class="btn btn-orange">Orange</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
Rounded Buttons #
Add .rounded-pill to
default button to get rounded
corners.
<!-- Rounded Buttons -->
<button type="button" class="btn btn-primary rounded-pill">Primary</button>
<button type="button" class="btn btn-secondary rounded-pill">Secondary</button>
<button type="button" class="btn btn-success rounded-pill">Success</button>
<button type="button" class="btn btn-info rounded-pill">Info</button>
<button type="button" class="btn btn-warning rounded-pill">Warning</button>
<button type="button" class="btn btn-danger rounded-pill">Danger</button>
<button type="button" class="btn btn-dark rounded-pill">Dark</button>
<button type="button" class="btn btn-purple rounded-pill">Purple</button>
<button type="button" class="btn btn-pink rounded-pill">Pink</button>
<button type="button" class="btn btn-orange rounded-pill">Orange</button>
<button type="button" class="btn btn-light rounded-pill">Light</button>
<button type="button" class="btn btn-link rounded-pill">Link</button>
Outline Buttons #
Use a classes
.btn-outline-** to
quickly create a bordered buttons.
<!-- 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-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-purple">Purple</button>
<button type="button" class="btn btn-outline-pink">Pink</button>
<button type="button" class="btn btn-outline-orange">Orange</button>
Outline Rounded Buttons #
Use a classes
.btn-outline-** to
quickly create a bordered buttons.
<!-- Outline Buttons -->
<button type="button" class="btn btn-outline-primary rounded-pill">Primary</button>
<button type="button" class="btn btn-outline-secondary rounded-pill">Secondary</button>
<button type="button" class="btn btn-outline-success rounded-pill">Success</button>
<button type="button" class="btn btn-outline-info rounded-pill">Info</button>
<button type="button" class="btn btn-outline-warning rounded-pill">Warning</button>
Soft Buttons #
Use a classes
.btn-soft-** to quickly
create buttons with soft background.
<!-- Soft Buttons -->
<button type="button" class="btn btn-soft-primary">Primary</button>
<button type="button" class="btn btn-soft-secondary">Secondary</button>
<button type="button" class="btn btn-soft-success">Success</button>
<button type="button" class="btn btn-soft-info">Info</button>
<button type="button" class="btn btn-soft-warning">Warning</button>
Soft Rounded Buttons #
Use a classes
.rounded-pill** with
.btn-soft-** to quickly
create a Outline Soft buttons.
<button type="button" class="btn btn-soft-primary rounded-pill">Primary</button>
<button type="button" class="btn btn-soft-secondary rounded-pill">Secondary</button>
<button type="button" class="btn btn-soft-success rounded-pill">Success</button>
<button type="button" class="btn btn-soft-info rounded-pill">Info</button>
<button type="button" class="btn btn-soft-warning rounded-pill">Warning</button>
Button Width #
Create buttons with minimum width by
adding add .width-xs,
.width-sm,
.width-md,
.width-lg or
.width-xl.
<button type="button" class="btn btn-primary width-xl">Extra Large</button>
<button type="button" class="btn btn-secondary width-lg">Large</button>
<button type="button" class="btn btn-success width-md">Middle</button>
<button type="button" class="btn btn-info width-sm">Small</button>
<button type="button" class="btn btn-warning width-xs">Xs</button>
Button Sizes #
Add .btn-lg,
.btn-sm for additional
sizes.
<!-- Button Sizes -->
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-secondary">Normal</button>
<button type="button" class="btn btn-success btn-sm">Small</button>
Disabled Button #
Add disabled attribute
to buttons.
<!-- Button Disabled -->
<button type="button" class="btn btn-primary" disabled>Primary</button>
<button type="button" class="btn btn-secondary" disabled>Secondary</button>
<button type="button" class="btn btn-success" disabled>Success</button>
<button type="button" class="btn btn-info" disabled>info</button>
<button type="button" class="btn btn-warning" disabled>Warning</button>
Icon Button #
Icon only Button.
<!-- Icon Button -->
<button type="button" class="btn btn-primary">
<i class="bx bx-heart"></i>
</button>
<button type="button" class="btn btn-secondary">
<i class="bx bx-user-voice"></i>
</button>
<button type="button" class="btn btn-success">
<i class="bx bx-check-double"></i>
</button>
<button type="button" class="btn btn-info">
<i class="bx bx-cloud me-1"></i>Cloude Hosting
</button>
<button type="button" class="btn btn-warning">
<i class="bx bx-info-circle me-1"></i>Warning
</button>
Button Group #
Wrap a series of buttons with
.btn in
.btn-group.
<!-- btn-group horizontal -->
<div class="btn-group mb-1 me-1">
<button type="button" class="btn btn-light">Left</button>
<button type="button" class="btn btn-light">Middle</button>
<button type="button" class="btn btn-light">Right</button>
</div>
<div class="btn-group mb-1 me-1">
<button type="button" class="btn btn-light">1</button>
<button type="button" class="btn btn-light">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-light">4</button>
</div>
<div class="btn-group mb-1 me-1">
<button type="button" class="btn btn-light">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-light">7</button>
<button id="dropdown" type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdown">
<li><a class="dropdown-item" href="javascript:void(0);">Dropdown link</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Dropdown link</a></li>
</ul>
</div>
<!-- btn-group vertical -->
<div class="btn-group-vertical me-4">
<button type="button" class="btn btn-light">Top</button>
<button type="button" class="btn btn-light">Middle</button>
<button type="button" class="btn btn-light">Bottom</button>
</div>
<div class="btn-group-vertical">
<button type="button" class="btn btn-light">Button 1</button>
<button type="button" class="btn btn-light">Button 2</button>
<button id="verticalDropdown" type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Button 3
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="verticalDropdown">
<li><a class="dropdown-item" href="javascript:void(0);">Dropdown link</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Dropdown link</a></li>
</ul>
</div>
Block Button #
Create block level buttons by adding
class .d-grid to parent
div.
<!-- Block Button -->
<div class="d-grid gap-2">
<button type="button" class="btn btn-primary btn-lg">Block Button</button>
<button type="button" class="btn btn-secondary">Block Button</button>
<button type="button" class="btn btn-light btn-sm">Block Button</button>
</div>