Bootstrap Buttons

Bootstrap 5 Buttons

Buttons are a cornerstone of user interaction. Bootstrap 5 provides a versatile set of button styles and sizes that are responsive and accessible.

Button Styles

Bootstrap offers several predefined button styles, each conveying a semantic purpose:

Primary (btn-primary) Secondary (btn-secondary) Success (btn-success) Info (btn-info) Warning (btn-warning) Danger (btn-danger) Light (btn-light) Dark (btn-dark) Link (btn-link)

To apply these styles, use the base class .btn along with a specific style class (e.g., .btn-primary).

• .btn-primary (for primary actions)
• .btn-secondary (for secondary actions, replaces old .btn-default)
• .btn-success (for positive actions like save or submit)
• .btn-info (for informational actions)
• .btn-warning (for actions that require caution)
• .btn-danger (for destructive actions like delete)
• .btn-light (light-colored button)
• .btn-dark (dark-colored button)
• .btn-link (styles a button to look like a link)

The following example shows the code for these button styles:

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

<!-- Tip: Add margin utilities like `me-1` (margin-end) and `mb-1` (margin-bottom) for spacing when displaying multiple buttons. -->

Outline Buttons: Bootstrap 5 also includes outline button styles (e.g., .btn-outline-primary). These buttons have a transparent background until hovered or focused.

<div>
  <button type="button" class="btn btn-outline-primary me-1 mb-1">Primary Outline</button>
  <button type="button" class="btn btn-outline-secondary me-1 mb-1">Secondary Outline</button>
</div>

Button classes can be used on <a>, <button>, or <input type="button"> (or type="submit", type="reset") elements:

<div>
  <a class="btn btn-info me-1 mb-1" href="#" role="button">Link Button</a>
  <button class="btn btn-info me-1 mb-1" type="button">Button Element</button>
  <input class="btn btn-info me-1 mb-1" type="button" value="Input Button">
  <input class="btn btn-info me-1 mb-1" type="submit" value="Submit Input">
</div>

<!-- Accessibility Note: When using `<a>` elements as buttons, always include `role="button"` to convey their purpose to assistive technologies. -->

Why href="#" for link buttons? When an <a> tag acts as a button and doesn’t navigate to a different page or section, href="#" is a common placeholder. In JavaScript-driven applications, you might use href="javascript:void(0);" or, preferably, attach event listeners and prevent default navigation if necessary. For true button functionality without navigation, a <button> element is often more semantically correct.

Application Scenario: Buttons are used for form submissions, navigation, triggering actions (like opening a modal), and general calls to action on a webpage.

Button Sizes

Bootstrap provides three main button sizes: Large, Default (medium), and Small. The extra small (.btn-xs) size from older versions is no longer available; use .btn-sm or custom CSS for smaller buttons.

Large Default Small

The classes that define the different sizes are:

• .btn-lg (Large button)
• No size class for default/medium button
• .btn-sm (Small button)

The following example shows code for different button sizes:

<div>
  <button type="button" class="btn btn-primary btn-lg me-1 mb-1">Large button</button>
  <button type="button" class="btn btn-primary me-1 mb-1">Default button</button>
  <button type="button" class="btn btn-primary btn-sm me-1 mb-1">Small button</button>
</div>

Block Level Buttons (Full Width)

To make a button span the full width of its parent, you can use Bootstrap’s grid system or display utilities. The older .btn-block class has been replaced by utility-first approaches.

Button 1 (Full Width using Grid)
Button 2 (Full Width using d-grid)

Example using .d-grid utility for a full-width button:

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

<!-- Tip: `d-grid` creates a grid container. `gap-2` adds a small gap between block buttons if there are multiple. For a single block button, you can apply `d-grid` to a wrapper or directly to the button's parent if it's the only child intended to be full-width. -->

Active/Disabled Buttons

A button can be set to an active state (appearing pressed) or a disabled state (unclickable).

Active Primary Disabled Primary

The .active class makes a button appear pressed. The disabled attribute (for <button> elements) or .disabled class (for <a> elements) makes a button unclickable and visually muted.

<div>
  <button type="button" class="btn btn-primary active me-1 mb-1">Active Primary Button</button>
  <button type="button" class="btn btn-primary me-1 mb-1" disabled>Disabled Primary Button</button>
  <a href="#" class="btn btn-secondary disabled me-1 mb-1" tabindex="-1" role="button" aria-disabled="true">Disabled Secondary Link</a>
</div>

<!--
  Note on disabling links: The `.disabled` class on `<a>` tags only provides visual styling. You might need JavaScript to prevent navigation if `href` is present and active. `tabindex="-1"` and `aria-disabled="true"` improve accessibility for disabled links.
-->

Further Learning

For a comprehensive guide to all button features, including button groups and toggle states, refer to the official Bootstrap 5 documentation: https://getbootstrap.com/docs/5.3/components/buttons/