Bootstrap Buttons

Bootstrap provides various styles for a button. You can applies these styles using the following classes:

  • btn
  • btn-default
  • btn-primary
  • btn-success
  • btn-info
  • btn-warning
  • btn-danger
  • btn-link

Here is an example using all the above classes:

Example:

<button class="btn"> Button </button>
<button class="btn btn-default"> Default </button>
<button class="btn btn-primary"> Primary </button>
<button class="btn btn-success"> Success </button>
<button class="btn btn-info"> Info </button>
<button class="btn btn-warning"> Warning </button>
<button class="btn btn-danger"> Danger </button>
<button class="btn btn-link"> Link </button>

Run Example

Sizes of Button

You can use different sizes of button using following classes:

  • btn-lg
  • btn-md
  • btn-sm
  • btn-xs

Here is the example of different button sizes:

Example:

<button class="btn btn-success btn-lg"> Large </button>
<button class="btn btn-success btn-md"> Medium </button>
<button class="btn btn-success btn-sm"> Small </button>
<button class="btn btn-success btn-xs"> Extra Small </button>

Run Example

Bootstrap Active/Disabled Buttons

You can set a button active or disabled using .active and .disabled classes. The .active class sets a button clickable and the .disabled class makes a button unclickable.

Example:

<button class="btn btn-success active"> Active </button>
<button class="btn btn-success disabled"> Disabled </button>

Run Example

Bootstrap Block-level Buttons

A block level button takes the full widht of its parent element. You can do it using .btn-block class.

Example:

<button class="btn btn-success btn-block"> Block Button </button>

Run Example

Recommended Posts: