Summarize this article with:
Buttons make or break your interface. Poorly styled buttons confuse users, kill conversions, and make your site look amateur.
Bootstrap button examples give you production-ready components that work out of the box. No custom styling headaches.
The Bootstrap CSS framework handles colors, sizes, states, and interactive behavior through simple class names. One .btn class transforms plain HTML into polished UI elements.
This guide covers every button variant in Bootstrap 5.3. Primary buttons, outline styles, button groups, dropdowns, toggle buttons, loading states, and accessibility requirements.
You’ll find working code snippets for each example. Copy, paste, ship.
What is a Bootstrap Button
A Bootstrap button is a clickable HTML element styled with the .btn class to trigger actions within web applications.
Bootstrap 5.3 provides pre-built button styles that work across all modern browsers without writing custom CSS.
The framework handles hover states, focus indicators, and responsive behavior automatically.
How Bootstrap Buttons Work
Buttons use CSS utility classes applied to <button>, <a>, or <input> elements.
The base .btn class sets padding, font size, border radius, and cursor styles. Modifier classes like .btn-primary add color schemes.
Bootstrap Button Components
Every button requires these core pieces:
- Base class (.btn) for foundational styling
- Color modifier (.btn-primary, .btn-secondary, etc.)
- Optional size class (.btn-lg, .btn-sm)
- Optional state class (.active, .disabled)
Cool Bootstrap Buttons
Taking Flight: The Send Button with Transition
See the Pen
Send button with a transition by Irem Lopsum (@iremlopsum)
on CodePen.
A Button That Transforms: CSS Checkbox Progress Button
See the Pen
CSS Checkbox Progress Button by Ryan Mulligan (@hexagoncircle)
on CodePen.
Liquid Magic: The Liquid Radio Button
See the Pen
Liquid Radio Button by Tamino Martinius (@Zaku)
on CodePen.
A Simple Magic with Bootstrap Submit Button Animation
See the Pen
Bootstrap Submit Button Animation by Craig Harshbarger (@craigh)
on CodePen.
Get Your Hands on Bootstrap Buttons V01
Embrace the Future with Bootstrap Animated Button
Creating Masterpieces with Bootstrap Circle Buttons
Socialize with Bootstrap Social Buttons
Map Your Style with Google Maps Style Radio Buttons
See the Pen
Google maps radio buttons CSS only by Elias Meire (@eliasmeire)
on CodePen.
Catch the Eye with Flicker Button on Page Load
See the Pen
Flicker Button on Load by Jacob Lett (@JacobLett)
on CodePen.
The Unify of Buttons – It’s More Than You Think
Getting it Right: Position Icons Left or Right in Buttons
See the Pen
CSS Check if icon (i) comes before or after text inside a button – Bootstrap 4 by Jacob Lett (@JacobLett)
on CodePen.
A Whole New Level: Submit Button with Progress
See the Pen
Submit Button by Dronca Raul (@rauldronca)
on CodePen.
Bringing Life with Bootstrap Gradient Buttons
Going Flashy with Bulgy Radios
See the Pen
Bulgy radios by Liam (@liamj)
on CodePen.
Go Smooth with Bootstrap Buttons V04
Spice Up Your Images with a Gradient Overlay
See the Pen
image button gradient overlay, box shadow, or both Bootstrap 4 by Jacob Lett (@JacobLett)
on CodePen.
Buttons That Pop: The Square Edition
Make Waves with Material Buttons for Bootstrap
Stay Connected with Responsive Login with Social Buttons
Bootstrap Button Styles
Bootstrap ships with nine button variants. Each serves a specific purpose in user interface design.
Pick the right style based on action importance and visual hierarchy.
Primary Button
The .btn-primary class creates your main call-to-action button. Use it for the single most important action on any page.
“ <button type="button" class="btn btn-primary">Submit</button> `
Secondary Button
The .btn-secondary works for supporting actions. Gray by default, it sits visually below primary buttons.
` <button type="button" class="btn btn-secondary">Cancel</button> `
Success Button
Green .btn-success signals positive outcomes. Common in form submissions, checkout flows, and confirmation dialogs.
` <button type="button" class="btn btn-success">Complete Order</button> `
Danger Button
Red .btn-danger warns users about destructive actions. Delete buttons, account removal, data clearing.
` <button type="button" class="btn btn-danger">Delete Account</button> `
Warning Button
Yellow .btn-warning indicates caution. Good for actions that need a second thought but aren’t irreversible.
` <button type="button" class="btn btn-warning">Proceed Anyway</button> `
Info Button
The .btn-info provides a neutral blue for informational actions. Help buttons, tooltips triggers, detail expansions.
` <button type="button" class="btn btn-info">Learn More</button> `
Light Button
The .btn-light creates subtle buttons for dark backgrounds. Nearly invisible on white, perfect against dark sections.
` <button type="button" class="btn btn-light">View Details</button> `
Dark Button
The .btn-dark offers high contrast on light backgrounds. Works well in navigation bars and footers.
` <button type="button" class="btn btn-dark">Download</button> `
Link Button
The .btn-link removes background styling entirely. Looks like a hyperlink but behaves like a button with proper click handling.
` <button type="button" class="btn btn-link">Skip This Step</button> `
Bootstrap Outline Buttons
Outline variants provide a lighter visual weight while maintaining the same color associations.
What are Outline Buttons in Bootstrap
Outline buttons swap solid backgrounds for transparent fills with colored borders. They’re less visually dominant than solid buttons.
Use them for secondary actions that still need color coding.
Outline Button Variations
Add “outline” between btn and the color name:
- .btn-outline-primary
- .btn-outline-secondary
- .btn-outline-success
- .btn-outline-danger
- .btn-outline-warning
- .btn-outline-info
- .btn-outline-light
- .btn-outline-dark
` <button type="button" class="btn btn-outline-primary">Outline Primary</button> <button type="button" class="btn btn-outline-danger">Outline Danger</button> `
Hover states fill the button with solid color. The transition happens automatically through Bootstrap’s built-in hover effects.
Bootstrap Button Sizes
Three size options let you match buttons to their context. Touch targets, visual hierarchy, and available space all factor in.
Large Buttons
The .btn-lg class increases padding and font size. Minimum 48px height meets mobile touch target guidelines.
` <button type="button" class="btn btn-primary btn-lg">Large Button</button> `
Small Buttons
The .btn-sm class reduces button dimensions. Good for data tables, inline actions, and tight spaces.
` <button type="button" class="btn btn-primary btn-sm">Small Button</button> `
Block Level Buttons
Wrap buttons in .d-grid for full-width behavior. They stretch to fill their container.
` <div class="d-grid gap-2"> <button class="btn btn-primary" type="button">Full Width Button</button> </div> `
Stack multiple block buttons using the gap-2 utility for consistent spacing.
Bootstrap Button States
Buttons communicate their current condition through visual states. Active and disabled are the two main ones you’ll use.
Active State
The .active class shows a pressed appearance. Pair it with aria-pressed=”true” for screen readers.
` <button type="button" class="btn btn-primary active" aria-pressed="true">Active</button> `
Disabled State
Add the disabled attribute to prevent clicks. The button gets reduced opacity and pointer-events: none.
` <button type="button" class="btn btn-primary" disabled>Disabled</button> `
For anchor tags styled as buttons, use the .disabled class instead since they don’t support the disabled attribute.
Bootstrap Button Groups
Button groups combine related actions into a single visual unit. They share borders and eliminate gaps between buttons.
What is a Button Group in Bootstrap
The .btn-group class wraps multiple buttons into a connected row. Adjacent buttons merge their borders for a cleaner look.
` <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> `
Vertical Button Groups
The .btn-group-vertical stacks buttons top to bottom. Works well in sidebar navigation and mobile layouts.
` <div class="btn-group-vertical" role="group"> <button type="button" class="btn btn-dark">Top</button> <button type="button" class="btn btn-dark">Middle</button> <button type="button" class="btn btn-dark">Bottom</button> </div> `
Button Toolbar
The .btn-toolbar combines multiple button groups with spacing. Good for text editors and formatting controls.
` <div class="btn-toolbar" role="toolbar"> <div class="btn-group me-2"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> </div> <div class="btn-group"> <button type="button" class="btn btn-secondary">3</button> <button type="button" class="btn btn-secondary">4</button> </div> </div> `
Bootstrap Toggle Buttons
Toggle buttons remember their state between clicks. They’re built on checkbox and radio inputs with button styling.
Checkbox Toggle Buttons
Checkbox toggles allow multiple selections. The checkbox input hides while the label displays as a button.
` <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off"> <label class="btn btn-primary" for="btn-check">Toggle</label> `
Radio Toggle Buttons
Radio toggles enforce single selection within a group. Only one button stays active at a time.
` <input type="radio" class="btn-check" name="options" id="option1" checked> <label class="btn btn-outline-primary" for="option1">Option 1</label>
<input type=”radio” class=”btn-check” name=”options” id=”option2″> <label class=”btn btn-outline-primary” for=”option2″>Option 2</label> `
Bootstrap Button with Icons
Icons make buttons more scannable and reduce reliance on text labels.
Adding Icons to Buttons
Place Bootstrap Icons or SVG elements inside button tags. Add margin utilities for spacing between icon and text.
` <button type="button" class="btn btn-primary"> <i class="bi bi-download me-2"></i>Download </button> `
Icon-Only Buttons
Buttons without visible text need aria-label attributes for accessibility. Screen readers announce the label instead of silence.
` <button type="button" class="btn btn-outline-secondary" aria-label="Settings"> <i class="bi bi-gear"></i> </button> `
Bootstrap Loading Buttons
Loading states show users that an action is processing. Spinners replace or accompany button text.
Spinner Inside Buttons
Add .spinner-border or .spinner-grow components inside buttons. Disable the button during loading to prevent double submissions.
` <button class="btn btn-primary" type="button" disabled> <span class="spinner-border spinner-border-sm me-2"></span> Loading... </button> `
The spinner-border-sm class sizes the spinner to match button text. Pairs well with CSS loader animations.
Bootstrap Dropdown Buttons
Dropdown buttons reveal additional options on click. They combine button styling with dropdown menu functionality.
Single Dropdown Button
The data-bs-toggle=”dropdown” attribute activates the menu. Requires JavaScript for click handling.
` <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"> Dropdown </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> `
Split Dropdown Button
Split buttons separate the main action from the dropdown trigger. Two distinct click zones.
` <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"> <span class="visually-hidden">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Option 1</a></li> </ul> </div> `
Bootstrap Button Accessibility
Accessible buttons work for everyone, including keyboard users and screen reader users. Small additions make big differences.
ARIA Attributes for Buttons
Key attributes to implement:
- aria-pressed for toggle state
- aria-disabled for non-interactive buttons
- aria-label for icon-only buttons
- role=”button” when using non-button elements
Keyboard Navigation
Buttons receive focus via Tab key by default. Enter and Space keys trigger click events.
Maintain visible focus indicators. Don’t remove outline styles without providing alternatives.
When to Use Each Bootstrap Button Type
Match button styles to their purpose. Consistent usage builds user experience patterns.
| Button Type | Best Use Case | Avoid When | | — | — | — | | Primary | Main page action, form submit | Multiple buttons need equal weight | | Secondary | Cancel, back, secondary actions | Action needs attention | | Success | Confirmations, completions | Action might fail | | Danger | Delete, remove, destructive acts | Reversible actions | | Warning | Proceed with caution | Standard workflows | | Info | Help, details, learn more | Primary conversions | | Outline | Secondary actions, less emphasis | Critical user paths | | Link | Tertiary actions, skip options | Important submissions |
Limit primary buttons to one per section. Too many competing actions confuse users about what to do next.
Test button rendering across browsers before launch. Edge cases exist between Chrome, Firefox, and Safari.
FAQ on Bootstrap Button Examples
How do I create a button in Bootstrap?
Add the .btn class plus a color modifier like .btn-primary to any button, anchor, or input element. Bootstrap’s CSS handles padding, borders, and hover states automatically. No custom styling required.
What are the different Bootstrap button styles?
Bootstrap offers nine styles: primary, secondary, success, danger, warning, info, light, dark, and link. Each has a solid and outline variant. Pick based on action importance and visual hierarchy needs.
How do I change Bootstrap button size?
Add .btn-lg for large buttons or .btn-sm for small ones. Default size works for most cases. Use .d-grid wrapper for full-width block buttons that span their container.
How do I disable a Bootstrap button?
Add the disabled attribute to button elements. For anchor tags styled as buttons, use the .disabled class instead. Both methods reduce opacity and block pointer events.
Can I add icons to Bootstrap buttons?
Yes. Place icon elements inside button tags before or after text. Use margin utilities like .me-2 for spacing. Icon-only buttons need aria-label attributes for accessibility compliance.
How do I create a button group in Bootstrap?
Wrap multiple buttons in a div with the .btn-group class. Add role=”group” and aria-label for screen readers. Use .btn-group-vertical for stacked layouts in mobile-first designs.
What is a split button in Bootstrap?
A split button combines a regular button with a dropdown trigger. Two separate click zones: main action on left, menu toggle on right. Common in navigation menus and toolbars.
How do I make a toggle button in Bootstrap?
Use .btn-check class on hidden checkbox or radio inputs. Style the associated label with .btn classes. The button appearance changes based on input state. Perfect for filters and settings panels.
How do I add a loading spinner to a Bootstrap button?
Insert a .spinner-border or .spinner-grow element inside the button. Add spinner-border-sm for proper sizing. Disable the button during loading to prevent duplicate submissions from impatient clicks.
Are Bootstrap buttons accessible by default?
Mostly. Native button elements work with keyboards and screen readers automatically. Add inclusive design extras like aria-pressed for toggles and aria-label for icon buttons to cover edge cases.
Conclusion
These Bootstrap button examples cover everything you need for frontend development projects. From basic .btn classes to complex dropdown triggers and toggle states.
The framework eliminates guesswork. Consistent sizing, proper color contrast ratios, and keyboard navigation work out of the box.
Start with primary and secondary buttons for most interfaces. Add outline variants, modal triggers, and button groups as your UI grows more complex.
Test across devices. What looks perfect on desktop might need .btn-lg sizing for mobile touch targets.
Pair buttons with other Bootstrap components like cards and carousels for complete page layouts. The utility classes stay consistent across all elements.
Ship faster. Style less. Let Bootstrap handle the details.
