Bootstrap Buttons - Bootstrap

What are Buttons in Bootstrap?

Following section covers the use age of Bootstrap button with instances. Whatever that is given a class of .btn will receive the default look of a gray button with rounded corners. Nevertheless, Bootstrap provides some options to style buttons, which are summarized in the subsequent table –

Class

Description

btn

Default/ Standard button.

btn-primary

Provides extra visual weight and identifies the primary action in a set of buttons.

btn-success

Indicates a successful or positive action.

btn-info

Contextual button for informational alert messages.

btn-warning

Indicates caution should be taken with this action.

btn-danger

Indicates a dangerous or potentially negative action.

btn-link

Deemphasize a button by making it look like a link while maintaining button behavior.

The next instance shows all the above button classes –

Button Size

The next table sreviews the classes used to get buttons of various sizes −

Class

Description

.btn-lg

This makes the button size large.

.btn-sm

This makes the button size small.

.btn-xs

This makes the button size extra small.

.btn-block

This creates block level buttons—those that span the full width of a parent.

Button State

State of buttons as active, disabled etc can be altered by using bootstrap provided classes. Each of which is discussed in the next sections.

Active State

When active buttons will appear pressed (with a darker background, darker border, and inset shadow). The subsequent table reviews classes used to make button elements and anchor elements active −

Element

Class

Button element

Use.activeclass to show that it is activated.

Anchor element

Use.activeclass to <a> buttons to show that it is activated.

The next instance proves this −

Disabled State

Button will fade in color by 50%, and lose the gradient, When you disable a button

The subsequent table reviews classes used to make button element and anchor element disabled −

Element

Class

Button element

Add thedisabledattributeto <button> buttons.

Anchor element

Add thedisabledclassto <a> buttons.

Note− This class will only change the <a>'s appearance, not its functionality. You need to use custom JavaScript to disable links here.

The next sample proves this −

Disabled state

Button Tags

You may use button classes with <a>, <button>, or <input> element. But it is suggested that you use it with <button> elements commonly to avoid cross browser irregularity issues.

The following example demonstrates this −


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Bootstrap Topics