In this article, we will learn about the Bootstrap media object, which is helpful to place the media alongside the text. Also, we will understand the various ways to use the media with text & its implementation through the examples. Bootstrap media objects can be useful to place some content besides with some media that helps to make attractive and interesting content to the websites. The Media Objects such as images or videos can be aligned to the left or to the right of some content in an easy and efficient manner. The Bootstrap Media Objects are used where some data is positioned alongside content to build up complicated and recursive components of the content.
The two main classes of media objects are:
- .media
- .media-body
Approach:
- Wrap the child elements inside a .media class.
- Then use a <img> tag to specify the media content like images.
- Then inside the .media-body class, add the media contents.
- We can also create nested media contents inside a parent .media-body class.
To include the Bootstrap media objects in the website, we need to perform the following steps:
Step 1: Include Bootstrap CSS in the HTML <head> section to load the stylesheet.
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” integrity=”sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm” crossorigin=”anonymous”>
Add the Bootstrap JavaScript plugin and dependency.
<script src=”https://code.jquery.com/jquery-3.2.1.slim.min.js” integrity=”sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js” integrity=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” crossorigin=”anonymous”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js” integrity=”sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl” crossorigin=”anonymous”></script>
Step 2: We can directly copy the Bootstrap starter template as given in the official Bootstrap documentation.
<!doctype html> <html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1,
shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src=
integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
</body>
</html>
|
We will utilize the starter template for building the webpage using the Bootstrap media object.
- Basic Media Object: We will use the .media class to the container element and place media content inside the child container with the .media-body class.
Example 1: This example illustrates the use of the Bootstrap Media Object.
<!doctype html> <html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1,
shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>GeeksforGeeks!</title>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks!</h1>
<div class="media">
<img class="mr-3" src=
width="100" height="100" alt="Alternate image">
<div class="media-body">
<h4 class="mt-0">
Media heading Example1
</h4>
GeeksforGeeks Bootstrap Media Content
</div>
</div>
</body>
</html>
|
Output:
- Lists in Bootstrap Media Objects: We can make a list of media objects by placing it inside our <ul> or <ol> tag and adding the .list-unstyled class to remove the default list style of the particular browser used. Then we can add a .media to our <li> tag to make the media list.
Example 2: This example illustrates the Bootstrap Media object in the form of a list.
<!doctype html> <html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1,
shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>GeeksforGeeks!</title>
</head>
<body>
<h1 class="text-success">GeeksforGeeks!</h1>
<ul class="list-unstyled">
<li class="media">
<img class="mr-3" src=
width="100" height="100" alt="Alternate image">
<div class="media-body">
<h5 class="mt-0 mb-1">
List-based Media heading Example3
</h5>
GeeksforGeeks Bootstrap Media Content
</div>
</li>
<li class="media my-3">
<img class="mr-3" src=
width="100" height="100" alt="Alternate image">
<div class="media-body">
<h5 class="mt-0 mb-1">
List-based Media heading Example3
</h5>
GeeksforGeeks Bootstrap Media Content
</div>
</li>
<li class="media my-3">
<img class="mr-3" src=
width="100" height="100" alt="Alternate image">
<div class="media-body">
<h5 class="mt-0 mb-1">
List-based media object
</h5> GeeksforGeeks Bootstrap Media Content
</div>
</li>
<li class="media">
<img class="mr-3" src=
width="100" height="100" alt="Alternate image">
<div class="media-body">
<h5 class="mt-0 mb-1">
List-based media object
</h5>
GeeksforGeeks Bootstrap Media Content
</div>
</li>
</ul>
</body>
</html>
|
Output:
- Nesting in Bootstrap Media Objects: We can place multiple media objects inside a parent media object just by using multiple .media classes inside the .media-body of the parent media class.
Example 3: This example illustrates the Bootstrap Media Objects for nesting the media along with the content.
<!doctype html> <html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1,
shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>GeeksforGeeks!</title>
</head>
<body>
<h1 class="text-success">GeeksforGeeks!</h1>
<div class="media">
<img class="mr-3" src=
width="100"
height="100"
alt="Alternate image">
<div class="media-body">
<h5 class="mt-0">
Media heading Example2
</h5>
GeeksforGeeks Bootstrap Media Content
<div class="media mt-3">
<a class="pr-3" href="#">
<img src=
width="100" height="100" alt="Alternate image">
</a>
<div class="media-body">
<h5 class="mt-0">
Media heading Example2 nested
</h5>
GeeksforGeeks Bootstrap Media Content
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
- Order in Bootstrap Media Objects: We can change the order of media object by placing the images after the content or before or by adding some custom CSS or modifying the Html it to make it look the way we want.
Example 4: This example illustrates the Bootstrap Media Objects for ordering the media content along with the media.
<!doctype html> <html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1,
shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>GeeksforGeeks!</title>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks!</h1>
<div class="media">
<div class="media-body">
<h5 class="mt-0 mb-1">
Media Order
</h5>
GeeksforGeeks Bootstrap Media Content
</div>
<img class="ml-3" src=
width="100" height="100" alt="Generic placeholder image">
</div>
</body>
</html>
|
Output:
- Alignment in Bootstrap Media Objects: We can use various flexbox utilities to place the media objects at the center, top, or end of the .media-body class content.
The following bootstrap classes will help us do so:
- .align-self-start: For placing the media at the starting of the content.
- .align-self-center: For placing the media at the center.
- .align-self-end: For placing the media at the end.
Example 5: This example illustrates the Bootstrap Media Objects for aligning the media & its content to the specified position using the Bootstrap classes.
<!doctype html> <html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1,
shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>GeeksforGeeks!</title>
</head>
<body>
<h1 class="text-success">GeeksforGeeks!</h1>
<div class="media">
<img class="align-self-start mr-3" src=
width="100" height="100" alt="Generic placeholder image">
<div class="media-body">
<h4 class="mt-0">Top-aligned Bootstrap Media Object</h4>
<p>GeeksforGeeks Bootstrap Media Content</p>
</div>
</div>
<div class="media my-2">
<img class="align-self-center mr-3" src=
width="100" height="100" alt="Generic placeholder image">
<div class="media-body">
<h4 class="mt-0">Center-aligned Bootstrap Media Object</h4>
<p>GeeksforGeeks Bootstrap Media Content</p>
</div>
</div>
<div class="media">
<img class="align-self-end mr-3" src=
width="100" height="100" alt="Generic placeholder image">
<div class="media-body">
<h4 class="mt-0">Bottom-aligned Bootstrap Media Object</h4>
<p>GeeksforGeeks Bootstrap Media Content</p>
</div>
</div>
</body>
</html>
|
Output:
Supported Browser:
- Google Chrome
- Internet Explorer
- Microsoft Edge
- Firefox
- Opera
- Safari