Buttons

Buttons

Bootstrap buttons use the .btn class plus a contextual color class. You can apply them to <button>, <a>, and <input> elements.

Button colors

Example

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

Outline buttons

Use .btn-outline-{color} for buttons with just a border and transparent background:

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

Button sizes

• .btn-lg makes a button large.
• .btn-sm makes a button small.
• .btn-block in Bootstrap 4 became .d-block w-100 in Bootstrap 5 for full width.

Disabled buttons

Add the disabled attribute (or the .disabled class on links) to gray out a button and prevent clicks:

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

TL;DR

• Buttons need .btn plus a color class.
• .btn-outline-* gives outline styles.
• .btn-lg and .btn-sm change size.
• disabled disables the button.