Why Media Object used in Bootstrap?

1.	Why Media Object used in Bootstrap?
Answer» 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.

Answer»

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.

Why Media Object used in Bootstrap?

Discussion

No Comment Found

Related InterviewSolutions

Reply to Comment