HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
For a tutorial about Buttons, read our Bootstrap Buttons Tutorial
For a tutorial about Buttons, read our Bootstrap Buttons Tutorial.
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-block |
Makes a block-level button (spans the full width of the parent element) | Try it |
.btn-danger |
Indicates a dangerous or potentially negative action | Try it |
.btn-dark |
Dark grey button | Try it |
.btn-default |
Indicates a default/standard button | Try it |
.btn-info |
Contextual button for informational alert messages | Try it |
.btn-lg |
Makes a large button | Try it |
.btn-light |
Light grey button | Try it |
.btn-link |
Makes a button look like a link (will still have button behavior) | Try it |
.btn-outline-* |
Creates an outlined/bordered button. Use any of the contextual classes as * (btn-outline-primary, btn-outline-success, etc) | Try it |
.btn-primary |
Provides extra visual weight and identifies the primary action in a set of buttons | Try it |
.btn-sm |
Makes a small button | Try it |
.btn-success |
Indicates a successful or positive action | Try it |
.btn-secondary |
Indicates a "less" important action | Try it |
.btn-toolbar |
Combine sets of button groups into button toolbars for more complex components | Try it |
.btn-warning |
Indicates caution should be taken with this action | Try it |
.active |
Makes the button appear pressed | Try it |
.disabled |
Makes the button disabled | Try it |
Enable manually with:
$('.btn').button();
None |
The following table lists all available button methods.
Method | Description | Try it |
---|---|---|
.button("toggle") | Makes the button look pressed | Try it |
.button("dispose") | Destroys an element's button |