Bootstrap 5 Buttons: Classes, Sizes, Colors, and Examples

A Bootstrap button is any <button>, <a>, or <input> with the .btn class plus a variant such as .btn-primary. From there, a few more classes set the size, turn the button into an outline, make it full width, or group it with others. This guide covers every button class in Bootstrap 5.3, with copy-paste examples, and shows how to change button colors and sizes with CSS variables or Sass so they match your brand.

Basic button classes

Every button needs .btn, which sets the padding, font, border, and alignment, and a variant class for its color:

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

Class	Use it for
btn-primary	The main action on a page or form
btn-secondary	Less important actions, such as Cancel
btn-success	Confirming or saving
btn-danger	Deleting or anything destructive
btn-warning	Actions that need care
btn-info	Neutral, informational actions
btn-light, btn-dark	Buttons on dark or light backgrounds
btn-link	An action that should look like a link, with button spacing

.btn on its own gives you an unstyled button with no colors and no hover or focus styles, which is a starting point for fully custom buttons; if you use it alone, add your own :focus-visible style so keyboard users can see where they are.

Color alone doesn’t tell a screen reader user anything, so make the button’s text say what it does: “Delete account”, not just a red “OK”.

Button, link, or input?

The .btn classes work on three elements:

<button type="button" class="btn btn-primary">Button</button>
<a class="btn btn-primary" href="/pricing/" role="button">Link</a>
<input class="btn btn-primary" type="submit" value="Submit">

Use <button> for actions on the page (open a modal, submit a form, toggle something) and <a> for navigation to another page. Give a <button> an explicit type: without it, a button inside a form submits the form. If you use an <a> to trigger something on the page rather than to navigate, add role="button" so assistive technology announces it correctly.

Outline buttons

Replace btn- with btn-outline- for a button with a colored border and text and no background until hover:

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-danger">Danger</button>

Every theme color has an outline version, from btn-outline-primary to btn-outline-dark. Outline buttons work well for secondary actions next to a solid primary one. Check the contrast of btn-outline-light and btn-outline-warning, which need a dark background to be readable.

Button sizes

Add .btn-lg or .btn-sm for larger or smaller buttons:

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

For a one-off size, set the button’s CSS variables inline instead of writing new CSS:

<button type="button" class="btn btn-primary"
  style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
  Custom size
</button>

To stop a long label from wrapping onto two lines, add .text-nowrap to the button, or set $btn-white-space: nowrap in Sass to apply it to every button.

Full-width (block) buttons

Bootstrap 5 removed the old .btn-block class. Use a grid wrapper instead:

<!-- Full width, stacked -->
<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Sign up</button>
  <button class="btn btn-outline-secondary" type="button">Log in</button>
</div>

<!-- Full width on phones, normal width from md up -->
<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Sign up</button>
  <button class="btn btn-outline-secondary" type="button">Log in</button>
</div>

<!-- Half width, centered -->
<div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn btn-primary" type="button">Continue</button>
</div>

For a single full-width button you can also add .w-100 to it. The md in d-md-block is a breakpoint; see Bootstrap breakpoints for the widths.

Aligning buttons

Buttons are inline elements, so they follow the text alignment of their parent. Use flexbox utilities to place them:

<!-- Right-aligned, with a gap -->
<div class="d-flex justify-content-end gap-2">
  <button class="btn btn-outline-secondary" type="button">Cancel</button>
  <button class="btn btn-primary" type="button">Save</button>
</div>

<!-- Centered -->
<div class="text-center">
  <a class="btn btn-primary btn-lg" href="/start/">Get started</a>
</div>

<!-- Stacked on phones, right-aligned in a row from md up -->
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-outline-secondary" type="button">Cancel</button>
  <button class="btn btn-primary" type="button">Save</button>
</div>

The flexbox utilities guide covers justify-content and gap in depth, and centering in Bootstrap covers the other ways to center.

Disabled buttons

On a <button>, add the disabled attribute. Bootstrap fades it and turns off hover and click:

<button type="button" class="btn btn-primary" disabled>Disabled button</button>

Links don’t support disabled, so a disabled link button needs the .disabled class, aria-disabled="true", and no href:

<a class="btn btn-primary disabled" role="button" aria-disabled="true">Disabled link</a>

If the link must keep its href, also add tabindex="-1". The .disabled class blocks mouse clicks with pointer-events: none, but a keyboard user can still tab to the link and press Enter, so disable it in JavaScript as well.

Buttons with icons

Put an icon before or after the label. With Bootstrap Icons:

<button type="button" class="btn btn-primary">
  <i class="bi bi-download me-1" aria-hidden="true"></i> Download
</button>

<!-- Icon only: give it an accessible name -->
<button type="button" class="btn btn-outline-secondary" aria-label="Settings">
  <i class="bi bi-gear" aria-hidden="true"></i>
</button>

aria-hidden="true" stops screen readers from reading the icon, and an icon-only button needs aria-label so it still has a name.

Loading buttons

To show that an action is in progress, put a small spinner in the button and disable it:

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
  <span role="status">Saving...</span>
</button>

Swap spinner-border for spinner-grow for a pulsing dot instead of a ring. Sizes, colors, and centered loaders are in the Bootstrap spinner guide.

Pill and square buttons

Use border radius utilities to change the shape of a single button:

<button type="button" class="btn btn-primary rounded-pill px-4">Pill button</button>
<button type="button" class="btn btn-primary rounded-0">Square button</button>

To change the shape of every button, set $btn-border-radius in Sass, or the --bs-border-radius variables, which buttons use by default.

Button groups and toolbars

Wrap buttons in .btn-group to join them into one control (a group can also hold a dropdown, and a badge can show a count inside a 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>

Add .btn-group-lg or .btn-group-sm to size every button in the group at once, or use .btn-group-vertical to stack them. Several groups go in a .btn-toolbar:

<div class="btn-toolbar gap-2" role="toolbar" aria-label="Editor toolbar">
  <div class="btn-group" role="group" aria-label="Formatting">
    <button type="button" class="btn btn-outline-secondary">Bold</button>
    <button type="button" class="btn btn-outline-secondary">Italic</button>
  </div>
  <div class="btn-group" role="group" aria-label="History">
    <button type="button" class="btn btn-outline-secondary">Undo</button>
    <button type="button" class="btn btn-outline-secondary">Redo</button>
  </div>
</div>

role="group" with an aria-label tells screen readers the buttons belong together.

Toggle buttons

Bootstrap has two ways to make a button that stays on or off.

A toggle button, with data-bs-toggle="button". Bootstrap’s JavaScript switches the .active class and aria-pressed on each click:

<button type="button" class="btn btn-outline-primary" data-bs-toggle="button">Toggle</button>
<button type="button" class="btn btn-outline-primary active" data-bs-toggle="button" aria-pressed="true">On by default</button>

Checkbox and radio buttons, with .btn-check on a real input and .btn on its label. They need no JavaScript and submit with a form:

<input type="checkbox" class="btn-check" id="newsletter" autocomplete="off">
<label class="btn btn-outline-primary" for="newsletter">Newsletter</label>

<div class="btn-group" role="group" aria-label="Billing period">
  <input type="radio" class="btn-check" name="billing" id="monthly" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="monthly">Monthly</label>
  <input type="radio" class="btn-check" name="billing" id="yearly" autocomplete="off">
  <label class="btn btn-outline-primary" for="yearly">Yearly</label>
</div>

They look the same, but screen readers announce a toggle button as “pressed” and a checkbox as “checked”. Use the inputs when the choice is a value, such as a setting or a filter, and the toggle button when it is an action. Regular checkboxes, radios, and switches are covered in the Bootstrap checkbox guide.

The close button

For dismissing alerts, modals, and offcanvas panels (like the offcanvas navbar menu), Bootstrap has a separate .btn-close, an X icon with no text:

<button type="button" class="btn-close" aria-label="Close"></button>

On a dark background, put it inside an element with data-bs-theme="dark", which makes the icon light; the older .btn-close-white class is deprecated in Bootstrap 5.3.

Custom button colors

There are three ways to give buttons your own colors, from quickest to most complete.

1. Override CSS variables. Every button reads its colors from --bs-btn-* variables, so you can make a new style in plain CSS:

.btn-brand {
  --bs-btn-color: #fff;
  --bs-btn-bg: #6d28d9;
  --bs-btn-border-color: #6d28d9;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5b21b6;
  --bs-btn-hover-border-color: #5b21b6;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4c1d95;
  --bs-btn-active-border-color: #4c1d95;
  --bs-btn-focus-shadow-rgb: 109, 40, 217;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6d28d9;
  --bs-btn-disabled-border-color: #6d28d9;
}

<button type="button" class="btn btn-brand">Brand button</button>

2. Change the theme colors in Sass. Buttons are generated from the $theme-colors map, so changing $primary recolors btn-primary, btn-outline-primary, and everything else that uses primary. Adding a color to the map creates a full set of classes for it:

@import "bootstrap/scss/functions";

$primary: #6d28d9;

@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";

$theme-colors: map-merge($theme-colors, ("brand": #0f766e));

@import "bootstrap/scss/bootstrap";

That gives you btn-brand and btn-outline-brand, along with text-brand, bg-brand, and the rest. Our guide to customizing Bootstrap 5 colors covers the whole palette.

3. Use the Sass mixins for one button style without adding a theme color:

.btn-brand {
  @include button-variant(#0f766e, #0f766e);
}
.btn-outline-brand {
  @include button-outline-variant(#0f766e);
}

button-variant works out the hover, active, and disabled shades and picks a readable text color for you.

If you would rather not write Sass, the bootstrap.build theme builder lets you change the theme colors, border radius, and button padding visually and export the compiled CSS.

Button Sass variables

The variables you are most likely to change, all set before importing Bootstrap:

Variable	Controls	Default
$btn-padding-y, $btn-padding-x	Default padding	From $input-btn-padding-y/x
$btn-font-size	Default font size	From $input-btn-font-size
$btn-font-weight	Font weight	$font-weight-normal
$btn-border-width	Border width	From $input-btn-border-width
$btn-border-radius	Corner radius	var(--bs-border-radius)
$btn-padding-y-lg, $btn-padding-x-lg	Padding of .btn-lg	From the $input-btn large values
$btn-padding-y-sm, $btn-padding-x-sm	Padding of .btn-sm	From the $input-btn small values
$btn-white-space	Text wrapping	null (set nowrap to stop wrapping)
$btn-disabled-opacity	Fade of disabled buttons	.65

Many of these default to shared $input-btn-* variables, so changing $input-btn-padding-y changes buttons and form inputs together, which keeps a button the same height as the input beside it. The Bootstrap Sass variables guide explains how overrides work.

Common button problems

A button inside a form submits it. A <button> without a type defaults to type="submit". Add type="button" to any button that shouldn’t submit.

btn-block does nothing. It was removed in Bootstrap 5. Wrap the button in d-grid or add w-100.

The button has no style. Check that it has both .btn and a variant class, and that Bootstrap’s CSS is loaded before your own.

Two buttons touch. Buttons have no margin. Put them in a flex container with gap-2, or add me-2 to the first.

Custom colors don’t change on hover. If you override only background-color, the hover state still uses Bootstrap’s variables. Set the --bs-btn-hover-* and --bs-btn-active-* variables too, or use the button-variant mixin.

FAQ

How do I make a button in Bootstrap?

Add the btn class and a color class to a <button>, <a>, or <input> element, for example <button type="button" class="btn btn-primary">Save</button>. Add btn-lg or btn-sm to change the size, or use btn-outline-primary for an outline button.

What are the Bootstrap button classes?

The color classes are btn-primary, btn-secondary, btn-success, btn-danger, btn-warning, btn-info, btn-light, btn-dark, and btn-link, each used with the base btn class. Each color also has an outline version, such as btn-outline-primary, and btn-lg and btn-sm change the size.

How do I make a full-width button in Bootstrap 5?

Wrap the button in a <div class="d-grid">, or add the w-100 class to the button. Bootstrap 5 removed the old btn-block class. Use d-grid gap-2 d-md-block to make buttons full width on phones only.

How do I change the color of a Bootstrap button?

Create a class that sets the button’s CSS variables, such as --bs-btn-bg, --bs-btn-border-color, and --bs-btn-hover-bg, or change $primary and the $theme-colors map in Sass to recolor every button. The button-variant Sass mixin builds a full style, with hover and active shades, from a single color.

How do I disable a Bootstrap button?

Add the disabled attribute to a <button> element. For a link styled as a button, add the disabled class and aria-disabled="true" and remove the href, or add tabindex="-1" if the href must stay.

How do I align buttons to the right in Bootstrap?

Put the buttons in a container with d-flex justify-content-end gap-2. For a single button, you can also use text-end on its parent, or ms-auto on the button inside a flex container.

How do I put an icon in a Bootstrap button?

Add the icon element inside the button, before or after the text, for example <i class="bi bi-download me-1" aria-hidden="true"></i> with Bootstrap Icons. For an icon-only button, add an aria-label to the button so screen readers can name it.