bootstrap_ref_css_buttons

Bootstrap 5 CSS Buttons Reference

Button Styles (Colors)

Bootstrap provides several predefined button styles, each serving its own semantic purpose. These can be applied to <button>, <a>, or <input> elements.

<!-- Standard Buttons -->
<button type="button" class="btn btn-primary me-1">Primary</button>
<button type="button" class="btn btn-secondary me-1">Secondary</button>
<button type="button" class="btn btn-success me-1">Success</button>
<button type="button" class="btn btn-danger me-1">Danger</button>
<button type="button" class="btn btn-warning me-1">Warning</button>
<button type="button" class="btn btn-info me-1">Info</button>
<button type="button" class="btn btn-light me-1">Light</button>
<button type="button" class="btn btn-dark me-1">Dark</button>
<button type="button" class="btn btn-link">Link</button>

<!-- Outline Buttons -->
<div class="mt-2">
  <button type="button" class="btn btn-outline-primary me-1">Primary</button>
  <button type="button" class="btn btn-outline-secondary me-1">Secondary</button>
  <button type="button" class="btn btn-outline-success me-1">Success</button>
  <!-- ... and so on for other colors -->
</div>

The .btn-secondary class is the modern equivalent of the older .btn-default. Bootstrap 5 also introduces outline buttons (e.g., .btn-outline-primary) for a lighter look.

Button Sizes

Make buttons larger or smaller using .btn-lg or .btn-sm.

<button type="button" class="btn btn-primary btn-lg me-1">Large button</button>
<button type="button" class="btn btn-secondary btn-lg me-1">Large button</button>

<button type="button" class="btn btn-primary btn-sm me-1 mt-2">Small button</button>
<button type="button" class="btn btn-secondary btn-sm me-1 mt-2">Small button</button>

The .btn-xs class from older Bootstrap versions has been removed. Use .btn-sm for small buttons or apply custom CSS for extra-small sizes if needed.

Active and Disabled States

Active State: Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <button> elements, this is often programmatically added with JavaScript or by adding the .active class and aria-pressed="true".

Disabled State: Make buttons look inactive by adding the disabled boolean attribute to any <button> element. Anchor <a> elements styled as buttons require the .disabled class and aria-disabled="true" and tabindex="-1" to convey a disabled state properly.

<button type="button" class="btn btn-info active me-1" aria-pressed="true">Active Info Button</button>
<button type="button" class="btn btn-info me-1" disabled>Disabled Info Button</button>
<a href="#" class="btn btn-info disabled me-1" tabindex="-1" aria-disabled="true" role="button">Disabled Link Button</a>

Block-level / Full-width Buttons

The .btn-block class has been removed in Bootstrap 5. To create block-level buttons that span the full width of their parent, use display utilities, grid classes, or wrap buttons in a .d-grid container.

<!-- Using d-grid -->
<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Full-width button (d-grid)</button>
</div>

<!-- Using width utility (less ideal for multiple buttons) -->
<button class="btn btn-success w-100 mt-2" type="button">Full-width button (w-100)</button>

The d-grid approach with gap-2 is excellent for a stack of full-width buttons with consistent spacing.

Button Classes Overview

These classes can be used to style <a>, <button>, or <input type="button"> elements:

Class
Description
Example


.btn
Base class for button styling. Required for all other button classes.
Try it


.btn-primary
Primary action button (typically blue).
Try it


.btn-secondary
Secondary action button (typically gray). Replaces .btn-default.
Try it


.btn-success
Indicates a successful or positive action (typically green).
Try it


.btn-danger
Indicates a dangerous or potentially negative action (typically red).
Try it


.btn-warning
Indicates a warning or caution (typically yellow/orange).
Try it


.btn-info
Contextual button for informational messages (typically light blue/cyan).
Try it


.btn-light
A light-colored button, often used on dark backgrounds.
Try it


.btn-dark
A dark-colored button, often used on light backgrounds.
Try it


.btn-link
Makes a button look like a hyperlink while retaining button padding and behavior.
Try it


.btn-outline-*
(e.g., .btn-outline-primary) Creates an outlined button with a transparent background.
Try it


.btn-lg
Makes a large button.
Try it


.btn-sm
Makes a small button. (.btn-xs is removed).
Try it


.active
Applies an active (pressed) state to the button. Use with `aria-pressed="true"`.
Try it


.disabled
(For `<a>` tags) Makes the button appear disabled and non-interactive. Use with `aria-disabled="true"` and `tabindex="-1"`. For `<button>` elements, use the `disabled` attribute.
Try it

Application Scenario: A form submission might use a .btn-primary for the main ‘Submit’ action, a .btn-secondary for a ‘Save Draft’ action, and a .btn-link for a ‘Cancel’ action. Disabled states would be used if the form isn’t yet valid for submission.

Common Pitfall: Applying button color classes (e.g., .btn-primary) without the base .btn class. The .btn class provides the fundamental structure and padding, so it’s always required.