Error message

  • Notice: Trying to access array offset on value of type int in element_children() (line 6595 of /home/libera/public_html/includes/common.inc).
  • Notice: Trying to access array offset on value of type int in element_children() (line 6595 of /home/libera/public_html/includes/common.inc).
  • Notice: Trying to access array offset on value of type int in element_children() (line 6595 of /home/libera/public_html/includes/common.inc).
  • Notice: Trying to access array offset on value of type int in element_children() (line 6595 of /home/libera/public_html/includes/common.inc).
  • Notice: Trying to access array offset on value of type int in element_children() (line 6595 of /home/libera/public_html/includes/common.inc).
  • Notice: Trying to access array offset on value of type int in element_children() (line 6595 of /home/libera/public_html/includes/common.inc).
  • Notice: Trying to access array offset on value of type int in element_children() (line 6595 of /home/libera/public_html/includes/common.inc).
  • Deprecated function: implode(): Passing glue string after array is deprecated. Swap the parameters in drupal_get_feeds() (line 394 of /home/libera/public_html/includes/common.inc).
  • Deprecated function: The each() function is deprecated. This message will be suppressed on further calls in _menu_load_objects() (line 579 of /home/libera/public_html/includes/menu.inc).

Options

Use any of the available button classes to quickly create a styled button.

<!-- Standard button --><button type="button" class="btn btn-default">Default</button><!-- Provides extra visual weight and identifies the primary action in a set of buttons --><button type="button" class="btn btn-primary">Primary</button><!-- Indicates a successful or positive action --><button type="button" class="btn btn-success">Success</button><!-- Contextual button for informational alert messages --><button type="button" class="btn btn-info">Info</button><!-- Indicates caution should be taken with this action --><button type="button" class="btn btn-warning">Warning</button><!-- Indicates a dangerous or potentially negative action --><button type="button" class="btn btn-danger">Danger</button><!-- Deemphasize a button by making it look like a link while maintaining button behavior --><button type="button" class="btn btn-link">Link</button>

Sizes

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

<p> <button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-default btn-lg">Large button</button></p><p> <button type="button" class="btn btn-primary">Default button</button> <button type="button" class="btn btn-default">Default button</button></p><p> <button type="button" class="btn btn-primary btn-sm">Small button</button> <button type="button" class="btn btn-default btn-sm">Small button</button></p><p> <button type="button" class="btn btn-primary btn-xs">Extra small button</button> <button type="button" class="btn btn-default btn-xs">Extra small button</button></p>

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button><button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

Active state

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <button> elements, this is done via :active. For <a> elements, it's done with .active. However, you may use .active on <button>s should you need to replicate the active state progammatically.

Button element

No need to add :active as it's a pseudo-class, but if you need to force the same appearance, go ahead and add .active.

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

Anchor element

Add the .active class to <a> buttons.

Primary link Link 

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a><a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

Disabled state

Make buttons look unclickable by fading them back 50%.

Button element

Add the disabled attribute to <button> buttons.

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

Cross-browser compatibility

If you add the disabled attribute to a <button>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.

Anchor element

Add the .disabled class to <a> buttons.

Primary link Link 

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a><a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.

Link functionality not impacted

This class will only change the <a>'s appearance, not its functionality. Use custom JavaScript to disable links here.

Context-specific usage

While button classes can be used on <a> and <button> elements, only <button> elements are supported within our nav and navbar components.

Button tags

Use the button classes on an <a>, <button>, or <input> element.

Link 

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

Cross-browser rendering

As a best practice, we highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering.

Among other things, there's a Firefox bug that prevents us from setting the line-height of <input>-based buttons, causing them to not exactly match the height of other buttons on Firefox.