Bootstrap 4 Media Objects
Bootstrap 4 Media Objects
Bootstrap 4 offers a media object component that aligns the media objects and the content. The media object is used to create a repetitive and complex component in which media is placed on either side (i.e., either left or right) of the component such as blogs, tweets, comments, etc.
Basic Media Object – The basic media object is used to create a layout that contains media on any one side (either left or right) along with the content.
Steps for creating Media Object
- Add .media class to the parent element <div>.
- Add the .media-body class to the child element to add the body.
Note: You need to add margin and padding on your own with the help of spacing utilities.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Media Object 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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Media Object</h2><br>
<div class="media border p-3">
<img src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1" alt="John Williams" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div class="media-body">
<h4>John Williams <small><i>Posted on June 10, 2020</i></small></h4>
<p>John is a software engineer. He works in a multinational firm. He is specialize in many fields.</p>
</div>
</div>
</div>
</body>
</html>
Output
Nested Media Object – Bootstrap 4 also allows you to create a nested media object. The nested media object mans one media object inside the other. The example of the nested media object is comment thread. To create a nested media object,
- Add a new .media class to the <div> element.
- Add the .media-body to the child element.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Media Object 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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Nested Media Objects</h2>
<div class="media border p-3">
<img src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div class="media-body">
<h4>John Williams <small><i>Posted on May 22, 2020</i></small></h4>
<p>John is a software engineer. He works in a multinational firm. He is specialize in many fields.</p>
<p>He is a very professional engineer and has done so many projects.</p>
<div class="media p-3">
<img src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
<div class="media-body">
<h4>Jane Williams <small><i>Posted on May 23 2020</i></small></h4>
<p>John is a software engineer. He works in a multinational firm. He is specialize in many fields.</p>
<p>He is a very professional engineer and has done so many projects.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output
Right-Aligned Media Object – If you want to create a right-aligned media object, add the image using <img> element before the .media-body.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Media Object 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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Right Aligned Media Objects</h2><br>
<div class="media border p-3">
<div class="media-body">
<h4>John Williams <small><i>Posted on May 22, 2020</i></small></h4>
<p>John is a software engineer. He works in a multinational firm. He is specialize in many fields.</p>
<p>He is a very experienced engineer and has done so many projects.</p>
</div>
<img src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
</div>
</div>
</body>
</html>
Output
Top, Middle, and Bottom Alignment – You can place the media object anywhere in the component. To place the media object on the top, bottom and middle, add .align-self-* class to the <img> element.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Media Object 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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Media Object</h2>
<!-- Media top -->
<div class="media">
<img src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1" class="align-self-start mr-3" style="width:80px">
<div class="media-body">
<h5>Media Top</h5>
<p>The media object is used to create a repetitive and complex component in which media is placed on any one side (either left or right) of the component such as
blog, tweets, comments, etc.</p>
<p>You can place media at the top of the component by adding <strong>.align-self-start</strong> class to the <strong>img</strong> element.</p>
</div>
</div>
<!-- Media middle -->
<div class="media mt-3">
<img src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1" class="align-self-center mr-3" style="width:80px">
<div class="media-body">
<h5>Media Middle</h5>
<p>The media object is used to create a repetitive and complex component in which media is placed on any one side (either left or right) of the component such as
blog, tweets, comments, etc.</p>
<p>You can place media in the ceneter of the component by adding <strong>.align-self-center</strong> class to the <strong>img</strong> element.</p>
</div>
</div>
<!-- Media bottom -->
<div class="media mt-3">
<img src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1" class="align-self-end mr-3" style="width:80px">
<div class="media-body">
<h5>Media Bottom</h5>
<p>The media object is used to create a repetitive and complex component in which media is placed on any one side (either left or right) of the component such as
blog, tweets, comments, etc.</p>
<p>You can place media at the bottom of the component by adding <strong>.align-self-end</strong> class to the <strong>img</strong> element.</p>
</div>
</div>
<br>
<br>
</div>
</body>
</html>
Output
