Bootstrap 5 buttons are styled elements used to trigger actions like submitting forms, opening modals, or navigating.

You create them by adding the btn class plus a btn-* variant class (for example btn-primary).

Start with the base btn class, then add a color class to show the meaning of the action.

Common button variants:

• btn – basic gray button
• btn-primary – important primary action
• btn-secondary – secondary action
• btn-success – success / positive
• btn-info – information
• btn-warning – warning
• btn-danger – danger / delete
• btn-dark – dark theme button
• btn-light – light theme button
• btn-link – button that looks like a link

Outline buttons use a colored border with a transparent background.

They are useful when you want a lighter visual style.

Change the size of buttons with:

• .btn-sm – small button
• .btn-lg – large button

Buttons can show different states:

• .active – pressed / toggled on
• disabled attribute – disables <button> and <input>
• .disabled class – visually disables a link button (<a>)

You can add spinners inside buttons to show loading:

• .spinner-border – border spinner
• .spinner-grow – growing spinner

Use the .d-grid helper class on the parent to make block level, full-width buttons.

Add .gap-* to control the space between multiple buttons.

You can apply button styles to different HTML elements:

• <button> – best for actions
• <a> – navigation links styled as buttons
• <input type="submit"> – form submit buttons