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.