Bootstrap 5 TutorialLesson 9Free preview
BS5 Images
This lesson is part of Bootstrap · All levels
Summary
Bootstrap creates a responsive image with .img-fluid that applies 100 percent max-width and automatic high so that the image does not overlap. Classes such as .rounded and .rounded-circle give rounded angles, while .img-thumbnail gives a preview-style frame. Always assign alt attributes to the image for accessibility.
Key points
- It makes the image adjust its maximum parent width. (.img-fluid)
- .rounded, .rounded-circle, .rounded-start, and .rounded-end set the angular shape.
- .img-thumbnail adds a white frame with a rounded angle.
- Always write the alt attribute as an image description.
- Combine with a wide utility such as .w-25 to limit the size of the image.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.