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.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<title>w3wiki!</title>
</head>
<body>
<h1 class="text-success">w3wiki!</h1>
<ul class="list-unstyled">
<li class="media">
<img class="mr-3"
src=
"https://media.w3wiki.org/wp-content/cdn-uploads/20190710102234/download3.png"
width="100"
height="100"
alt="Alternate image">
<div class="media-body">
<h5 class="mt-0 mb-1">
List-based Media heading Example3
</h5>
w3wiki Bootstrap Media Content
</div>
</li>
<li class="media my-3">
<img class="mr-3"
src=
"https://media.w3wiki.org/wp-content/cdn-uploads/20190710102234/download3.png"
width="100"
height="100"
alt="Alternate image">
<div class="media-body">
<h5 class="mt-0 mb-1">
List-based Media heading Example3
</h5>
w3wiki Bootstrap Media Content
</div>
</li>
<li class="media my-3">
<img class="mr-3"
src=
"https://media.w3wiki.org/wp-content/cdn-uploads/20190710102234/download3.png"
width="100"
height="100"
alt="Alternate image">
<div class="media-body">
<h5 class="mt-0 mb-1">
List-based media object
</h5> w3wiki Bootstrap Media Content
</div>
</li>
<li class="media">
<img class="mr-3"
src=
"https://media.w3wiki.org/wp-content/cdn-uploads/20190710102234/download3.png"
width="100"
height="100"
alt="Alternate image">
<div class="media-body">
<h5 class="mt-0 mb-1">
List-based media object
</h5>
w3wiki Bootstrap Media Content
</div>
</li>
</ul>
</body>
</html>
Output:
Explain media object and their types in Bootstrap
Media Objects in Bootstrap allow for the creation of flexible and reusable components, comprising images or icons alongside textual content. They facilitate the presentation of complex data in a visually appealing and structured manner.
The two main classes of media objects are:
class | Description |
---|---|
.media | Container for media content, such as images and text. |
.media-body | Container for textual content within a media object. |
media object and their types in Bootstrap:
Table of Content
- Basic Media Object:
- Lists in Bootstrap Media Objects:
- Nesting in Bootstrap Media Objects:
- Order in Bootstrap Media Objects:
- Alignment in Bootstrap Media Objects:
Approach:
- 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”>
Add the Bootstrap JavaScript plugin and dependency.
<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>
Step 2: We can directly copy the Bootstrap starter template as given in the official Bootstrap documentation.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>
We will utilize the starter template for building the webpage using the Bootstrap media object.