Bootstrap Buttons

Button is a very important component for any html page. Bootstrap is giving us a very butiful responsive buttons and its working on a tag, input tag, and button tag,

For example and code visit my website

Example:

Link

Options of buttons:

There is some classes to give the color of the button I giving the example one by one.

Default

It will create a default white button. And for that we have to use the class .btn-default with the class .btn

Example: 

Blue Button(Primary Button):

It will make a button color blue. For that we have to use the class .btn-primary with the class .btn

Example: 

Green Button(Success Button):

It will make a button color Green. For that we have to use the class .btn-success with the class .btn

Example: 

Sky Colored Button(Info Button):

It will make a button color Sky Colored. For that we have to use the class .btn-info with the class .btn

Example: 

Yellow Button(Worning Button):

It will make a button color Yellow. For that we have to use the class .btn-worning with the class .btn

Example: 

Red Button(Danger Button):

It will make a button color Red. For that we have to use the class .btn-danger with the class .btn

Example: 

Make a button as Link

To make a button as a link we have to give the class name .btn-link with the class .btn

Example: 

Sizes

Bootstrap is providing verious type of button size they are:

Large Button:

To make a button large using bootstrap we have to use the class .btn-lg with the class btn and btn-default or btn-success etc.

Example: 

Default Button:

For that we does not need the size class of button as its the default size of a bootstrap button

Example: 

Small Button:

To make a button Small using bootstrap we have to use the class .btn-sm with the class btn and btn-default or btn-success etc.

Example: 

Extra Small Button:

To make a button Extra Small using bootstrap we have to use the class .btn-xs with the class btn and btn-default or btn-success etc.

Example: 

Block Level Button:

To make a bootstrap button block level we have to use the class name .btn-block with the class btn and btn-default or btn-success etc and btn-xs btn-lg etc.

Active state

To make a button in active status we have to use the class name .active with the other button classes.

Example: 

Disabled Status:

To make a button disabled we have to use the attribute  disabled=”disabled” in a button or anchor tag with the button classes.

Example: