Bootstrap CSS Buttons Reference

❮ Previous Next ❯

Button Colors

Button Sizes

Active/Disabled Buttons

Block-level Button

Button Groups

Button Classes

The classes below can be used to style any <a>, <button>, or <input> element:

Class	Description	Example
.btn	Adds basic styling to any button	Try it
.btn-default	Indicates a default/standard button	Try it
.btn-primary	Provides extra visual weight and identifies the primary action in a set of buttons	Try it
.btn-success	Indicates a successful or positive action	Try it
.btn-info	Contextual button for informational alert messages	Try it
.btn-warning	Indicates caution should be taken with this action	Try it
.btn-danger	Indicates a dangerous or potentially negative action	Try it
.btn-link	Makes a button look like a link (will still have button behavior)	Try it
.btn-lg	Makes a large button	Try it
.btn-sm	Makes a small button	Try it
.btn-xs	Makes an extra small button	Try it
.btn-block	Makes a block-level button (spans the full width of the parent element)	Try it
.active	Makes the button appear pressed	Try it
.disabled	Makes the button disabled	Try it
.navbar-btn	Vertically aligns a button inside a navbar	Try it

Button Group Classes

The classes below can be used to style any <a>, <button>, or <input> element:

Class	Description	Example
.btn-group	Groups buttons together on a single line	Try it
.btn-group-justified	Makes a group of buttons span the entire width of the screen	Try it
.btn-group-lg	Large button group (makes all buttons in a button group larger - increased font-size and padding)	Try it
.btn-group-sm	Small button group (makes all buttons in a button group smaller)	Try it
.btn-group-xs	Extra small button group (makes all buttons in a button group extra small)	Try it
.btn-group-vertical	Makes a button group appear vertically stacked	Try it

❮ Previous Next ❯

Copyright 1999-2023 by Refsnes Data. All Rights Reserved.