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="profile.png" 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="profile1.jpg" 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="profile1.jpg" 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="profile1.jpg" 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="download.jpg" 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="download.jpg" 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="download.jpg" 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