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 –

The next instance shows all the above button classes –

<!-- Standard button --> <button type = "button" class = "btn btn-default">Default Button</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type = "button" class = "btn btn-primary">Primary Button</button> <!-- Indicates a successful or positive action --> <button type = "button" class = "btn btn-success">Success Button</button> <!-- Contextual button for informational alert messages --> <button type = "button" class = "btn btn-info">Info Button</button> <!-- Indicates caution should be taken with this action --> <button type = "button" class = "btn btn-warning">Warning Button</button> <!-- Indicates a dangerous or potentially negative action --> <button type = "button" class = "btn btn-danger">Danger Button</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type = "button" class = "btn btn-link">Link Button</button>

Button Size

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

<p> <button type = "button" class = "btn btn-primary btn-lg"> Large Primary button </button> <button type = "button" class = "btn btn-default btn-lg"> Large button </button> </p> <p> <button type = "button" class = "btn btn-primary"> Default size Primary button </button> <button type = "button" class = "btn btn-default"> Default size button </button> </p> <p> <button type = "button" class = "btn btn-primary btn-sm"> Small Primary button </button> <button type = "button" class = "btn btn-default btn-sm"> Small button </button> </p> <p> <button type = "button" class = "btn btn-primary btn-xs"> Extra small Primary button </button> <button type = "button" class = "btn btn-default btn-xs"> Extra small button </button> </p> <p> <button type = "button" class = "btn btn-primary btn-lg btn-block"> Block level Primary button </button> <button type = "button" class = "btn btn-default btn-lg btn-block"> Block level button </button> </p>

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 −

The next instance proves this −

<p> <button type = "button" class = "btn btn-default btn-lg "> Default Button </button> <button type = "button" class = "btn btn-default btn-lg active"> Active Button </button> </p> <p> <button type = "button" class = "btn btn-primary btn-lg"> Primary button </button> <button type = "button" class = "btn btn-primary btn-lg active"> Active Primary button </button> </p>

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 −

The next sample proves this −

<p> <button type = "button" class = "btn btn-default btn-lg"> Default Button </button> <button type = "button" class = "btn btn-default btn-lg" disabled = "disabled"> Disabled Button </button> </p> <p> <button type = "button" class = "btn btn-primary btn-lg"> Primary button </button> <button type = "button" class = "btn btn-primary btn-lg" disabled = "disabled"> Disabled Primary button </button> </p> <p> <a href = "#" class = "btn btn-default btn-lg" role = "button"> Link </a> <a href = "#" class = "btn btn-default btn-lg disabled" role = "button"> Disabled Link </a> </p> <p> <a href = "#" class = "btn btn-primary btn-lg" role = "button"> Primary link </a> <a href = "#" class = "btn btn-primary btn-lg disabled" role = "button"> Disabled Primary link </a> </p>

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 −

<a class = "btn btn-default" href = "#" role = "button">Link</a> <button class = "btn btn-default" type = "submit">Button</button> <input class = "btn btn-default" type = "button" value = "Input"> <input class = "btn btn-default" type = "submit" value = "Submit">