Media Objects in Bootstrap with Examples
Last Updated :
28 Apr, 2022
The Bootstrap Media Objects like 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 media object classes available are:
Bootstrap spacing is used to control padding and margin.
Left and Right Alignment:
- "media-left" class is used to left-align a media object.
- "media-right" class is used to right-align the media object.
- "media-body" class is used to place the content.
Syntax:
<div class="media-left">
<img src="...">
</div>
<div class="media-body">
Content to be placed
</div>The Below program illustrates the left and right alignment:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Link Bootstrap CSS -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<!-- Link Bootstrap JS and JQuery -->
<script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js">
</script>
<title>GeeksForGeeks Bootstrap Example</title>
</head>
<body>
<div class="container">
<h2>Media Object</h2>
<!-- Left-aligned media object -->
<div class="media">
<div class="media-left">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/logo-2.png"
class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">
Left-aligned
</h4>
<p>
Use the "media-left" class to
left-align a media object. Text
that should appear next to the
image, is placed inside a container
with class="media-body"
</p>
</div>
</div>
<hr>
<!-- Right-aligned media object -->
<div class="media">
<div class="media-body">
<h4 class="media-heading">
Right-aligned
</h4>
<p>
Use the "media-right" class to
right-align the media object.
Text that should appear next to
the image, is placed inside a
container with class="media-body"
</p>
</div>
<div class="media-right">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/logo-2.png"
class="media-object" style="width:60px">
</div>
</div>
</div>
</body>
</html>
Output:
Top, Middle or Bottom Alignment:
- Similar to left and right alignment media object can be aligned top, middle, or bottom.
- To aligned media to top, middle or bottom use the following classes - media-top, media-middle or media-bottom class
Syntax:
<div class="media-top">
<img src="...">
</div>
<div class="media-body">
Content to be placed
</div>Below program illustrate the above approach:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Link Bootstrap CSS -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<!-- Link Bootstrap JS and JQuery -->
<script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
<title>GeeksForGeeks Bootstrap Example</title>
</head>
<body>
<div class="container">
<h3>Media Object</h3>
<br>
<div class="media">
<img class="align-self-start mr-3" src=
"https://media.geeksforgeeks.org/wp-content/uploads/logo-2.png"
alt="Generic placeholder image"
style="width:80px">
<div class="media-body">
<h6 class="media-heading">
Media Top
</h6>
<p>
The media object can be aligned to
top, middle or bottom.
</p>
<ul>
<li>
Use the "media-top" class to
top-align a media object.
</li>
<li>
Use the "media-middle" class to
middle-align a media object.
</li>
<li>
Use the "media-bottom" class to
bottom-align a media object.
</li>
</ul>
</div>
</div>
<div class="media">
<img class="align-self-center mr-3" src=
"https://media.geeksforgeeks.org/wp-content/uploads/logo-2.png"
alt="Generic placeholder image" style="width:80px">
<div class="media-body">
<h6 class="media-heading">Media Top</h6>
<p>
The media object can be aligned to
top, middle or bottom.
</p>
<ul>
<li>
Use the "media-top" class to
top-align a media object.
</li>
<li>
Use the "media-middle" class to
middle-align a media object.
</li>
<li>
Use the "media-bottom" class to
bottom-align a media object.
</li>
</ul>
</div>
</div>
<div class="media">
<img class="align-self-end mr-3" src=
"https://media.geeksforgeeks.org/wp-content/uploads/logo-2.png"
alt="Generic placeholder image"
style="width:80px">
<div class="media-body">
<h6 class="media-heading">Media Top</h6>
<p>
The media object can be aligned to
top, middle or bottom.
</p>
<ul>
<li>
Use the "media-top" class to
top-align a media object.
</li>
<li>
Use the "media-middle" class to
middle-align a media object.
</li>
<li>
Use the "media-bottom" class to
bottom-align a media object.
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Output:
Media Objects in nested Format:
- If you want one media under the second media, for that you can use the nesting in the media objects
- Nested .media can be placed within the parent media object's .media-body class.
Syntax:
<div class="media-left">
<img src="...">
<div class="media-left">
Content to be placed
</div>
</div>Example 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Link Bootstrap CSS -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<!-- Link Bootstrap JS and JQuery -->
<script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
<title>GeeksForGeeks Bootstrap Example</title>
</head>
<body>
<div class="container">
<h3>Nested Media Objects</h3>
<br>
<div class="media">
<div class="media-left">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"
class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">
GeeksForGeeks
<small><br><i>Media Object 1</i></small></h4>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks14-2.png"
class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">
GeeksForGeeks
<small><br><i>Media Object 2</i></small>
</h4>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/transition-property_CSS_img1.png"
class="media-object"
style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">
GeeksForGeeks
<small><br><i>
Media Object 3
</i></small>
</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Example 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Link BootStrap CSS -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<!-- Link Bootstrap JS and JQuery -->
<script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
<title>GeeksForGeeks Bootstrap Example</title>
</head>
<body>
<div class="container">
<h3>Nested Media Objects</h3>
<br>
<div class="media">
<div class="media-left">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"
class="media-object" style="width:45px">
</div>
<div class="media-body">
<h6 class="media-heading">
GeeksForGeeks <small><br><i>
Media Object 1</i></small></h6>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks14-2.png"
class="media-object" style="width:45px">
</div>
<div class="media-body">
<h6 class="media-heading">
GeeksForGeeks <small><br><i>
Media Object 2</i></small></h6>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/transition-property_CSS_img1.png"
class="media-object"
style="width:45px">
</div>
<div class="media-body">
<h6 class="media-heading">
GeeksForGeeks <small><br><i>
Media Object 3</i></small></h6>
</div>
</div>
</div>
</div>
<div class="media">
<div class="media-left">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks14-2.png"
class="media-object" style="width:45px">
</div>
<div class="media-body">
<h6 class="media-heading">
GeeksForGeeks <small><br><i>
Media Object 4</i></small></h6>
</div>
</div>
</div>
</div>
<div class="media">
<div class="media-left">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"
class="media-object" style="width:45px">
</div>
<div class="media-body">
<h6 class="media-heading">
GeeksForGeeks <small><br><i>
Media Object 5</i></small></h6>
</div>
</div>
</div>
</body>
</html>
Output:
Supported Browser:
- Google Chrome
- Microsoft Edge
- Firefox
- Opera
- Safari
Similar Reads
Bootstrap Navigation Bar
Bootstrap Navigation Bar provides a responsive, customizable, and pre-styled navigation component for web applications. It incorporates features like branding, navigation links, dropdowns, and responsiveness, enabling developers to create effective and visually appealing navigation menus effortlessl
6 min read
Bootstrap Carousel
Bootstrap Carousel enables slideshow functionality for images or content. Easily customizable with CSS and JavaScript. Supports responsive design and touch gestures, enhancing user experience in web development projects. It can be included in your webpage using "bootstrap.js" or "bootstrap.min.js".
4 min read
Bootstrap Cards
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. It replaces the use of panels, wells and thumbnails. All of it can be used in a single container called card . Ba
2 min read
Bootstrap | Badges and Breadcrumbs
Badges: Badges are numbers associated with the link to indicate the number of items associated with the link. The notification number is seen when logged in to a particular website and tells the numbers of news or notifications to see by clicking it. Example: HTML <!DOCTYPE html> <html>
4 min read
Clearfix in Bootstrap
One of the major problems with the structure of HTML is that if you have a child div inside parent div, the child div automatically flows around the parent div. The solution to this problem is using clear property of CSS. Bootstrap allows us to use a class named clearfix which is used to clear the f
2 min read
Image Replacement in Bootstrap using text-hide Class
Bootstrap allows us to replace the text with background image for any text element like paragraph element, heading element etc. With the use of .text-hide class, we can replace an element’s content with a background image. Syntax: <element class = "text-hide" style = "background-image: url('Speci
1 min read
Typography in Bootstrap
Bootstrap Typography provides a standardized and flexible approach to text styling, offering various classes for headings, paragraphs, and inline text elements. It ensures consistent typography across different devices and screen sizes, enhancing readability and aesthetics. Typography can be used to
2 min read
Popovers in bootstrap with examples
A Bootstrap Popover is an attribute in bootstrap that can be used to make any website look more dynamic. Popovers are generally used to display additional information about any element and are displayed with a click of a mouse pointer over that element. In the popover, if you click on any element th
3 min read
Bootstrap | Spinners Set-2
Bootstrap provides us with various classes for creating different styles of the spinner to indicate the loading state. We can also modify the appearance, size, and placement of the spinners with the classes provided by Bootstrap. Buttons with border spinner: We can place the border spinner within th
4 min read
Bootstrap | Spinners Set-1
Bootstrap provides us with various classes for creating different styles of the spinner to indicate the loading state. We can also modify the appearance, size, and placement of the spinners with the classes provided by Bootstrap. Types of Spinners: Border spinner: We can create a lightweight bordere
4 min read