Bootstrap provides different types of button's class which
consist different size and style. There are following classes
for button are given:
1) btn
2) btn-primary
3) btn-secondary
4) btn-success
5) btn-danger
6) btn-warning
7) btn-info
8) btn-light
9) btn-dark
10) btn-link
Example of buttons
In this example different classes for buttons are used
which makes the button responsive and also some styles
are applied. Basis class for bootstrap buttons is .btn.
This class is used with all other classed for buttons in bootstrap.
<buttontype="button"class="btn">Basic button</button><buttontype="button"class="btn btn-primary">Primary button</button><buttontype="button"class="btn btn-secondary">Secondary button</button><buttontype="button"class="btn btn-success">Success button</button><buttontype="button"class="btn btn-info">Info button</button><buttontype="button"class="btn btn-warning">Warning button</button><buttontype="button"class="btn btn-danger">Danger button</button><buttontype="button"class="btn btn-dark">Dark button</button><buttontype="button"class="btn btn-light">Light button</button><buttontype="button"class="btn btn-link">Link button</button>
Output of above code
Button Sizes
In this example classes for size of a button in bootstrap
are given. There is a normal size button and then there
are two other classes like btn-sm is used for small
button and btn-lg is used for large size button.
<buttontype="button"class="btn btn-warning">Default button</button><buttontype="button"class="btn btn-warning btn-sm">Small button</button><buttontype="button"class="btn btn-warning btn-lg">Large button</button>
Button Outline
In this example some classes for outlines of a button are given. It apply border to the button and also makes a button hoverable.
<buttontype="button"class="btn btn-outline-primary">Primary button</button><buttontype="button"class="btn btn-outline-secondary">Secondary button</button><buttontype="button"class="btn btn-outline-success">Success button</button><buttontype="button"class="btn btn-outline-info">Info button</button><buttontype="button"class="btn btn-outline-warning">Warning button</button><buttontype="button"class="btn btn-outline-danger">Danger button</button><buttontype="button"class="btn btn-outline-dark">Dark button</button><buttontype="button"class="btn btn-outline-light text-dark">Light button</button>
Output of above code
Active and disabled buttons
In this example two classes are used to make a button disable and enable. Like active class is used to make a button clickable and disabled class is used to make a button disabled.
<buttontype="button"class="btn btn-info active">Active info</button><buttontype="button"class="btn btn-info"disabled>Disabled info</button>
Output of above code
Note:
Buttons classes of bootstrap can be inserted in links <a> and input fields <input>.
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
