Assess your understanding of Bootstrap's cards, media objects, and image utility classes with targeted questions covering structure, alignment, and customization. This quiz is designed to help you reinforce key concepts in building responsive layouts and visually appealing components using Bootstrap’s utility classes and component features.
Which class should you use to add a title inside a Bootstrap card component for a user profile summary?
Explanation: The correct answer is 'card-title' because this class is specifically meant to style card titles inside a Bootstrap card body. 'card-header' is used to add a full-width header at the top of the card, not inside the card body. 'card-main' and 'title-card' are not valid Bootstrap classes and will not style the title appropriately. Using the right class ensures consistent styling and usability.
If you want to vertically center an image next to some text within a Bootstrap media object, which utility class should you use on the image element?
Explanation: 'align-self-center' is the correct Bootstrap utility for vertical alignment of the image within a flex container like a media object. 'media-align-middle' and 'img-vertical-center' are not proper Bootstrap classes, and 'center-img' does not provide vertical alignment within media objects. Using the precise utility class results in the intended vertical centering.
To place an image at the top of a Bootstrap card component displaying product details, which class should you assign to the image?
Explanation: 'card-img-top' is the appropriate class for placing images at the top of the card, ensuring proper spacing and alignment. 'img-card-top', 'card-image-head', and 'img-header' are not valid Bootstrap classes and thus would not apply the desired style. Selecting the right class also helps maintain semantic clarity and consistency.
Which utility class should you apply to an image inside a card to make it scale responsively with the parent element?
Explanation: 'img-fluid' is the Bootstrap utility class that makes images scale with their parent container while preserving aspect ratio. 'image-responsive', 'fluid-img', and 'img-scale' are not valid Bootstrap utility classes and will not achieve the same effect. The correct utility ensures images remain sharp and do not overflow their containers on smaller screens.
When nesting a media object inside another, which element should receive the 'media' class for proper structure in a Bootstrap testimonial layout?
Explanation: The 'media' class is intended for the wrapper of each item to properly structure the image and content side-by-side. Assigning it to the image, heading, or parent card container is incorrect because those elements are not responsible for the core media layout. Ensuring the wrapper uses 'media' allows for correct alignment and spacing of nested media objects.