Bootstrap 5 Buttons

Buttons are an essential part of web design, and Bootstrap 5 provides a set of classes and styles to create attractive buttons.

Example

<button type="button" class="btn">Basic</button>
<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-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>

Try it Yourself

You can also add button classes into <a>, <button>, or <input> elements.

Example

<a href="#" class="btn btn-primary">Link Button</a>
<button type="button" class="btn btn-primary">Button</button>
<input type="button" class="btn btn-primary" value="Input Button">
<input type="submit" class="btn btn-primary" value="Submit Button">
<input type="reset" class="btn btn-primary" value="Reset Button">

Try it Yourself

Outline Buttons

To create outline buttons, you can use the .btn-outline-*.

Example

<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-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Try it Yourself

Buttons Size

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

Example

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

Try it Yourself

Block Level Buttons

If you want a button to take up the full width of its parent container, you can use the .btn-block class.
use the .d-grid "helper" class on the parent element.

Example

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">Full Width Button</button>
</div>

Try it Yourself

Active Buttons

An active button is a button that appears visually pressed down or "active." You can achieve this effect by using the .active class in combination with the .btn class. When you click the button, it will appear in the "active" state visually.

Example

<button class="btn btn-primary active">Active Button</button>

Try it Yourself

Disabled Buttons

To create a disabled button, you can use the disabled attribute along with the .btn class. This will make the button visually appear disabled and prevent it from being interacted with by the user.
<a> don’t support the disabled attribute, so you must add the .disabled class to make it visually appear disabled.

Example

<button type="button" class="btn btn-primary" disabled>Disabled Button</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>

Try it Yourself