In this article, we will discuss the bootstrap- Media Object. The Media Objects help us build complex and repetitive components to position the media alongside the content. Remember - the Bootstrap Media Object has been discontinued from version 5. But we can still create a layout that can contain left- or right-aligned media objects like images or videos and textual content like Tweets and blogs by using the flex and spacing utility classes. For exploring the things in this blog, we will be using Bootstrap 4. Let's discuss these in detail.
Media Object Classes
As per the introduction, you know that Bootstrap Media Objects are used to position the media on our websites and the textual content. The two available media object classes are:
.media - This class allows you to float a media object( images, video, and audio) to either the left or the right side of the content block.
.media-body - This class is used to create an unordered list for comment threads or articles.
Below is an example of illustrating a default media object,
<!DOCTYPE html>
<html>
<head>
<title>Coding Ninjas Example</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/bootstrap/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" height= 10% width = 10% src="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco,dpr_1/v1500550935/qigpiu6kicm4phqbi2il.png"
alt="Media Object">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Be a Ninja
Be a Ninja
Be a Ninja
</div>
</div>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" height= 10% width = 10% src="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco,dpr_1/v1500550935/qigpiu6kicm4phqbi2il.png"
alt="Media Object">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Be a Ninja
Be a Ninja
Be a Ninja
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" height= 10% width = 10% src="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco,dpr_1/v1500550935/qigpiu6kicm4phqbi2il.png"
alt="Media Object">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Be a Ninja
Be a Ninja
Be a Ninja
</div>
</div>
</div>
</div>
</body>
</html>
OUTPUT
Alignment of Media Objects
Bootstrap spacing allows us to control the padding and margin. We can align our objects either to the left or right, using the available classes.
To align our objects, we have three available classes,
media-left: This class is used to left-align our media objects.
media-right: This class is used to right-align our media objects.
media-body: This class is used to place our content.
Below, we have an example that illustrates the left and right alignment.
<!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>Coding Ninja Example</title>
</head>
<body>
<div class="container">
<h2>Bootstrap - Media Object</h2>
<br>
<!-- Left-aligned media object -->
<div class="media">
<div class="media-left">
<img src="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco,dpr_1/v1500550935/qigpiu6kicm4phqbi2il.png"
class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">
Left-aligned
</h4>
<p>
The "media-left" class is used to left-align a media object. The text that will now 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>
The "media-right" class is used to right-align the media object. The text will now appear aside the image, is placed inside a container with class="media-body"
</p>
</div>
<div class="media-right">
<img src="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco,dpr_1/v1500550935/qigpiu6kicm4phqbi2il.png" class="media-object" style="width:60px">
</div>
</div>
</div>
</body>
</html>
OUTPUT
We can also align our media objects on top, bottom or at the middle, let’s see the classes we can use to do so,
We can use classes like media-top, media-bottom, or media-middle. The syntax is,
Below is an illustrative example of the discussed classes,
<!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>Coding Ninja Example</title>
</head>
<body>
<div class="container">
<h3>Media Object</h3>
<br>
<div class="media">
<div class="media-top"> <img class="align-self-end mr-3" src="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco,dpr_1/v1500550935/qigpiu6kicm4phqbi2il.png" style="width:80px"></div>
<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">
<div class="media-middle"> <img class="align-self-end mr-3" src="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco,dpr_1/v1500550935/qigpiu6kicm4phqbi2il.png" style="width:80px"></div>
<div class="media-body">
<h6 class="media-heading">Media Middle</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">
<div class="media-bottom"> <img class="align-self-end mr-3" src="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco,dpr_1/v1500550935/qigpiu6kicm4phqbi2il.png" style="width:80px"></div>
<div class="media-body">
<h6 class="media-heading">Media Bottom</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
Nesting Media Objects
We can put our media objects one under the other using nesting of our media objects. We can use nested .media within our parent media object body class.
Below is an example of how we can implement nesting of media objects,
What are Media Objects? The Media Objects help us build complex and repetitive components to position the media alongside the content.
Name the classes you can use to align the media content to the left and right. To align our objects, we have three available classes, media-left: This class is used to left-align our media objects. media-right: This class is used to right-align our media objects. media-body: This class is used to place our content.
What all are the types of Media Objects? The media class allows us to float or place a media object which includes, pictures, audio, and videos, in a particular direction within the contents of a block.
Key Takeaways
Hey everyone, let's briefly describe an overview of the use of media objects provided by Bootstrap.
This article covers what media objects are and how one can use them in their programs.
We have further discussed the alignment of media objects - to the left, right, top, bottom, and middle using elaborative examples.
Further, we have seen how we can nest these components within each other using an example.
Isn’t Web Development engaging? Building new websites and using amazing animations and different APIs, don’t be scared if you cannot grasp the hold of this vast development. We have the perfect web development course for you to make you stand out from your fellow developers.
Comments
No comments yet
Be the first to share what you think