Bootstrap 4 JS Button

<!--

main_leaderboard, all: [728,90][970,90][320,50][468,60]

-->

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 ❯

搜尋此網誌

wefcdr