English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 Basic Tutorial

Bootstrap4 Multimedia object

If you want to create a layout that includes left-aligned or right-aligned media objects (such as images or videos) and text content (such as blog comments, Tweets, etc.), you can easily do this with the newly introduced Bootstrap media component.

Bootstrap provides a good way to handle the layout of multimedia objects (images or videos) and content. Application scenarios include blog comments, Weibo, etc.:

Basic multimedia object

To create a multimedia object, you can add the .media class to a container element and then place the multimedia content in a child container, which needs to add the .media-class, then add margin, padding, and other effects:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Media Objects</h2>
　　<p>Use the .media and .media-The 'body' class creates multimedia objects:/p>
　　<div class="media border p-3">
　　　　<img src="https://www.oldtoolbag.com/run/images/img_avatar.png" alt="John Doe" class="mr-3　mt-3　rounded-circle" style="width:60px;">
　　　　<div class="media-body">
　　　　　　<h4>Basics Tutorial Website</h4>
　　　　　　<p>Learn the basics well, and you can go further!!!</p>　　　　　　
　　　　</div>
　　</div>
</div>
</body>
</html>
Test and See ‹/›

The effect after running is as follows:

Nested Multimedia Objects

Multimedia objects can be nested multiple times (one multimedia object contains another multimedia object):

To nest multimedia objects, you can place the new .media container inside the .media-in the body container:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Nested Multimedia Objects</h2>
　　<p>Multimedia objects can be nested multiple times (one multimedia object contains another multimedia object):/p><br>
　　<div class="media border p-3">
　　　　<img src="https://www.oldtoolbag.com/run/images/img_avatar.png" alt="John Doe" class="mr-3　mt-3　rounded-circle" style="width:60px;">
　　　　<div class="media-body">
　　　　　　<h4>Basics Tutorial Website</h4>
　　　　　　<p>Learn the basics well, and you can go further!!!</p>
　　　　　　<div class="media p-3">
　　　　　　　　<img src="https://www.oldtoolbag.com/run/images/img_avatar.png" alt="Jane Doe" class="mr-3　mt-3　rounded-circle" style="width:45px;">
　　　　　　　　<div class="media-body">
　　　　　　　　　　<h4>Basics Tutorial Website</h4>
　　　　　　　　　　<p>Learn the basics well, and you can go further!!!</p>
　　　　　　　　</div>
　　　　　　</div>　　
　　　　</div>
　　</div>
</div>
</body>
</html>
Test and See ‹/›

Display multimedia object images on the right

<p>If you want to display the avatar image on the right, you can add it in the .media-Add an image after the body container:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Image display on the right</h2>
　　<p>If you want to display the avatar image on the right, you can add it in the .media-Add an image after the body container:</p>
　　<div class="media border p-3">
　　　　<div class="media-body">
　　　　　　<h4>Basics Tutorial Website</h4>
　　　　　　<p>Learn the basics well, and you can go further!!!</p>　　　　　　
　　　　</div>
　　　　<img src="https://www.oldtoolbag.com/run/images/img_avatar.png" alt="John Doe" class="ml-3　mt-3　rounded-circle" style="width:60px;">
　　</div>
</div>
</body>
</html>
Test and See ‹/›

to position multimedia image location

We can use align-self-* Use the relevant classes to set the display position of multimedia objects' images:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Media Objects</h2>
　　<p>We can use　align-self-*　To set the display position of the image of media objects, use the following class: </p><br>
　　<!--　Header　-->
　　<div class="media">
　　　　<img src="https://www.oldtoolbag.com/run/images/img_avatar.png" class="align-self-start mr-3" style="width:60px">
　　　　<div class="media-body">
　　　　　　<h4>Header　--　Basic Tutorial(oldtoolbag.com)</h4>
　　　　　　Learn the basics to go further!!
　　　　　　Learn the basics to go further!!
　　　　　　Learn the basics to go further!!
　　　　</div>
　　</div>
　　<!--　Centered　-->
　　<div class="media mt-3">
　　　　<img src="https://www.oldtoolbag.com/run/images/img_avatar.png" class="align-self-center mr-3" style="width:60px">
　　　　<div class="media-body">
　　　　　　<h4>Centered　--　Basic Tutorial(oldtoolbag.com)</h4>
　　　　　　Learn the basics to go further!!
　　　　　　Learn the basics to go further!!
　　　　　　Learn the basics to go further!!
　　　　</div>
　　　</div>
　　<!--　Bottom　-->
　　<div class="media mt-3">
　　　　<img src="https://www.oldtoolbag.com/run/images/img_avatar.png" class="align-self-end mr-3" style="width:60px">
　　　　<div class="media-body">
　　　　　　<h4>Bottom　--　Basic Tutorial(oldtoolbag.com)</h4>
　　　　　　Learn the basics to go further!!
　　　　　　Learn the basics to go further!!
　　　　　　Learn the basics to go further!!
　　　　</div>
　　</div>
</div>
</body>
</html>
Test and See ‹/›
Bootstrap4 Flexbox Layout