Download - BootStrap 3 - Lecture 4
![Page 1: BootStrap 3 - Lecture 4](https://reader031.vdocument.in/reader031/viewer/2022022413/58a2793f1a28ab94628b774d/html5/thumbnails/1.jpg)
Boot Strap 3 – Lecture 4
Ok today I teach you beautiful feature of Bootstrap buttons. And please note that for Bootstrap I use BS
onward.
Buttons
Buttons have also different classes. All classes are same but the physical look is changed and depends on
the requirement.
o .btn-default
o .btn-primary
o .btn-danger
o .btn-info
o .btn-link
o .btn-success
o .btn-warning
Above are seven classes for buttons and you can also you sm, lg, etc. with these classes to make smaller,
larger and extra larger.
Button classes use with <a>, <button>, or <input> and also <asp:Button> control.
For button sizes please see below picture.
You can also use .btn-block to make button with 100% width.
![Page 2: BootStrap 3 - Lecture 4](https://reader031.vdocument.in/reader031/viewer/2022022413/58a2793f1a28ab94628b774d/html5/thumbnails/2.jpg)
Sometimes we just shows button but do not want to make it clickable. And want to play with JQuery.
And change its property or class at runtime you can use:
o .active (to make button clickable)
o .disabled (to make button unclick able)
Button Group
Sometimes for visibility purpose you need a group of button. It seems beautiful. So for this you just use
.btn-group class with <div>
Output:
By default its direction is horizontal. But if you want to display it in vertical direction you just use class
.btn-group-vertical. The only benefit of button group is you can some common property to .btn-group
and it automatically applies to all button under it.
Yes you can also display button group on entire span (with 100% width) with using justified class.
![Page 3: BootStrap 3 - Lecture 4](https://reader031.vdocument.in/reader031/viewer/2022022413/58a2793f1a28ab94628b774d/html5/thumbnails/3.jpg)
And the most important benefit of buttons/ group buttons is you can use nested group button and drop
downs.
You can also split buttons and drop downs.
![Page 4: BootStrap 3 - Lecture 4](https://reader031.vdocument.in/reader031/viewer/2022022413/58a2793f1a28ab94628b774d/html5/thumbnails/4.jpg)
The class caret prints on button.
Reference: W3Schools
Thanks.
Salman Mushtaq
Email: [email protected]