Bootstrap 5 Button Styles

Bootstrap 5 buttons are the most used interactive component in web interfaces. This page covers 5 button patterns — all variants, outline, sizes, states and custom styles — each ready to copy directly.

Quick Setup

Buttons need only Bootstrap 5 CSS:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

Key Classes Reference

Class	What It Does
`.btn`	Required base class for all buttons
`.btn-primary`	Blue filled button
`.btn-danger`	Red filled button
`.btn-success`	Green filled button
`.btn-outline-primary`	Blue outline button
`.btn-sm`	Small button size
`.btn-lg`	Large button size
`.btn-link`	Looks like a link
`.d-block.w-100`	Full width button
`.active`	Active/pressed state
`disabled`	Disabled state attribute

1. Bootstrap 5 Button Variants

All Bootstrap 5 button color variants — primary, secondary, success, danger, warning, info, light and dark.

2. Bootstrap 5 Outline Buttons

Transparent background buttons with colored borders using btn-outline-* variants.

3. Bootstrap 5 Button Sizes

Buttons in small, default and large sizes using btn-sm and btn-lg. Use d-block w-100 for full width.

4. Bootstrap 5 Button States

Active, disabled and loading button states. Use disabled attribute or aria-disabled for accessibility.

5. Bootstrap 5 Custom Styled Buttons

Buttons with custom colors, gradients, rounded corners and hover effects using CSS.

Frequently Asked Questions

How do I change Bootstrap 5 button color?▲

Use built-in variants: btn-primary, btn-danger, btn-success etc. For custom colors add inline style or a custom CSS class: .btn-custom { background: #fd4766; color: #fff; border: none; }. Override the hover state too: .btn-custom:hover { background: #e03355; }

How do I make a Bootstrap 5 button full width?▼

Add d-block and w-100 classes: <button class='btn btn-primary d-block w-100'>. In a grid context use col-12 on the parent and w-100 on the button. Or use d-grid on a wrapper div and the button fills 100% automatically.

How do I disable a Bootstrap 5 button?▼

For button elements add the disabled attribute: <button disabled>. For anchor tags add the disabled class and aria-disabled='true': <a class='btn btn-primary disabled' aria-disabled='true'>. Disabled buttons have reduced opacity and pointer-events: none.

How do I add a loading spinner to a Bootstrap 5 button?▼

Add a spinner-border spinner-border-sm inside the button before the text: <button disabled><span class='spinner-border spinner-border-sm me-1'></span>Loading</button>. Disable the button to prevent multiple clicks while loading.

How do I create a Bootstrap 5 pill button?▼

Add a high border-radius value: style='border-radius:50px' or create a CSS class .btn-pill { border-radius: 50px; padding-left: 1.5rem; padding-right: 1.5rem; }. Bootstrap doesn't have a built-in pill button class unlike badges.

Need a Full Bootstrap 5 Admin Dashboard?

Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.

Browse Templates →