Tutorial on Bootstrap 3 Buttons

Bootstrap 3 Buttons is one of the most and freequently used component of bootstrap. now there is 8 different types of button with 4 different size and also there is a block label button which covers 100% of the container width.

** Note: A bootstrap 3 button can be effevtive on only input type submit or button or in a button tag or in a anchar tag.

Bootstrap 3 Buttons

Bootstrap 3 Buttons

Now the 8 types of Bootstrap 3 Buttons are:

Basic Bootstrap Button:

A basic button have gray background with rounded corner and black text it can be used by giving class name .btn which have to give in all type of button while want to use a bootstrap button.

Example:

Try it yourself

<button type="button" class="btn">Basic</button>

Default Bootstrap Button:

A default button have white background with rounded corner and black text it can be used by giving class name .btn and .btn-default.

Example:

 

Try it yourself

<button type="button" class="btn btn-default">Default</button>

Primary Bootstrap Button:

A primary button have deep blue background with rounded corner and white text, it can be used by giving class name .btn and .btn-primary.

Example:

 

Try it yourself

<button type="button" class="btn btn-primary">Primary</button>

Success Bootstrap Button:

A success button have green background with rounded corner and white text, it can be used by giving class name .btn and .btn-success.

Example:

 

Try it yourself

<button type="button" class="btn btn-success">Success</button>

Info Bootstrap Button:

A info button have sky blue background with rounded corner and white text, it can be used by giving class name .btn and .btn-info.

Example:

 

Try it yourself

<button type="button" class="btn btn-info">Info</button>

Warning Bootstrap Button:

A warning button have deep yellow background with rounded corner and white text, it can be used by giving class name .btn and .btn-warning.

Example:

 

Try it yourself

<button type="button" class="btn btn-warning">Warning</button>

Danger Bootstrap Button:

A danger button have red background with rounded corner and white text, it can be used by giving class name .btn and .btn-danger.

Example:

 

Try it yourself

<button type="button" class="btn btn-danger">Danger</button>

Link Type Bootstrap Button:

A link type button is not have a button like view it is looked like a link with hover effect and the text color is blue, it can be used by placing the class name .btn and .btn-link

Example:

 

Try it yourself

<button type="button" class="btn btn-link">Link</button>

** All button type have a shadow effect on hover

The Size of buootstrap 3 button

An I have informed on above thet there is 4 type of size in bootstrap button and they are

Large Button:

to make a large button have to use the class name .btn-lg with class name .btn and also can be used the other button type class with it like .btn-primary

Example:

 

Try it yourself

<button type="button" class="btn btn-primary btn-lg">Large</button>

Medium Button:

to make a medium button have to use the class name .btn-md with class name .btn and also can be used the other button type class with it like .btn-primary

Example:

 

Try it yourself

<button type="button" class="btn btn-primary btn-md">Medium</button>

Small Button:

to make a small button have to use the class name .btn-sm with class name .btn and also can be used the other button type class with it like .btn-primary

Example:

 

Try it yourself

<button type="button" class="btn btn-primary btn-sm">Small</button>

Extra Small Button:

to make a extra small button have to use the class name .btn-xs with class name .btn and also can be used the other button type class with it like .btn-primary

Example:

 

Try it yourself

<button type="button" class="btn btn-primary btn-sm">Extra Small</button>

Block Level Buttons

A block level button takes the entire width or 100% of the parent element. and to use it have to use the class name btn-block with class name .btn and also can be used the other button type class with it like .btn-primary
Example:

 

Try it yourself

<button type="button" class="btn btn-primary btn-block">Button 1</button>

Bootstrap Disabled Button

To make a button disabled or not clickable use the class name .disabled with class name .btn
Example:

 

Try it yourself

<button type="button" class="btn btn-primary btn-disabled">Button 1</button>

In this post we have gone through bootstrap 3 buttons. please provide your valuable comments to make the site better useful.

Thanks for Reading

Share The Post On -

Add a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.