Material Buttons

Options

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

Default buttons

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

Types

Use any of the available button classes to create a button. Also you can mix types.

Copy
Default buttons
Raised buttons
Flat buttons
Circle buttons (FAB)
Circle + Raised buttons
Circle + Flat buttons 

<!-- Default button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Raised button -->
<button type="button" class="btn btn-raised btn-default">Default</button>

<!-- Flat button -->
<button type="button" class="btn btn-flat btn-default">Default</button>

<!-- Circle button (FAB) -->
<button type="button" class="btn btn-circle btn-default">Default</button>

<!-- Circle + Raised button -->
<button type="button" class="btn btn-circle btn-raised btn-default">Default</button>

<!-- Circle + Flat button -->
<button type="button" class="btn btn-circle btn-flat btn-default">Default</button>

Ripple effect

Ripple effect requiers JS for creating DOM-element and controlling animation. Animation work on CSS3. If you want to use this effect, you should add class .ripple-effect to your button.

Default buttons
Raised buttons
Flat buttons
Circle buttons (FAB)
Circle + Raised buttons
Circle + Flat buttons 

<!-- Default button with ripple effect -->
<button type="button" class="btn ripple-effect btn-default">Default</button>

<!-- Raised button with ripple effect -->
<button type="button" class="btn btn-raised ripple-effect btn-default">Default</button>

<!-- Flat button with ripple effect -->
<button type="button" class="btn btn-flat ripple-effect btn-default">Default</button>

<!-- Circle button (FAB) with ripple effect -->
<button type="button" class="btn btn-circle ripple-effect btn-default">Default</button>

<!-- Circle + Raised button with ripple effect -->
<button type="button" class="btn btn-circle btn-raised ripple-effect btn-default">Default</button>

<!-- Circle + Flat button with ripple effect -->
<button type="button" class="btn btn-circle btn-flat ripple-effect btn-default">Default</button>

Sizes

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

Large buttons
Default buttons
Small buttons
Extra small buttons 
<p>
  <button type="button" class="btn btn-raised ripple-effect btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-flat ripple-effect btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-circle btn-raised ripple-effect btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-circle btn-flat ripple-effect btn-primary btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-raised ripple-effect btn-primary">Default button</button>
  <button type="button" class="btn btn-flat ripple-effect btn-primary">Default button</button>
  <button type="button" class="btn btn-circle btn-raised ripple-effect btn-primary">Default button</button>
  <button type="button" class="btn btn-circle btn-flat ripple-effect btn-primary">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-raised ripple-effect btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-flat ripple-effect btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-circle btn-raised ripple-effect btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-circle btn-flat ripple-effect btn-primary btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-raised ripple-effect btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-flat ripple-effect btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-circle btn-raised ripple-effect btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-circle btn-flat ripple-effect btn-primary 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-raised btn-primary btn-block ripple-effect">Block level button</button>
<button type="button" class="btn btn-flat btn-primary btn-block ripple-effect">Block level button</button>

Button groups

Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

Tooltips & popovers in button groups require special setting

When using tooltips or popovers on elements within a .btn-group, you'll have to specify the option container: 'body' to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).

Basic example

Wrap a series of buttons with .btn in .btn-group.

Copy
<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

Button toolbar

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

Copy
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">...</div>
  <div class="btn-group">...</div>
</div>

Sizing

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to the .btn-group.

Copy
<div class="btn-group btn-group-lg">...</div>
<div class="btn-group">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>

Nesting

Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.

Copy
<div class="btn-group">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Vertical variation

Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.

Copy
<div class="btn-group-vertical">
  ...
</div>

Justified button groups

Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.

Handling borders

Due to the specific HTML and CSS used to justify buttons (namely display: table-cell), the borders between them are doubled. In regular button groups, margin-left: -1px is used to stack the borders instead of removing them. However, margin doesn't work with display: table-cell. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.

IE8 and borders

Internet Explorer 8 doesn't render borders on buttons in a justified button group, whether it's on <a> or <button> elements. To get around that, wrap each button in another .btn-group.

See #12476 for more information.

With <a> elements

Just wrap a series of .btns in .btn-group.btn-group-justified.

Copy
Left Middle Right

Left Middle
Dropdown 
<div class="btn-group btn-group-justified">
  ...
</div>

With <button> elements

To use justified button groups with <button> elements, you must wrap each button in a button group. Most browsers don't properly apply our CSS for justification to <button> elements, but since we support button dropdowns, we can workaround that.

Copy
<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>