Buttons in bootstrap

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.

<button type="button" class="btn"> Basic button </button>
<button type="button" class="btn btn-primary"> Primary button </button>
<button type="button" class="btn btn-secondary"> Secondary button </button>
<button type="button" class="btn btn-success"> Success button </button>
<button type="button" class="btn btn-info"> Info button </button>
<button type="button" class="btn btn-warning"> Warning button </button>
<button type="button" class="btn btn-danger" >Danger button </button>
<button type="button" class="btn btn-dark"> Dark button </button>
<button type="button" class="btn btn-light"> Light button </button>
<button type="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.

<button type="button" class="btn btn-warning"> Default button </button>
<button type="button" class="btn btn-warning btn-sm"> Small button </button>
<button type="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.

<button type="button" class="btn btn-outline-primary">Primary button</button>
<button type="button" class="btn btn-outline-secondary">Secondary button</button>
<button type="button" class="btn btn-outline-success">Success button</button>
<button type="button" class="btn btn-outline-info">Info button</button>
<button type="button" class="btn btn-outline-warning">Warning button</button>
<button type="button" class="btn btn-outline-danger" >Danger button</button>
<button type="button" class="btn btn-outline-dark">Dark button</button>
<button type="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.

<button type="button" class="btn btn-info active">Active info</button>
<button type="button" class="btn btn-info" disabled>Disabled info</button>

Output of above code


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.