Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. Read the Official Bootstrap Documentation for a full list of instructions and other options.

Basic Styling

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

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

Class Reference	Value
class="btn btn-[value]"	primary \| secondary \| success \| danger \| warning \| info \| light \| dark

Outline Buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

<button type="button" class="btn btn-outline-primary">Button</button>

Class Reference	Value
class="btn btn-outline-[value]"	primary \| secondary \| success \| danger \| warning \| info \| light \| dark

Sizes

Button can have additional sizes like larger or smaller buttons.

<button type="button" class="btn btn-xs btn-primary">Extra Small</button>
<button type="button" class="btn btn-sm btn-primary">Small</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-lg btn-primary">Large Button</button>

Full Width

Create block level buttons—those that span the full width of a parent

<button type="button" class="btn btn-primary btn-block">Button</button>

Active State

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active and also by adding .active class.

<button type="button" class="btn btn-primary active">Button</button>

Disabled State

Make buttons look inactive by adding the disabled boolean attribute to any button element.

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

Rounded Corner

Make rounded corner buttons by adding a class modifier from Bootstrap utilities class .rounded-pill

<button type="button" class="btn btn-primary rounded-pill">Primary Button</button>
<button type="button" class="btn btn-success rounded-pill">Success Button</button>

Icon Buttons

Make icon buttons by adding only icon and add class modifier using .btn-icon

<button type="button" class="btn btn-primary btn-icon">
  <i data-feather="arrow-left"></i>
</button>

Components