Bootstrap 4 JS Button
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); });
Bootstrap 4 JS Button
❮ Previous
Next ❯
Button CSS Classes
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 |
Via JavaScript
Enable manually with:
$('.btn').button();
Button Options
| None |
Button Methods
The following table lists all available button methods.
Note: Methods can also be passed via data
attributes; append the method name to data-, as in data-toggle or data-dispose.
| Method | Description | Try it |
|---|---|---|
| .button("toggle") | Makes the button look pressed | Try it |
| .button("dispose") | Destroys an element's button |
<!--
More Examples
Using CSS to Customize Buttons
How to remove the rounded borders:
Example
.btn-primary {
border-radius: 0;
}Try it Yourself »
How to add a specific background color and text color:
Example
.btn{
background: #000;
color: #fff;
}
.btn:hover {
background: #fff;
color: #000;
}Try it Yourself »
How to add shadows:
Example
.btn-primary {
box-shadow: 1px 2px 5px #000000;
}Try it Yourself »
-->
❮ Previous
Next ❯
