Bootstrap Buttons

Buttons are one of the most used Bootstrap components. This lesson covers color variants, outline styles, sizing, disabled states, and grouping multiple buttons together.

Bootstrap Buttons Overview

Any element with the .btn class becomes a styled button, and pairing it with a theme modifier like btn-primary or btn-danger applies the matching color from Bootstrap's palette. Outline variants (btn-outline-primary) swap the solid fill for a bordered, transparent style useful for secondary actions.

Buttons can be sized with btn-lg or btn-sm, disabled with the disabled attribute or aria-disabled, and combined into toolbars or segmented controls using .btn-group, all while remaining accessible to keyboard and screen-reader users when built from real <button> or <a> elements.

Concept	Description	Common Usage
btn-{color}	Solid button using a theme color	Primary and secondary calls to action
btn-outline-{color}	Bordered, transparent button variant	Secondary or less prominent actions
btn-sm / btn-lg	Sizing modifiers	Compact toolbars or prominent hero buttons
disabled state	Native disabled attribute with muted styling	Preventing interaction until conditions are met
.btn-group	Wrapper for multiple related buttons	Toolbars, segmented controls, pagination-like actions

Bootstrap Buttons Example

<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-outline-secondary">Cancel</button>
<button type="button" class="btn btn-danger btn-sm">Delete</button>
<button type="button" class="btn btn-success btn-lg" disabled>Processing...</button>

<div class="btn-group" role="group" aria-label="Text alignment">
  <button type="button" class="btn btn-outline-primary">Left</button>
  <button type="button" class="btn btn-outline-primary">Center</button>
  <button type="button" class="btn btn-outline-primary">Right</button>
</div>

The first four buttons show solid, outline, small, and large-with-disabled variants. The btn-group wraps three outline buttons into a single connected toolbar, with role="group" and an aria-label describing its purpose for assistive technology.

Top 10 Bootstrap Buttons Examples

These are the button classes and combinations you'll use in nearly every interface.

#	Example	Syntax
1	Primary button	`<button class="btn btn-primary">Save</button>`
2	Secondary button	`<button class="btn btn-secondary">Cancel</button>`
3	Outline button	`<button class="btn btn-outline-primary">Learn More</button>`
4	Danger button	`<button class="btn btn-danger">Delete</button>`
5	Small button	`<button class="btn btn-primary btn-sm">Small</button>`
6	Large button	`<button class="btn btn-primary btn-lg">Large</button>`
7	Disabled button	`<button class="btn btn-primary" disabled>Disabled</button>`
8	Full-width button	`<button class="btn btn-primary w-100">Continue</button>`
9	Link styled as button	`<a class="btn btn-primary" href="/start">Get Started</a>`
10	Button group	`<div class="btn-group"><button class="btn btn-outline-secondary">A</button></div>`

Popular Real-World Bootstrap Buttons Examples

These button patterns appear constantly across marketing sites, dashboards, and forms.

Scenario	Pattern
Primary form submit action	`<button type="submit" class="btn btn-primary">Create Account</button>`
Cancel/close secondary action	`<button class="btn btn-outline-secondary">Cancel</button>`
Destructive delete action	`<button class="btn btn-danger">Delete</button>`
Hero call-to-action	`<a class="btn btn-primary btn-lg" href="/signup">Start Free Trial</a>`
Loading state button	`<button class="btn btn-primary" disabled><span class="spinner-border spinner-border-sm"></span> Saving...</button>`
Icon button	`<button class="btn btn-outline-secondary"><i class="bi bi-download"></i> Export</button>`
Toolbar with grouped actions	`<div class="btn-group"><button class="btn btn-outline-secondary">Bold</button><button class="btn btn-outline-secondary">Italic</button></div>`
Full-width mobile CTA	`<button class="btn btn-primary w-100">Checkout</button>`
Link button that looks like text	`<button class="btn btn-link">Forgot password?</button>`

Best Practices

Use a real <button> element for actions and an <a> element for navigation, even though both can carry .btn styling.
Reserve btn-danger for genuinely destructive actions so it retains meaning.
Use outline buttons for secondary actions and solid buttons for the primary action in a group.
Add a visible loading state (spinner plus disabled) for buttons that trigger async requests.
Keep icon-only buttons paired with aria-label for accessibility.
Avoid btn-lg on dense interfaces where it would look oversized compared to surrounding elements.
Group related toolbar actions with btn-group instead of spacing individual buttons manually.

Common Mistakes

Using an <a> tag styled as a button for an action that has no real destination URL.
Forgetting the disabled attribute during async operations, allowing duplicate form submissions.
Overusing btn-danger for non-destructive actions, diluting its warning meaning.
Mixing multiple button sizes inconsistently within the same toolbar or form.
Not adding type="button" to buttons inside a form that shouldn't submit it.
Leaving icon-only buttons without any accessible label text.

Key Takeaways

btn combined with a color modifier (btn-primary, btn-danger, etc.) creates themed buttons.
Outline variants provide a lower-emphasis alternative to solid buttons.
Sizing modifiers (btn-sm, btn-lg) and w-100 control button dimensions.
btn-group merges multiple related buttons into a single visual unit.
Real button and anchor elements should be used according to their semantic purpose.

Pro Tip

For any button that triggers a network request, disable it and swap in a small spinner-border the moment it's clicked, then re-enable it only after the request settles, to prevent duplicate submissions.