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 –




Default/ Standard button.


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


Indicates a successful or positive action.


Contextual button for informational alert messages.


Indicates caution should be taken with this action.


Indicates a dangerous or potentially negative action.


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 −




This makes the button size large.


This makes the button size small.


This makes the button size extra small.


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 −



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 −



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 © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

Bootstrap Topics