Buttons and button groups

A Bootstrap component is a ready interface element made of several classes: a button, a card, a menu. A button is the simplest. The base btn class gives size, padding and a hover reaction, and a second class picks the color.

Colors

Add btn-{color} with any theme color to btn:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<button type="button" class="btn btn-primary">Create task</button>
<button type="button" class="btn btn-secondary">Archive</button>
<button type="button" class="btn btn-danger">Delete</button>
<button type="button" class="btn btn-link">Learn more</button>

Blue, gray and red buttons plus a button that looks like a link. Hover over them — each background gets darker.

Outline buttons

The btn-outline-{color} classes give a button with a border and a transparent background. It goes next to the main button for a secondary action:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<button type="button" class="btn btn-primary">Start for free</button>
<button type="button" class="btn btn-outline-primary">Watch the demo</button>

This is the button pair for the landing page hero: the filled one grabs attention, the outline one stays in the background.

Sizes and states

The btn classes work on a link too: <a class="btn btn-primary" href="/signup" role="button"> looks like a button but leads to another page. Use <button> for actions on the page and <a> for navigation.

Several full-width buttons

A stack of equal-width buttons is easy to build with a d-grid grid and a gap:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="d-grid gap-2" style="max-width: 320px">
  <button type="button" class="btn btn-primary btn-lg">Sign in</button>
  <button type="button" class="btn btn-outline-secondary" disabled>Sign in with SSO</button>
</div>

Both buttons stretch to the block width; the second is pale and cannot be clicked.

Button groups

btn-group joins buttons into one block — a switcher:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="btn-group" role="group" aria-label="Period">
  <button type="button" class="btn btn-outline-primary active">Day</button>
  <button type="button" class="btn btn-outline-primary">Week</button>
  <button type="button" class="btn btn-outline-primary">Month</button>
</div>

Three buttons stand edge to edge with shared rounded ends, and the first is highlighted. This period picker sits above a chart in the admin dashboard. btn-group-vertical stacks buttons in a column, and btn-toolbar combines several groups into a toolbar.

Common mistake

Writing a <button> without a type attribute inside a form. By default a button in a form has the submit type, so clicking "Cancel" submits the form. Always set type="button" on buttons that do not submit, and type="submit" on the one that does.