Bootsrapmarkup~30 mins

Why media components enhance content in Bootsrap - See It in Action

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Why Media Components Enhance Content with Bootstrap

📖 Scenario: You are creating a simple webpage to showcase a blog post with an image and text side by side. You want to use Bootstrap's media component to make the content visually appealing and easy to read.

🎯 Goal: Build a webpage using Bootstrap's media component that displays an image on the left and text content on the right, demonstrating how media components enhance content presentation.

📋 What You'll Learn

Use Bootstrap 5 media component structure

Include an image on the left side with alt text for accessibility

Add a heading and paragraph text on the right side

Ensure the layout is responsive and visually balanced

💡 Why This Matters

🌍 Real World

Media components are commonly used in blogs, news sites, and social media to combine images and text in a clean, readable way.

💼 Career

Understanding how to use Bootstrap media components helps you build professional, responsive layouts quickly, a valuable skill for front-end web development jobs.

Progress0 / 4 steps

Create the HTML skeleton with Bootstrap CSS link

Write the basic HTML5 structure including <!DOCTYPE html>, <html lang="en">, <head> with <meta charset="UTF-8">, <meta name="viewport" content="width=device-width, initial-scale=1">, and link to Bootstrap 5 CSS from CDN inside the <head>. Also add an empty <body> section.

Bootsrap

Need a hint?

Remember to include the Bootstrap CSS link inside the <head> for styling.

Add a container and media component structure

Inside the <body>, add a <div> with class container mt-4. Inside this container, create a <div> with class d-flex align-items-start to start the media component layout.

Bootsrap




  
  
  Media Component Example

Need a hint?

Use Bootstrap's container class for page padding and d-flex align-items-start to start the media layout.

Add the image and text content inside the media component

Inside the div with class d-flex align-items-start, add an <img> tag with src="https://via.placeholder.com/100", class="me-3" for margin, and alt="Placeholder image". Next to the image, add a <div> containing a <h5> with text Media Heading and a <p> with text This is some example text to show how media components enhance content layout.

Bootsrap




  
  
  Media Component Example

Need a hint?

Use me-3 class on the image to add right margin and place the heading and paragraph inside a <div> next to the image.

Make the media component responsive

Add the Bootstrap class flex-column flex-sm-row to the div with class d-flex align-items-start to make the media stack vertically on small screens and horizontally on larger screens.

Bootsrap




  
  
  Media Component Example
  


  
    
      
      
        Media Heading
        This is some example text to show how media components enhance content layout.

Need a hint?

Use Bootstrap's responsive flex classes flex-column flex-sm-row to stack on small screens and align horizontally on larger screens.