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



Example

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

.btn-lg
.btn-md
.btn-sm
.btn-xs


Example

<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

Description

.btn

Adds basic styling to any button

.btn-default

default/standard button

.btn-primary

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

.btn-success

display a successful or positive action

.btn-info

Contextual button for informational alert messages

.btn-warning

Indicate caution should be taken with this action

.btn-danger

Indicate dangerous or potentially negative action

.btn-link

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

.btn-lg

Use to add a large button

.btn-sm

Use to add a small button

.btn-xs

Use to add an extra small button

.btn-block

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

.active

Use to display button appear pressed

.disabled

Use to display the button disabled

Leave a Reply

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