Bootstrap 5 TutorialLesson 12Free preview

BS5 Buttons

This lesson is part of Bootstrap · All levels

Summary

Bootstrap embellishes buttons through the .btn class in color combinations such as .btn-primary or .btn-outline-secondary. The button size is set to .btn-lg and .btn-sm, while for full width use the utility .w-100. The variation of the outline makes the horizontal button transparent with a colored border.

Key points

.btn is the basic class of all Bootstrap buttons.
Content variants: .btn-primary, .btn-success, .btn-danger, and others.
Variation outline: .btn-outline-* with a transparent background and colored border.
Size: .btn-lg and .btn-sm; full width using .w-100.
The active button uses the class .active, the nonactive button uses the disabled attribute.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.