BootStrap Button Classes

Bootstrap offers us different button styles. We can apply these styles to tags like a, button, input.

Above, you can see the button classes that BootStrap 3 offers us. At the bottom, you see the Bootstrap 4 buttons.

As you can see, there are some differences between versions 3 and 4, even in styles with the same name.

The .btn selector (class) is used to create a button. E.g;

You can make the button look like one of the above by using the default, primary, success, info, warning, danger, link selectors together with the .btn selector. If you are using BootStrap4 you can also use the light, dark and secondary selectors.

Selectors btn-lg, btn-md, btn-sm and btn-xs can be used for different button sizes.

btn-lg btn-md btn-sm btn-xs

.btn-block seçicisi, buton genişliğinin %100 olmasını sağlar.

btn-block

The .active selector makes the button appear as it was when it was pressed. The .disabled selector disables the button.

Aktif Buton Pasif Buton

In BootStrap 4, in addition to all these, unfilled, only bordered (outline) buttons can be used. When hovering over it, the fill color appears:

As you can see, there are many easy-to-apply alternatives for the button.

Do not forget that we can make changes to the appearance of these buttons with our own css codes.

In the topic examples section, there is an example of applying our own styles to bootstrap buttons.

EXERCISES