Styling Buttons with Bootstrap

Buttons are one of the most frequently used elements on any website, and Bootstrap turns them from plain, browser-default rectangles into consistent, professional-looking controls with just a couple of class names.

The basic button

<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>

The btn class supplies the shared shape, padding and hover behaviour, while the second class chooses the colour, which should generally match the meaning of the action, such as danger for anything destructive.

Outline buttons

<button class="btn btn-outline-primary">Outline</button>

An outline button shows only a coloured border and text until hovered, giving a lighter, less dominant look that suits secondary actions sitting next to a more important primary button.

Sizes

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

Disabled and full-width buttons

<button class="btn btn-primary" disabled>Unavailable</button>
<button class="btn btn-primary w-100">Sign in</button>

The disabled attribute both prevents clicks and visually fades the button, making it clear the action is not currently available. Adding w-100 stretches a button to fill its container, a pattern especially common on mobile forms.

Button groups

Related actions can be grouped so they appear visually connected, useful for something like a set of view options:

<div class="btn-group">
  <button class="btn btn-outline-primary">Day</button>
  <button class="btn btn-outline-primary">Week</button>
  <button class="btn btn-outline-primary">Month</button>
</div>

Buttons that look active

Adding the active class visually marks a button as the currently selected option, commonly toggled with a small amount of JavaScript when the user clicks between choices in a group.

Using button classes on links

The exact same classes work on an anchor tag, letting a link look identical to a real button whenever it navigates somewhere rather than submitting a form:

<a href="/signup" class="btn btn-primary">Get started</a>

A quick note on accessibility

A button used purely for its icon, with no visible text, should still include an aria-label describing its purpose, since screen readers otherwise have nothing meaningful to announce, and a sighted user hovering an icon-only button benefits from the same clarity a title attribute or tooltip provides.