Bootstrap Buttons

Advertisements


This chapter 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:

ClassDescription
btnDefault/ Standard button.
btn-primaryProvides extra visual weight and identifies the primary action in a set of buttons.
btn-successIndicates a successful or positive action.
btn-infoContextual button for informational alert messages.
btn-warningIndicates caution should be taken with this action.
btn-dangerIndicates a dangerous or potentially negative action.
btn-linkDeemphasize a button by making it look like a link while maintaining button behavior.

Following example demonstrates 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 Options Demo

Button Size

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

ClassDescription
.btn-lgThis makes button size large.
.btn-smThis makes button size small.
.btn-xsThis makes button size with extra small.
.btn-blockThis creates block level buttons—those that span the full width of a parent.

The following example demonstrates this:

<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 Size Demo

Button State

Bootstrap provides classes which allow you 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:

ElementClass
Button element Use .active class to show that it is activated..
Anchor elementUse .active class to <a> buttons to show that it is activated.

The following example demonstrates 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>
Button Active State Demo

Disabled State

When you disable 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:

ElementClass
Button elementAdd the disabled attribute to <button> buttons.
Anchor elementAdd the disabled class to <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 following example demonstrates 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 Disabled State Demo

Button Tags

You may use button classes with <a>, <button>, or <input> element. But it is recommended that you use it with <button> elements mostly to avoid cross browser inconsistency 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">
Button Tags Demo


Advertisements
Advertisements