What Are Bootstrap Buttons?

A button is one of the most common elements on a website. It can submit a form, confirm a choice, start an action, or help visitors move through an interface.

Bootstrap is a front-end toolkit that provides ready-made styles. Instead of writing custom CSS for every button, you can apply Bootstrap classes directly to HTML elements.

Your First Bootstrap Button

A Bootstrap button usually starts with two classes: btn and a style such as btn-primary.

<button type="button" class="btn btn-primary">
  Click Me
</button>

For Bootstrap styling to work, your page must load the Bootstrap CSS file. Our Sandbox handles this automatically so you can focus on learning.

Choose the Right Button Color

Bootstrap includes several button variants. The class name communicates the visual purpose of the button, such as a primary action, success, or warning.

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

Other built-in variants include btn-warning, btn-info, btn-light, btn-dark, and btn-link.

Make Outline Buttons

Outline buttons have a transparent background and colored border. They work well for secondary actions that shouldn’t compete with the main button.

<button type="button" class="btn btn-outline-primary">
  Learn More
</button>

Try replacing btn-outline-primary with btn-outline-success or btn-outline-danger.

Small, Regular, or Large?

Bootstrap has three common button sizes. The regular size needs no extra class. Add btn-sm for small buttons or btn-lg for large ones.

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

Disable a Button

Sometimes an action shouldn’t be available yet. Add the HTML disabled attribute to prevent a button from being activated.

<button type="button" class="btn btn-secondary" disabled>
  Not Available
</button>

Create Full-Width Buttons

Bootstrap 5 uses layout utilities to create full-width buttons. Wrap the button in a container with the d-grid class.

<div class="d-grid">
  <button type="button" class="btn btn-primary">
    Continue
  </button>
</div>

You can also add gap-2 when stacking multiple buttons to create space between them.