Buttons

Use custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Default

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

Has Icon

              
  <button class="btn btn-primary btn-icon" type="submit"><i class="bi bi-send-fill"></i></button>
  <button class="btn btn-secondary btn-icon" type="submit"><i class="bi bi-x-circle-fill"></i></button>
  <button class="btn btn-danger btn-icon" type="submit"><i class="bi bi-trash-fill"></i></button>
  <button class="btn btn-outline-primary btn-icon rounded-circle" type="submit"><i class="bi bi-send-fill"></i></button>
  <button class="btn btn-secondary btn-icon rounded-circle" type="submit"><i class="bi bi-x-circle-fill"></i></button>
  <button class="btn btn-danger btn-icon rounded-circle" type="submit"><i class="bi bi-trash-fill"></i></button>

Has icon and text

              
  <button class="btn btn-primary btn-icon-text" type="submit"><i class="bi bi-send-fill"></i> <span class="text">Send email</span></button>
  <button class="btn btn-light btn-icon-text" type="submit"><span class="text">Read more</span> <i class="bi bi-arrow-right"></i> </button>
  <button class="btn btn-outline-success btn-icon-text rounded-pill" type="submit"><i class="bi bi-send-fill"></i> <span class="text">Send email</span></button>
  <button class="btn btn-light btn-icon-text rounded-pill" type="submit"><span class="text">Read more</span> <i class="bi bi-arrow-right"></i> </button>

Animated

              
  <button class="btn btn-primary btn-animated" type="submit">
    <span class="btn-animated--shown">Read more</span> <span class="btn-animated--hidden"><i class="bi bi-arrow-right"></i></span>
  </button>
  <button class="btn btn-success btn-animated" type="submit">
    <span class="btn-animated--shown"><i class="bi bi-send-fill"></i></span> <span class="btn-animated--hidden">Send</span>
  </button>

Button shapes

              
  <button class="btn btn-primary rounded-0" type="submit">Square Button</button>
  <button class="btn btn-primary" type="submit">Default Button</button>
  <button class="btn btn-primary rounded-pill" type="submit">Pill Button</button>

Button tags

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

Link

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

Outline buttons

              
  <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>

Sizes

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

Disabled buttons

              
  <button type="button" class="btn btn-primary" disabled>Primary button</button>
  <button type="button" class="btn btn-secondary" disabled>Button</button>

Getting Started

Layout

Content

Components

Utility classes

Extend