Subscribe via RSS Feed

Bootstrap Buttons

June 14, 2014 1 Comment

In every website to trigger an event we always take help of abutton or a huperlink. So, we can say that button is an essential element to websites. Keeping that in mind bootstrap also usese buttons , but somewhat a liitle different than others. This article will discuss about how to use Bootstrap button with examples. Anything that is given a class of .btn will inherit the default look of a gray button with rounded corners. However Bootstrap provides some options to style buttons, which are summarized in the following table:

Class

Description

Color

Example

btn

Default/ Standard button.

White

<button type=”button”>Default Button</button>

btn-primary

Identifies the primary action .

Blue

<button type=”button”>Primary Button</button>

btn-success

Indicates a successful action.

Green

<button type=”button”>Success Button</button>

btn-warning

Indicates caution.

Yellow

<button type=”button”>Warning Button</button>

btn-danger

Indicates a dangerous action.

Red

<button type=”button”>Danger Button</button>

btn-link

Making a button look like link.

Blue

<button type=”button”>Link Button</button>

Button State
Bootstrap provides classes which allows to change the state of buttons say active, disabled etc each of these are discussed in the following sections:

ACTIVE STATE
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. The following table summarizes classes used to make button element and anchor element active:

Element

Class

Description

Example

Button element

.active

Use .active class to show that it is activated.

<button type=”button”>

Active Button

</button>

DISABLED STATE
When disabling a button, it will fade in color by 50%, and lose the gradient.

The following table summarizes classes used to make button element and anchor element disabled:

Element Class Description Example

Button element

disabled Add the disabled attribute to <button> buttons. <button type=”button” disabled=”disabled”>

Disabled Button

</button>

Anchor element

disabled Add the disabled class to <a> buttons. <a href=”#” role=”button”>

Disabled Link

</a>

Button Size
The following table summarizes classes used to get buttons of various sizes:

Class

Description

Example

.btn-lg

This makes button size large.

<button type=”button”>

Large Primary button

</button>

.btn-sm

This makes button size small.

<button type=”button”>

Small Primary button

</button>

.btn-xs

This makes button size extra small.

<button type=”button”>

Extra small Primary button

</button>

.btn-block

This creates block level buttons.

<button type=”button”>

Block level Primary button

</button>

Let us see a complete code including all the features in button that has been discussed above.

<!DOCTYPE html>
<html>

  <head>
    <title>Try Bootstrap Online</title>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link data-require="[email protected]" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  </head>

  <body>
    <p>

      <button type="button" class="btn btn-link btn-lg">Large link button
   </button>
    </p>
    <p>
      <button type="button" class="btn btn-primary">
      Default size Primary button
   </button></p><p>
      <button type="button" class="btn btn-default">
      Default normal size button
   </button>
    </p>
    <p>

      <button type="button" class="btn btn-warning btn-sm">
      Small warning button
   </button>
    </p>
    <p>

      <button type="button" class="btn btn-success btn-xs">
      Extra small success button
   </button>
    </p>
    <p>
      <button type="button" class="btn btn-primary btn-lg btn-block btn-lg active">
      Block level Active Primary button
   </button>
      <button type="button" class="btn btn-danger  btn-default btn-lg btn-block btn-lg disabled">
      Danger Block Disabled button
   </button>
    </p>
  </body>
</html>	

boot_buttons

If you find this article helpful, you can connect us in Google+ and Twitter.