< Bootstrap Tutorial

Bootstrap buttons

← Previous Next →


Bootstrap Buttons

Buttons are the integral part of a website and application. They are used for various purposes like, submit or reset an HTML form, performing interactive actions such as showing or hiding something on a web page on click of the button, etc. The Bootstrap button CSS provides the quick and easy way to create and customize the buttons. Different classes are available in Bootstrap for styling the buttons as well as to indicate the different states. Button styles can be applied to any element. However, it is applied normally to the <a>, <input>, and <button> elements for the best rendering. 

The different button classes available in Bootstrap are:

Class Description
btn btn-default Default gray button with gradient.
btn btn-primary Provides extra visual weight to indicate primary action button in a set of buttons.
btn btn-info Can be used as an alternative to the default button.
btn btn-success Indicates a successful or positive action.
btn btn-warning Indicates caution should be taken with this action.
btn btn-danger Indicates a dangerous or potentially negative action.
btn btn-link Deemphasize a button by making it look like a link while maintaining button behavior.

Bootstrap gives us option further to scaling a button up or down. We can make buttons larger or smaller through adding an extra class .btn-lg, .btn-sm, or .btn-xs.

The following code will create different sizes of buttons:

<p>
    <button type="button" class="btn btn-primary btn-lg">Large button</button>
    <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
    <button type="button" class="btn btn-primary">Default button</button>
    <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
    <button type="button" class="btn btn-primary btn-sm">Small 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 button</button>
    <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

Sometimes we need to disable a button for certain reasons like, a user in case is not eligible to perform this particular action, or we want to ensure that user should performed all other required actions before proceed to this particular action. Buttons created through <a> tag can be disabled by adding the class .disabled.

The following code demonstrates how to do this:

<a href="#" class="btn btn-primary btn-lg disabled">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled">Link</a>
← Previous Next →