Explain media object and their types in Bootstrap
In this article, we will learn about the Bootstrap media object, which is helpful to place the media alongside the text. Also, we will understand the various ways to use the media with text & its implementation through the examples. Bootstrap media objects can be useful to place some content besides with some media that helps to make attractive and interesting content to the websites. The Media Objects such as images or videos can be aligned to the left or to the right of some 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.
The two main classes of media objects are:
- Wrap the child elements inside a .media class.
- Then use a <img> tag to specify the media content like images.
- Then inside the .media-body class, add the media contents.
- We can also create nested media contents inside a parent .media-body class.
To include the Bootstrap media objects in the website, we need to perform the following steps:
Step 1: Include Bootstrap CSS in the HTML <head> section to load the stylesheet.
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” integrity=”sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm” crossorigin=”anonymous”>
<script src=”https://code.jquery.com/jquery-3.2.1.slim.min.js” integrity=”sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js” integrity=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” crossorigin=”anonymous”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js” integrity=”sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl” crossorigin=”anonymous”></script>
We will utilize the starter template for building the webpage using the Bootstrap media object.
- Basic Media Object: We will use the .media class to the container element and place media content inside the child container with the .media-body class.
Example 1: This example illustrates the use of the Bootstrap Media Object.
- Lists in Bootstrap Media Objects: We can make a list of media objects by placing it inside our <ul> or <ol> tag and adding the .list-unstyled class to remove the default list style of the particular browser used. Then we can add a .media to our <li> tag to make the media list.
Example 2: This example illustrates the Bootstrap Media object in the form of a list.
- Nesting in Bootstrap Media Objects: We can place multiple media objects inside a parent media object just by using multiple .media classes inside the .media-body of the parent media class.
Example 3: This example illustrates the Bootstrap Media Objects for nesting the media along with the content.
- Order in Bootstrap Media Objects: We can change the order of media object by placing the images after the content or before or by adding some custom CSS or modifying the Html it to make it look the way we want.
Example 4: This example illustrates the Bootstrap Media Objects for ordering the media content along with the media.
- Alignment in Bootstrap Media Objects: We can use various flexbox utilities to place the media objects at the center, top, or end of the .media-body class content.
The following bootstrap classes will help us do so:
- .align-self-start: For placing the media at the starting of the content.
- .align-self-center: For placing the media at the center.
- .align-self-end: For placing the media at the end.
Example 5: This example illustrates the Bootstrap Media Objects for aligning the media & its content to the specified position using the Bootstrap classes.
- Google Chrome
- Internet Explorer
- Microsoft Edge