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.

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.

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.

The class caret prints on button.

Reference: W3Schools

Thanks.

Salman Mushtaq

Email: salman_1538@hotmail.com