Bootstrap Button

Button is a main control in software applications and it’s has different type and sizes. Bootstrap provides us some pre-defined classed which save developers times as well as effort in web pages development. Bootstrap has seven pre-defined styles to display buttons in different colors.

Button Styles

Bootstrap provides seven styles of buttons:

.btn-default – Default

.btn-primary – Primary

.btn-success – Success

.btn-info – info

.btn-warning – warning

.btn-danger – danger

.btn-link link


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


We can use bootstrap button class on <a><button>, or <input> element like below

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

Button Size –
Bootstrap provides has four button sizes:



<button type=”button” class=”btn btn-primary btn-lg”>Large</button>
<button type=”button” class=”btn btn-primary btn-md”>Medium</button>
<button type=”button” class=”btn btn-primary btn-sm”>Small</button>
<button type=”button” class=”btn btn-primary btn-xs”>XSmall</button>


Block type Button –
spans the entire width of the parent element.

<button type=”button” class=”btn btn-primary btn-block”>Block Button </button>

Active/Disabled Buttons

The class. active makes a button appear pressed, and the class .disabled makes a button has disabled.

<button type=”button” class=”btn btn-primary active”>Active Primary</button>
<button type=”button” class=”btn btn-primary disabled”>Disabled Primary</button>


Bootstrap button Class



Adds basic styling to any button


default/standard button


Provides extra visual weight and identifies the primary action in a set of buttons


display a successful or positive action


Contextual button for informational alert messages


Indicate caution should be taken with this action


Indicate dangerous or potentially negative action


Indicate a button look like a link (will still have button behavior)


Use to add a large button


Use to add a small button


Use to add an extra small button


Use to add a block-level button (spans the full width of the parent element)


Use to display button appear pressed


Use to display the button disabled

Leave a Reply

Your email address will not be published. Required fields are marked *