Bootstrap 4 | Media Objects
The Bootstrap Media Objects like images or videos can be aligned to the left or right with 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.
Basic Media Object: Use .media class to the container element and place media content inside the child container with the .media-body class.
Example:
HTML
<!DOCTYPE html><html lang="en"><head> <title>Bootstrap Media Object</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= <script src= </script> <script src= </script> <script src= </script></head><body> <h1 class="text-success text-center">GeeksforGeeks</h1> <h2 class="text-center">Media Object</h2> <div class="container mt-3"> <div class="media border p-3"> <img src= alt="Geeks" class="mr-3 mt-3 rounded-circle bg-success" style="width:40px;"> <div class="media-body"> <h3>GeeksforGeeks <small> <i>Post published on 14th May, 2019</i> </small> </h3> <p> GeeksforGeeks is a computer science portal. It is a best programming platform. </p> </div> </div> </div></body></html> |
Output:
Nested Media Objects: The media object can be added inside media object. It is called nested media object.
Example:
HTML
<!DOCTYPE html><html lang="en"><head> <title>Bootstrap Media Object</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= <script src= </script> <script src= </script> <script src= </script></head><body> <h1 class="text-success text-center">GeeksforGeeks</h1> <h2 class="text-center">Nested Media Objects</h2> <div class="container mt-3"> <div class="media border p-3"> <img src= alt="Geeks" class="mr-3 mt-3 rounded-circle bg-success" style="width:40px;"> <div class="media-body"> <h3>GeeksforGeeks <small> <i>Post published on 14th May, 2019</i> </small> </h3> <p> GeeksforGeeks is a computer science portal. It is a best programming platform. </p> <div class="media p-3"> <img src= alt="Geeks" class="mr-3 mt-3 rounded-circle bg-success" style="width:40px;"> <div class="media-body"> <h5>GeeksforGeeks <small> <i>Post Modified on 15th May, 2019</i> </small> </h5> <p> GeeksforGeeks is a computer science portal. It is a best programming platform. </p> </div> </div> </div> </div> </div></body></html> |
Output:
Right-Aligned Media Image: Add image after the .media-body container to set the image right-aligned.
Example:
HTML
<!DOCTYPE html><html lang="en"><head> <title>Bootstrap Media Object</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= <script src= </script> <script src= </script> <script src= </script></head><body> <h1 class="text-success text-center">GeeksforGeeks</h1> <h2 class="text-center">Right-Aligned Media Objects</h2> <div class="container mt-3"> <div class="media border p-3"> <div class="media-body"> <h3>GeeksforGeeks <small> <i>Post published on 14th May, 2019</i> </small> </h3> <p> GeeksforGeeks is a computer science portal. It is a best programming platform. </p> </div> <img src= alt="Geeks" class="mr-3 mt-3 rounded-circle bg-success" style="width:40px;"> </div> </div></body></html> |
Output:
Top, Middle and Bottom Media Alignment: The .align-self-* classes are used to set the media object on top, middle or bottom of the element.
Example:
HTML
<!DOCTYPE html><html lang="en"><head> <title>Bootstrap Media Object</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= <script src= </script> <script src= </script> <script src= </script></head><body> <h1 class="text-success text-center">GeeksforGeeks</h1> <h2 class="text-center"> Top, Middle or Bottom Media Alignment </h2> <div class="container mt-3"> <div class="media border p-3"> <img src= alt="Geeks" class="align-self-start mr-3 mt-3 rounded-circle bg-success" style="width:40px;"> <div class="media-body"> <h3>GeeksforGeeks <small> <i>Post published on 14th May, 2019</i> </small> </h3> <p> GeeksforGeeks is a computer science portal. It is a best programming platform. It contains well written, well thought and well explained computer science and programming articles, quizzes and ... </p> </div> </div> <div class="media border p-3"> <img src= alt="Geeks" class="align-self-center mr-3 mt-3 rounded-circle bg-success" style="width:40px;"> <div class="media-body"> <h3>GeeksforGeeks <small> <i>Post published on 14th May, 2019</i> </small> </h3> <p> GeeksforGeeks is a computer science portal. It is a best programming platform. It contains well written, well thought and well explained computer science and programming articles, quizzes and ... </p> </div> </div> <div class="media border p-3"> <img src= alt="Geeks" class="align-self-end mr-3 mt-3 rounded-circle bg-success" style="width:40px;"> <div class="media-body"> <h3>GeeksforGeeks <small> <i>Post published on 14th May, 2019</i> </small> </h3> <p> GeeksforGeeks is a computer science portal. It is a best programming platform. It contains well written, well thought and well explained computer science and programming articles, quizzes and ... </p> </div> </div> </div></body></html> |
Output:
Supported Browser:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...