Bootstrap 4 Media Objects Tutorial With Example

In Bootstrap 4 Media Objects Tutorial With Example, you will learn how to create media object with Bootstrap 4. Float media to the left or right of content with Bootstrap media object component. It is useful for UI components such as blog comments, Tweets, etc.

Bootstrap 4 Media Objects Tutorial With Example

Bootstrap 4 provides an easy way to align media objects (like images or videos) together with content. Media objects are usually used to display tweets, blog comments and so on.

#1: Bootstrap 4 Media Object

To create a media object, you can add the .media class to the container element, and place media content inside the child container with the .media-body class.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Media Objects Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Media Object</h2>
  <div class="media border p-3">
    <img src="/images/federer.jpg" alt="Roger Federer" class="mr-3 mt-3 rounded-circle" style="width:60px;">
    <div class="media-body">
      <h4>Roger Federer  <small>Posted on July 19, 2018</small></h4>
      <p>Hello Investmentnovel</p>      
    </div>
  </div>
</div>
</body> 
</html>

The example of a Bootstrap media object will look like below screenshot.

Bootstrap 4 Media Objects Example

#2: Bootstrap 4 Nested Media Object

A media object inside a media object called nested media object. To nest media objects, place a new .media container inside the .media-body container.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Media Objects Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Nested Media Object</h2>
  <div class="media border p-3">
    <img src="/images/federer.jpg" alt="Roger Federer" class="mr-3 mt-3 rounded-circle" style="width:60px;">
    <div class="media-body">
      <h4>Roger Federer <small>Posted on July 19, 2018</small></h4>
      <p>Hello Investmentnovel</p>
      <div class="media p-3">
        <img src="/images/nadal.jpg" alt="Rafael Nadal" class="mr-3 mt-3 rounded-circle" style="width:40px;">
        <div class="media-body">
          <h4>Rafeal Nadal <small>Posted on July 20 2018</small></h4>
          <p>Hello Investmentnovel</p>
        </div>
      </div>  
    </div>
  </div>
</div>
</body> 
</html>

The example of a Bootstrap nested media object will look like below screenshot.

Bootstrap 4 Nested Media Objects Example

#3: Bootstrap 4 Right-Aligned Media Image

To right-align the media image, you can add the image after the .media-body container.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Media Objects Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Right Align Media Image</h2>
  <div class="media border p-3">
      <div class="media-body">
        <h4>Roger Federer <small>Posted on July 19, 2018</small></h4>
        <p>Hello Investmentnoveel</p>      
      </div>
      <img src="/images/federer.jpg" alt="Roger Federer" class="mr-3 mt-3 rounded-circle" style="width:60px;">
    </div>
</div>
</body> 
</html>

The example of a Bootstrap right align media object will look like below screenshot.

Bootstrap 4 Right Align Media Image Example

#4: Bootstrap 4 Top, Middle or Bottom Alignment

You can use the flex utilities,align-self-* classes to place a media object on the top, middle or at the bottom.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Media Objects Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Media top, middle and bottom</h2>
  <div class="media">
    <img src="/images/federer.jpg" class="align-self-start mr-3" style="width:60px">
    <div class="media-body">
      <h4>Top</h4>
      <p>Hello Investmentnovel</p>
      <p>Hello Investmentnovel</p>
    </div>
  </div>
  <br>
  <div class="media">
    <img src="/images/federer.jpg" class="align-self-center mr-3" style="width:60px">
    <div class="media-body">
      <h4>Middle</h4>
      <p>Hello Investmentnovel</p>
      <p>Hello Investmentnovel</p>
    </div>
  </div>
  <br>
  <div class="media">
    <img src="/images/federer.jpg" class="align-self-end mr-3" style="width:60px">
    <div class="media-body">
      <h4>Bottom</h4>
      <p>Hello Investmentnovel</p>
      <p>Hello Investmentnovel</p>
    </div>
  </div>
</div>
</body> 
</html>

The example of a Bootstrap top, middle and bottom alignment media object will look like below screenshot.

Bootstrap 4 Media Top,Middle and Bottom Example

At last, our Bootstrap 4 Media Objects Tutorial With Example is over.

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.