Bootstrap buttons are basically use in forms , dialog and many more elements wit preedefine styling
Bootstrap buttons are very easy to use in our programs.
<button type "button" class "btn btn-primary" >Primary </button>
<button type "button" class "btn btn-secondary" >secondary</button>
<button type "button" class "btn btn-danger" >danger</button>
<button type "button" class "btn btn-warning" >warning</button>
<button type "button" class "btn btn-info" class "btn btn.text-nowrap" >info</button>
Button Tags In Bootstrap
In Bootstrap .btn is a pree defined class which is use with buttons,but we can also use with <a> tag.
<a class "btn btn-primary" href="#" role="button" >Link </a>
<button class "btn btn-primary" type "submit" >Button </button>
<input class "btn btn-primary" type "button" value="Input" >
<input class "btn btn-primary" type "submit" value="Submit" >
<input class "btn btn-primary" type "reset" value="Reset" >
Button Outline
In Bootstrap we can also set the outline of button by using .btn-outline class, which is a predefined class.
<button class="btn btn-outline-primary" >Code Family</button>
<button class="btn btn-outline-secondary" >Code Family</button>
<button class="btn btn-outline-success" >Code Family</button>
<button class="btn btn-outline-danger" >Code Family</button>
Bootstrap Button Size
In Bootstrap we can also customize the size of bootstrap buttons by using some preedefined classes such as btn-lg and btn-sm. We can also define block level buttons as well with complete height and width by using btn-block class.
<button class="btn btn-primary btn-lg" >Code Family</button>
<button class="btn btn-secondary btn-lg" >Code Family</button>
<button class="btn btn-secondary btn-sm" >Code Family</button>
<button class="btn btn-secondary btn-lg btn-block" >Code Family</button>
<button class="btn btn-primary btn-lg btn-block" >Code Family</button>
Bootstrap Button States
In Bootstrap we can explicitly show the state of the button like button is inable or disable.If button is in active state we use .active or if the button is disable then we use .disabled. We should use area-pressed=true attribue , which defines the programmatically state.
<a href="#" class "btn btn-danger" active role="button" aria-pressed="true" >Code family</a>
<a href="#" class "btn btn-primary btn-lg" disabled>Code </a>
Button Plugin
To use more componants of buttons we should use button plugin because it provides much more button componants like toggels , button group etc.
<button type "button" class "btn btn-primary" data-toggle="button" aria-pressed="false" > toggle button
</button>
Try Yourself
