What types of Bootstrap buttons do you know and how do you create them in a page?

Executive summary

Bootstrap knows the following buttons:

• Primary button - uses class btn btn-primary
• Secondary button - uses class btn btn-secondary
• Success button - uses class btn btn-success
• Danger button - uses class btn btn-danger
• Warning button - uses class btn btn-warning
• Info button - uses class btn btn-info
• Light button - uses class btn btn-info
• Dark button - uses class btn btn-dark
• Link button - uses class btn btn-link

Primary button

The primary buttons are used to trigger primary actions. They are defined by class btn btn-primary.

<button class="btn btn-primary">Primary button</button>

Secondary button

The secondary buttons are used to trigger secondary actions. They are defined by class btn btn-secondary.

<button class="btn btn-secondary">Secondary button</button>

Success button

The success buttons are usually used to trigger safe actions that follow after the previous action has succeeded. They are defined by class btn btn-success.

<button class="btn btn-success">Success button</button>

Danger button

The danger buttons are usually used to trigger dangerous actions where the user should pay attention before he clicks the button. The danger buttons are defined by class btn btn-danger.

<button class="btn btn-danger">Danger button</button>

Warning button

The warning buttons are usually used to trigger semi-dangerous actions where the user should pay attention before he clicks the button. The warning buttons are defined by class btn btn-warning.

<button class="btn btn-warning">Warning button</button>

Info button

The info buttons are usually used to trigger safe actions after some informational message was communicated to the user. The info buttons are defined by class btn btn-info.

<button class="btn btn-info">Info button</button>

Light button

The light buttons don't have any special semantic usage. They are just light. And they are defined by class btn btn-light.

<button class="btn btn-light">Info button</button>

Dark button

The dark buttons don't have any special semantic usage. They are just dark. And they are defined by class btn btn-dark.

<button class="btn btn-dark">Info button</button>

Link button

The link buttons are usually used at places where you can't change the tag from button to a but you still need the button to look like a link. They are defined by class btn btn-link.

<button class="btn btn-link">Link button</button>