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 : This example illustrates the Bootstrap Media Objects for aligning the media & its content to the specified position using the Bootstrap classes.
<!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>
<div class="media">
<img class="align-self-start mr-3"
src=
"https://media.w3wiki.org/wp-content/cdn-uploads/20190710102234/download3.png"
width="100"
height="100"
alt="Generic placeholder image">
<div class="media-body">
<h4 class="mt-0">
Top-aligned Bootstrap Media Object
</h4>
<p>
w3wiki Bootstrap Media Content
</p>
</div>
</div>
<div class="media my-2">
<img class="align-self-center mr-3"
src=
"https://media.w3wiki.org/wp-content/cdn-uploads/20190710102234/download3.png"
width="100"
height="100"
alt="Generic placeholder image">
<div class="media-body">
<h4 class="mt-0">
Center-aligned Bootstrap Media Object
</h4>
<p>
w3wiki Bootstrap Media Content
</p>
</div>
</div>
<div class="media">
<img class="align-self-end mr-3"
src=
"https://media.w3wiki.org/wp-content/cdn-uploads/20190710102234/download3.png"
width="100"
height="100"
alt="Generic placeholder image">
<div class="media-body">
<h4 class="mt-0">
Bottom-aligned Bootstrap Media Object
</h4>
<p>
w3wiki Bootstrap Media Content
</p>
</div>
</div>
</body>
</html>
Output:
Supported Browser:
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.