Bootstrap Buttons and Badges
Introduction to Buttons
Bootstrap provides a variety of button styles and sizes for actions in forms, dialogs, and more. These buttons can be customized and extended to fit your design needs.
Bootstrap Buttons: Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Button Variants
Bootstrap includes several predefined button styles, each serving its own semantic purpose.
<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>Outline Buttons
Need a button, but not the hefty background colors? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors.
<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>Button Sizes
Bootstrap provides different button sizes to match your design needs.
Large Buttons
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>Small Buttons
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>Button States
Active State
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-secondary active">Active Secondary</button>Disabled State
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<button type="button" class="btn btn-secondary" disabled>Disabled Secondary</button>
Note: For
<a> elements, the .disabled class should be used instead of the disabled attribute.
Button with Icons
Enhance your buttons with icons for better visual cues.
<button type="button" class="btn btn-primary">
<i class="bi bi-download"></i> Download
</button>
<button type="button" class="btn btn-success">
<i class="bi bi-check-circle"></i> Confirm
</button>
<button type="button" class="btn btn-danger">
<i class="bi bi-trash"></i> Delete
</button>
Note: This example uses Bootstrap Icons. Make sure to include the Bootstrap Icons CSS in your project.
Button Groups
Group a series of buttons together on a single line with the button group.
Basic 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 Toolbar
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
</div>
<div class="btn-group me-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">4</button>
<button type="button" class="btn btn-secondary">5</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-info">6</button>
</div>
</div>Introduction to Badges
Badges are small count and labeling components that are used to add extra information to an element.
Bootstrap Badges: Use badges to highlight new or unread items, counts, or labels.
Badge Variants
Bootstrap includes several predefined badge styles, each serving its own semantic purpose.
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>Pill Badges
Use the .rounded-pill utility class to make badges more rounded.
Primary
Secondary
Success
Danger
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>Badges in Context
Badges can be used in various contexts to provide additional information.
Badges with Headings
Example heading New
Example heading New
Example heading New
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>Badges with Buttons
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-secondary">4</span>
</button>Badges in List Groups
- Inbox 12
- Sent 50
- Spam 99+
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Inbox
<span class="badge bg-primary rounded-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Sent
<span class="badge bg-primary rounded-pill">50</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Spam
<span class="badge bg-primary rounded-pill">99+</span>
</li>
</ul>Customizing Buttons and Badges
You can customize buttons and badges by modifying the Sass variables.
Customizing Buttons
// Custom button variables in your Sass file
$btn-padding-y: .375rem;
$btn-padding-x: 1rem;
$btn-font-family: null;
$btn-font-size: $font-size-base;
$btn-line-height: $line-height-base;
$btn-white-space: null;
$btn-padding-y-sm: .25rem;
$btn-padding-x-sm: .5rem;
$btn-font-size-sm: $font-size-sm;
$btn-padding-y-lg: .5rem;
$btn-padding-x-lg: 1.5rem;
$btn-font-size-lg: $font-size-lg;
// Custom button colors
$btn-primary-bg: #007bff;
$btn-primary-border: #007bff;
$btn-primary-color: #fff;Customizing Badges
// Custom badge variables in your Sass file
$badge-font-size: .75em;
$badge-font-weight: $font-weight-bold;
$badge-color: $white;
$badge-padding-y: .35em;
$badge-padding-x: .65em;
$badge-border-radius: $border-radius;
Note: After customizing the variables, you'll need to recompile your Bootstrap Sass files.
Best Practices
✅ Do
- Use button colors semantically (e.g., danger for delete actions)
- Ensure buttons have clear, descriptive text
- Add icons to buttons to enhance meaning when appropriate
- Use badges sparingly to highlight important information
- Ensure sufficient contrast between badge text and background
❌ Don't
- Use too many buttons in a single section
- Use buttons when links would be more appropriate
- Overuse badges, which can create visual noise
- Use badges without context or explanation
- Make buttons too small for comfortable clicking/tapping