Bootstrap provides multiple classes for styling buttons and making them stand out.

Bootstrap buttons can be created by adding the .btn class to an element.

Bootstrap Class	Role (color)
.btn-default	Standard button (white)
.btn-primary	Provides extra visual weight and identifies the primary action (blue)
.btn-success	Used to indicate a successful action (green)
.btn-info	Contextual button for providing information (light blue)
.btn-warning	Indicates caution should be applied by the user (yellow)
.btn-danger	Indicates a dangerous or negative action (red)
.btn-link	Make you button look like an anchor tag.

Button Sizes

You can also create different sizes of buttons with the .btn-size classes

Bootstrap Class	Result
.btn-lg	Creates a larger sized button
.btn-sm	Creates a smaller sized button
.btn-xs	Creates an extra-small button
.btn-block	Buttons become block-level elements and span the full width of their parent

Make button active

The active class will make a button appear pressed.

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

Disable a button

Adding the disabled class to a button will render the button un-clickable and show a forbidden cursor when hovering over it.

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

Render buttons horizontally together

Multiple buttons can be rendered horizontally with the .btn-group class. Simply wrap your buttons inside a container element and give that element the btn-group class.

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apples</button>
  <button type="button" class="btn btn-primary">Oranges</button>
  <button type="button" class="btn btn-primary">Pineapples</button>
</div>

Render buttons vertically

Apply the .btn-group-vertical class to the container element

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apples</button>
  <button type="button" class="btn btn-primary">Oranges</button>
  <button type="button" class="btn btn-primary">Pineapples</button>
</div>

Make button group take up full width

Buttons wrapped inside a .btn-group element only take up as much width as needed. To make the group span the entire width of the screen, use .btn-group-justified instead.

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">Apples</a>
  <a href="#" class="btn btn-primary">Oranges</a>
  <a href="#" class="btn btn-primary">Pineapples</a>
</div>