Bootstrap Buttons - Complete Guide with Examples
Interactive action components for forms, navigation, dropdowns, toggles, and real-world UI flows.
Introduction
Bootstrap Buttons are interactive UI components used for actions like submitting forms, triggering modals, navigation, and user interactions.
Bootstrap provides a wide range of button styles, sizes, states, and behaviors that work consistently across browsers and devices.
Buttons are built using the
.btn base class with modifier classes.
1-3. Basic Styles, Outline, and Sizes
Basic Button Styles
Contextual button variants communicate intent: primary for main actions, success for positive outcomes,
danger for destructive actions, and neutral styles for secondary flows. Using the right semantic variant improves UX clarity.
<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</button>
Outline Buttons
Outline buttons are ideal when the action should be available but visually less dominant than the primary CTA. They preserve hierarchy while still being clearly clickable.
<button type="button" class="btn btn-outline-primary">Outline Primary</button>
<button type="button" class="btn btn-outline-secondary">Outline Secondary</button>
<button type="button" class="btn btn-outline-success">Outline Success</button>
<button type="button" class="btn btn-outline-danger">Outline Danger</button>
<button type="button" class="btn btn-outline-warning">Outline Warning</button>
<button type="button" class="btn btn-outline-info">Outline Info</button>
<button type="button" class="btn btn-outline-light">Outline Light</button>
<button type="button" class="btn btn-outline-dark">Outline Dark</button>
Button Sizes + Block Buttons
Size modifiers adapt controls to context: larger buttons for touch-first or high-priority actions, smaller buttons for compact toolbars. Block buttons are useful in forms, mobile layouts, and onboarding flows where clear action rows improve usability.
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Block button 1</button>
<button class="btn btn-success" type="button">Block button 2</button>
</div>
<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-primary" type="button">Centered block button</button>
</div>4-6. Disabled, Active, and Icon Buttons
Disabled buttons should prevent accidental actions when prerequisites are unmet (for example incomplete forms).
Active state highlights current filters, selected tabs, or pressed options. Icons reduce cognitive load by visually hinting at action purpose.
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<button type="button" class="btn btn-secondary" disabled>Disabled Secondary</button>
<button type="button" class="btn btn-outline-success" disabled>Disabled Outline</button>
<a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true">Disabled link button</a>
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-secondary active">Active Secondary</button>
<a href="#" class="btn btn-success active" aria-current="page">Active Link</a>
Bootstrap Icons CDN (required for
bi icons)
Include the icon library once in your page <head>. For accessibility, icon-only buttons should always include an aria-label.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"><button class="btn btn-primary"><i class="bi bi-plus-circle"></i> Add Item</button>
<button class="btn btn-success">Submit <i class="bi bi-check-lg"></i></button>
<button class="btn btn-danger" aria-label="Delete"><i class="bi bi-trash"></i></button>
<button class="btn btn-outline-info"><i class="bi bi-download"></i> Download</button>7-9. Groups, Toolbars, and Dropdown Buttons
Button groups bundle related actions into a single control region. Toolbars combine multiple groups for dense command UIs.
Dropdown buttons are useful when there is a primary action plus optional secondary actions.
<div class="btn-group" role="group" aria-label="Basic button group">
<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>
<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-primary">Top</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Bottom</button>
</div><div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group">
<button type="button" class="btn btn-outline-secondary">1</button>
<button type="button" class="btn btn-outline-secondary">2</button>
<button type="button" class="btn btn-outline-secondary">3</button>
</div>
<div class="btn-group me-2" role="group">
<button type="button" class="btn btn-outline-secondary">4</button>
<button type="button" class="btn btn-outline-secondary">5</button>
</div>
</div><div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown button</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
<ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Action</a></li></ul>
</div>10-13. Toggle, Loading, Element Types, and Badges
Toggle buttons are best for selectable states (single or multiple choice). Spinner buttons communicate ongoing work and prevent double submission.
Bootstrap styles can be applied consistently across
<button>, <a>, and <input> elements.
Badges inside buttons help surface counts like messages, alerts, or notifications.
<div class="btn-group" role="group" aria-label="Checkbox button group">
<input type="checkbox" class="btn-check" id="btn-check-1" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-1">Option 1</label>
<input type="checkbox" class="btn-check" id="btn-check-2" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-2">Option 2</label>
</div>
<div class="btn-group" role="group" aria-label="Radio button group">
<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
<label class="btn btn-outline-secondary" for="option1">Radio 1</label>
<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
<label class="btn btn-outline-secondary" for="option2">Radio 2</label>
</div><button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
<span role="status"> Loading...</span>
</button>
<button class="btn btn-success" type="button" disabled>
<span class="spinner-border spinner-border-sm" aria-label="Loading"></span>
</button>
<button class="btn btn-danger" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
<span role="status"> Processing...</span>
</button><a class="btn btn-primary" href="#" role="button">Link button</a>
<input class="btn btn-success" type="submit" value="Submit">
<input class="btn btn-secondary" type="reset" value="Reset">
<input class="btn btn-info" type="button" value="Button Input"><button type="button" class="btn btn-primary position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">99+</span>
</button>
<button type="button" class="btn btn-secondary">
Notifications <span class="badge bg-primary">7</span>
</button>14-16. Rounded/Responsive Buttons and Real-World Use Cases
Shape utilities such as
rounded-pill and rounded-circle help match brand personality.
Responsive button layouts ensure controls remain usable across device sizes. The real-world snippets below show how these patterns combine in practical UI flows.
<button class="btn btn-primary rounded-0">Square Button</button>
<button class="btn btn-success rounded-pill px-4">Pill Button</button>
<button class="btn btn-danger rounded-circle" style="width: 50px; height: 50px;">X</button>
<button class="btn btn-outline-primary rounded-pill px-5 py-2">Large Pill</button>
<div class="d-flex flex-column flex-md-row gap-2">
<button class="btn btn-primary">Button 1</button>
<button class="btn btn-secondary">Button 2</button>
<button class="btn btn-success">Button 3</button>
</div><form>
<div class="mb-3"><label for="email" class="form-label">Email address</label><input type="email" class="form-control" id="email"></div>
<div class="mb-3"><label for="password" class="form-label">Password</label><input type="password" class="form-control" id="password"></div>
<div class="d-grid gap-2">
<button type="submit" class="btn btn-primary btn-lg">Sign Up</button>
<button type="reset" class="btn btn-outline-secondary">Clear Form</button>
</div>
</form><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch Demo Modal</button>
<div class="modal fade" id="exampleModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><h5 class="modal-title">Modal Title</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
<div class="modal-body">Modal content goes here.</div>
<div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div>
</div>
</div>
</div><div class="card">
<div class="card-body">
<h5 class="card-title">Product Title</h5>
<p class="card-text">Product description goes here.</p>
<div class="d-flex gap-2">
<button class="btn btn-success flex-grow-1">Buy Now</button>
<button class="btn btn-outline-secondary">Add to Cart</button>
<button class="btn btn-outline-danger"><i class="bi bi-heart"></i></button>
</div>
</div>
</div><div class="btn-group" role="group" aria-label="Pagination">
<button class="btn btn-outline-primary">«</button>
<button class="btn btn-primary">1</button>
<button class="btn btn-outline-primary">2</button>
<button class="btn btn-outline-primary">3</button>
<button class="btn btn-outline-primary">4</button>
<button class="btn btn-outline-primary">5</button>
<button class="btn btn-outline-primary">»</button>
</div>Quick Reference Summary
| Purpose | Class / Attribute |
|---|---|
| Base button | .btn |
| Colors | .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-light, .btn-dark |
| Outline variants | .btn-outline-* |
| Sizes | .btn-lg, .btn-sm |
| Disabled (button) | disabled attribute |
| Disabled (link) | .disabled class |
| Active state | .active class |
| Button groups | .btn-group, .btn-group-vertical |
| Block buttons | .d-grid with .gap-2 |
| Dropdown toggle | .dropdown-toggle + data-bs-toggle="dropdown" |
| Toggle buttons | .btn-check + <label> |
| Link-style button | .btn-link |