Button

Contrast Bootstrap Buttons are components that trigger wanted user interactions. They are easy to customize in terms of their size, shape and color.

Examples of Basic Contrast Styles For Buttons

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

html

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-link">Link</button>

Circular Buttons

html

  <button type="button" class="btn btn-rounded btn-primary">
    Primary
  </button>
  <button type="button" class="btn btn-rounded btn-secondary">
    Secondary
  </button>
  <button type="button" class="btn btn-rounded btn-success">
    Success
  </button>
  <button type="button" class="btn btn-rounded btn-danger">
    Danger
  </button>
  <button type="button" class="btn btn-rounded btn-warning">
    Warning
  </button>
  <button type="button" class="btn btn-rounded btn-info">Info</button>
  <button type="button" class="btn btn-rounded btn-light">Light</button>
  <button type="button" class="btn btn-rounded btn-dark">Dark</button>
  <button type="button" class="btn btn-rounded btn-link">Link</button>

Outline Buttons

html

<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>
<button type="button" class="btn btn-link">Link</button>

Large Button

html

  <button type="button" class="btn btn-primary btn-lg">Primary</button>
  <button type="button" class="btn btn-secondary btn-lg">
    Secondary
  </button>

Small Button

html

  <button type="button" class="btn btn-primary btn-sm">Primary</button>
  <button type="button" class="btn btn-secondary btn-sm">
    Secondary
  </button>

Buttons with Icons

html

  <button type="button" class="btn btn-primary">
    <i class="fa fa-book"></i>
    <span> Primary </span>
  </button>
  <button type="button" class="btn btn-secondary">
    <i class="fa fa-user"></i>
    <span>Secondary </span>
  </button>
  <button type="button" class="btn btn-success">
    <i class="fa fa-check"></i>
    <span> Success </span>
  </button>
  <button type="button" class="btn btn-danger">
    <i class="fa fa-times"></i>
    <span> Cancel </span>
  </button>
  <button type="button" class="btn btn-dark btn-rounded">
    <i class="fa fa-home"></i>
    <span> Home </span>
  </button>
  <button type="button" class="btn btn-info btn-rounded">
    <i class="fa fa-book"></i>
    <span> Read </span>
  </button>
  <button type="button" class="btn btn-outline-warning btn-rounded">
    <i class="fa fa-lock"></i>
    <span> Lock </span>
  </button>

Block Button

  <button type="button" class="btn btn-block btn-primary">
    Primary
  </button>
  <button type="button" class="btn btn-block btn-secondary">
    Secondary
  </button>
  <button type="button" class="btn btn-block btn-success">
    Success
  </button>
  <button type="button" class="btn btn-block btn-danger">Danger</button>
  <button type="button" class="btn btn-block btn-warning">
    Warning
  </button>
  <button type="button" class="btn btn-block btn-info">Info</button>
  <button type="button" class="btn btn-block btn-light">Light</button>
  <button type="button" class="btn btn-block btn-dark">Dark</button>
  <button type="button" class="btn btn-block btn-link">Link</button>