Why media components enhance content in Bootsrap - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a responsive image using Bootstrap's media component.

Bootsrap

<div class="media">
  <img src="image.jpg" class="[1]" alt="Sample image">
  <div class="media-body">
    <h5>Media heading</h5>
    <p>This is some content next to the image.</p>
  </div>
</div>

Drag options to blanks, or click blank then click option'

Amedia-object

Bimg-fluid

Cimg-thumbnail

Dimg-responsive

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'img-fluid' which is for responsive images but not specific to media components.

Using 'img-responsive' which is from older Bootstrap versions.

Using 'img-thumbnail' which adds borders and padding, not typical for media images.

Bootstrap's media component uses the class 'media-object' on images to style them properly within the media layout.

2fill in blank

medium

Complete the code to align the media image to the right side.

Bootsrap

<div class="media">
  <img src="photo.jpg" class="media-object [1]" alt="Photo">
  <div class="media-body">
    <p>Text content aligned with the image.</p>
  </div>
</div>

Drag options to blanks, or click blank then click option'

Afloat-end

Bfloat-right

Calign-right

Dfloat-start

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'float-right' which is deprecated in Bootstrap 5.

Using 'align-right' which is not a Bootstrap class.

Using 'float-start' which floats to the left.

In Bootstrap 5, 'float-end' is used to float elements to the right side, aligning the media image accordingly.

3fill in blank

hard

Fix the error in the media component code by completing the missing class for vertical alignment.

Bootsrap

<div class="media">
  <img src="avatar.png" class="media-object [1]" alt="Avatar">
  <div class="media-body">
    <p>User profile information.</p>
  </div>
</div>

Drag options to blanks, or click blank then click option'

Aalign-center

Balign-middle

Cvertical-align-middle

Dalign-self-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'align-middle' which is not a Bootstrap flexbox class.

Using 'align-center' which does not exist in Bootstrap.

Using 'vertical-align-middle' which is not a valid Bootstrap class.

Bootstrap uses 'align-self-center' to vertically center an item within a flex container like the media component.

4fill in blank

hard

Fill both blanks to create a media list with images aligned left and text content.

Bootsrap

<ul class="list-unstyled">
  <li class="media">
    <img src="icon.png" class="media-object [1] [2]" alt="Icon">
    <div class="media-body">
      <h6 class="mt-0 mb-1">List item title</h6>
      <p>Some description text here.</p>
    </div>
  </li>
</ul>

Drag options to blanks, or click blank then click option'

Ame-3

Bms-3

Cfloat-start

Dfloat-end

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'ms-3' which adds margin to the left side, pushing the image away incorrectly.

Using 'float-end' which floats the image to the right side.

Not adding margin causing text to stick to the image.

The class 'me-3' adds right margin to the image, spacing it from the text, and 'float-start' aligns the image to the left side.

5fill in blank

hard

Fill all three blanks to create a media object with a rounded image, aligned right, and text content.

Bootsrap

<div class="media">
  <img src="profile.jpg" class="media-object [1] [2] [3]" alt="Profile picture">
  <div class="media-body">
    <h5>Profile Name</h5>
    <p>Profile description goes here.</p>
  </div>
</div>

Drag options to blanks, or click blank then click option'

Arounded-circle

Bfloat-end

Cme-3

Dimg-thumbnail

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'img-thumbnail' which adds a border and padding, not needed here.

Using 'float-start' which floats the image left instead of right.

Not adding margin causing text to stick to the image.

The class 'rounded-circle' makes the image round, 'float-end' aligns it to the right, and 'me-3' adds margin on the right side to separate it from text.

Practice

1. Why do media components enhance content in Bootstrap?

easy

A. They combine images or videos with text to make content clearer and more engaging.

B. They only add decorative borders around images.

C. They replace all text with images.

D. They slow down page loading by adding extra code.

Solution

1. Step 1: Understand the purpose of media components

   Media components are designed to combine images, videos, or sounds with text to improve clarity and engagement.

2. Step 2: Compare options with this purpose

   Only They combine images or videos with text to make content clearer and more engaging. correctly describes this purpose; others are incorrect or misleading.

3. Final Answer:

   They combine images or videos with text to make content clearer and more engaging. -> Option A

4. Quick Check:

   Media components enhance content = They combine images or videos with text to make content clearer and more engaging. [OK]

Hint: Media components mix media and text for clarity [OK]

Common Mistakes:

• Thinking media components only add decoration
• Believing media components remove text
• Assuming media components slow down pages

2. Which Bootstrap class is used to create a media object container?

easy

A. media

B. media-object

C. media-container

D. media-box

Solution

1. Step 1: Recall Bootstrap media component classes

   Bootstrap uses the class media to create a media object container.

2. Step 2: Verify other options

   Classes like media-container, media-object, and media-box are not standard Bootstrap classes.

3. Final Answer:

   media -> Option A

4. Quick Check:

   Bootstrap media container class = media [OK]

Hint: Remember the main class is just 'media' [OK]

Common Mistakes:

• Using non-existent classes like media-object
• Confusing media with media-box
• Adding extra words to class names

3. What will this Bootstrap media component code display?

<div class="media">
  <img src="img.jpg" class="mr-3" alt="Image">
  <div class="media-body">
    <h5>Title</h5>
    <p>Description text here.</p>
  </div>
</div>

medium

A. Only the image will show, text will be hidden.

B. The title and description will appear above the image.

C. An image on the left with a title and description text to the right.

D. The image will appear below the text.

Solution

1. Step 1: Understand Bootstrap media layout

   The media class arranges the image and text side by side, with the image on the left by default.

2. Step 2: Analyze the code structure

   The img with class mr-3 adds margin to the right, spacing it from the text in media-body which contains the title and description.

3. Final Answer:

   An image on the left with a title and description text to the right. -> Option C

4. Quick Check:

   Bootstrap media layout = image left, text right [OK]

Hint: Media body text is always beside the image [OK]

Common Mistakes:

• Assuming text appears above or below image
• Ignoring margin class effects
• Thinking image hides text

4. Identify the error in this Bootstrap media component code:

<div class="media">
  <img src="photo.png" alt="Photo">
  <div class="media-body">
    <h4>Heading</h4>
    <p>Some text here.</p>
  </div>
</div>

medium

A. The image tag is missing the closing slash />.

B. The media-body div should be outside the media container.

C. The alt attribute should be empty.

D. Missing class mr-3 on the image for spacing.

Solution

1. Step 1: Check Bootstrap media spacing rules

   Bootstrap recommends adding margin classes like mr-3 to the image for spacing between image and text.

2. Step 2: Verify other parts of the code

   The media-body is correctly inside media, the image tag is valid without self-closing slash in HTML5, and alt should describe the image, not be empty.

3. Final Answer:

   Missing class mr-3 on the image for spacing. -> Option D

4. Quick Check:

   Image spacing class needed = Missing class mr-3 on the image for spacing. [OK]

Hint: Add margin class to image for spacing [OK]

Common Mistakes:

• Thinking image tag must self-close
• Placing media-body outside media
• Leaving alt attribute empty

5. You want to create a responsive media component with an image on the right and text on the left using Bootstrap. Which approach is correct?

hard

A. Place the image before the text without any extra classes.

B. Use media class and add flex-row-reverse to reverse the order.

C. Use media-body class on the image element.

D. Wrap the image in a container and text in row.

Solution

1. Step 1: Understand default media layout

   By default, Bootstrap media components place the image on the left and text on the right.

2. Step 2: Reverse order with flex utilities

   Adding the class flex-row-reverse to the media container reverses the order, placing the image on the right and text on the left.

3. Step 3: Check other options

   Simply placing image first won't reverse order; media-body is for text container, and container and row are unrelated to media component layout.

4. Final Answer:

   Use media class and add flex-row-reverse to reverse the order. -> Option B

5. Quick Check:

   Reverse media order with flex-row-reverse [OK]

Hint: Use flex-row-reverse to flip media order [OK]

Common Mistakes:

• Ignoring flex utilities for order change
• Misusing media-body on images
• Confusing container and row with media layout