Please allow ads on our site
Please log in to access this content. You will be redirected to the login page shortly.
LoginWhy Media Object used in Bootstrap?
Web Development Bootstrap in Web Development 3 years ago
To set an aligned object with content, use the Media Object. These objects can be image or video. The usage of media objects can be seen in the comment section of a website/ blog.
The .media class and .media-body class is USED in Bootstrap to work with media objects. Float a media object using .media class, WHEREAS .media-body class place media content inside a child CONTAINER.
The following is an example that creates a media object to align image with content:
<!DOCTYPE html> <html LANG="en"> <head> <title>Bootstrap 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.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container mt-3"> <h2>Learn</h2> <p>Here comes the article content...</p> <div class="media border p-3"> <img src="https://d2o2utebsixu4k.cloudfront.net/media/images/dfbac927-789d-4780-acdb-0eeceab17a17.jpg" alt="John Doe" class="mr-3 mt-3 rounded-square" style="width:90px;"> <div class="media-body"> <h4>Dev Ops</h4> <p>This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text!</p> </div> </div> </div> </body> </html>The following is the output that displays an image aligned on the left with content:
If you want to align media object on the top, bottom, or middle POSITION, then you can use the flex. Nested media objects are also feasible in Bootstrap.
Posted on 31 May 2022, this text provides information on Web Development related to Bootstrap in Web Development. Please note that while accuracy is prioritized, the data presented might not be entirely correct or up-to-date. This information is offered for general knowledge and informational purposes only, and should not be considered as a substitute for professional advice.
Take Quiz To Earn Credits!
Turn Your Knowledge into Earnings.
Answers
No matter what stage you're at in your education or career, TuteeHub will help you reach the next level that you're aiming for. Simply,Choose a subject/topic and get started in self-paced practice sessions to improve your knowledge and scores.
