Bootstrap 3 Buttons is one of the most and a frequently used component of bootstrap. now there are 8 different types of a 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 effective on only input type submit or button or in a button tag or in an anchor tag.
Bootstrap 3 Buttons
Now the 8 types of Bootstrap 3 Buttons are:
Basic Bootstrap Button:
A basic button has a gray background with rounded corner and black text it can be used by giving the class name .btn which have to give in all types of buttons while want to use a bootstrap button.
Example:
<button type="button" class="btn">Basic</button>
Default Bootstrap Button:
A default button has a white background with rounded corner and black text it can be used by giving the class name .btn and .btn-default.
Example:
<button type="button" class="btn btn-default">Default</button>
Primary Bootstrap Button:
A primary button has a deep blue background with rounded corner and white text, it can be used by giving the class name .btn and .btn-primary.
Example:
<button type="button" class="btn btn-primary">Primary</button>
Success Bootstrap Button:
A success button has a green background with rounded corner and white text, it can be used by giving the class name .btn and .btn-success.
Example:
<button type="button" class="btn btn-success">Success</button>
Info Bootstrap Button:
An info button has a sky blue background with rounded corner and white text, it can be used by giving the class name .btn and .btn-info.
Example:
<button type="button" class="btn btn-info">Info</button>
Warning Bootstrap Button:
A warning button has a deep yellow background with rounded corner and white text, it can be used by giving the class name .btn and .btn-warning.
Example:
<button type="button" class="btn btn-warning">Warning</button>
Danger Bootstrap Button:
A danger button has a red background with rounded corner and white text, it can be used by giving the class name .btn and .btn-danger.
Example:
<button type="button" class="btn btn-danger">Danger</button>
Link Type Bootstrap Button:
A link-type button does not have a button like a 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:
<button type="button" class="btn btn-link">Link</button>
** All button type have a shadow effect on hover
The Size of bootstrap 3 button
An I have informed on above that 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:
<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:
<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:
<button type="button" class="btn btn-primary btn-sm">Small</button>
Extra Small Button:
to make an 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:
<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:
<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:
<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