Bootstrap Media Object

In this section the bootstrap media objects are going to be discussed. The media objects are referred to as the styles that can be used for building components which may include comments, etc. on the page. These objects may have an image either left or right aligned and some text. In bootstrap we have two forms or two classes related to media objects:

  1. The .media class is used to make the media object that is images, videos, etc. either to left side of the content or to the right side of the content.
  2. The .media-list class is used to create an unordered list of media items.

Consider the following example in which we have default media objects created:

CODE:

<!DOCTYPE html>

<html>

<head>

<title> Bootstrap Example</title>

<link href=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>

<script src=”/scripts/jquery.min.js”></script>

<script src=”/bootstrap/js/bootstrap.min.js”></script>

</head>

<body>

<div class = “media”>

<a class = “pull-left” href = “#”>

<img style=”width:75px;height:75px;” class = “media-object” src = “http://kursuswebdesign.org/wp-content/uploads/2017/01/Cara-Membuat-Indikator-Pesan-Menggunakan-Bootstrap-1.png” alt = “Media Object”>

</a>

<div class = “media-body”>

<h4 class = “media-heading”>Heading of Media</h4>

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

</div>

</div>

<div class = “media”>

<a class = “pull-left” href = “#”>

<img style=”width:75px;height:75px;” class = “media-object” src = “http://kursuswebdesign.org/wp-content/uploads/2017/01/Cara-Membuat-Indikator-Pesan-Menggunakan-Bootstrap-1.png” alt = “Media Object”>

</a>

<div class = “media-body”>

<h4 class = “media-heading”>Heading of Media</h4>

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media.

<div class = “media”>

<a class = “pull-left” href = “#”>

<img style=”width:75px;height:75px;” class = “media-object” src = “http://kursuswebdesign.org/wp-content/uploads/2017/01/Cara-Membuat-Indikator-Pesan-Menggunakan-Bootstrap-1.png” alt = “Media Object”>

</a>

<div class = “media-body”>

<h4 class = “media-heading”>Heading of Media</h4>

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

</div>

</div>

</div>

</div>

</body>

</html>

The above code will generate the following result:

OUTPUT:

result

Now consider the following example in which we have created media list:

CODE:

<!DOCTYPE html>

<html>

<head>

<title> Bootstrap Example</title>

<link href=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>

<script src=”/scripts/jquery.min.js”></script>

<script src=”/bootstrap/js/bootstrap.min.js”></script>

</head>

<body>

<ul class = “media-list”>

<li class = “media”>

<a class = “pull-left” href = “#”>

<img  style = “width:75px;height:75px;” class = “media-object” src = “http://kursuswebdesign.org/wp-content/uploads/2017/01/Cara-Membuat-Indikator-Pesan-Menggunakan-Bootstrap-1.png” alt = “Generic placeholder image”>

</a>

<div class = “media-body”>

<h4 class = “media-heading”>Media heading</h4>

<p>

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media.

</p>

<div class = “media”>

<a class = “pull-left” href = “#”>

<img style = “width:75px;height:75px;” class = “media-object” src = “http://kursuswebdesign.org/wp-content/uploads/2017/01/Cara-Membuat-Indikator-Pesan-Menggunakan-Bootstrap-1.png”

alt = “Generic placeholder image”>

</a>

<div class = “media-body”>

<h4 class = “media-heading”>Nested media heading</h4>

<p>

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media.

</p>

<div class = “media”>

<a class = “pull-left” href = “#”>

<img style = “width:75px;height:75px;” class = “media-object” src = “http://kursuswebdesign.org/wp-content/uploads/2017/01/Cara-Membuat-Indikator-Pesan-Menggunakan-Bootstrap-1.png”

alt = “Generic placeholder image”>

</a>

<div class = “media-body”>

<h4 class = “media-heading”>Nested media heading</h4>

<p>

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media.

</p>

</div>

</div>

</div>

</div>

<div class = “media”>

<a class = “pull-left” href = “#”>

<img style = “width:75px;height:75px;” class = “media-object” src = “http://kursuswebdesign.org/wp-content/uploads/2017/01/Cara-Membuat-Indikator-Pesan-Menggunakan-Bootstrap-1.png”

alt = “Generic placeholder image”>

</a>

<div class = “media-body”>

<h4 class = “media-heading”>Nested media heading</h4>

<p>

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media.

</p>

</div>

</div>

</div>

</li>

<li class = “media”>

<a class = “pull-right” href = “#”>

<img style = “width:75px;height:75px;” class = “media-object” src = “http://kursuswebdesign.org/wp-content/uploads/2017/01/Cara-Membuat-Indikator-Pesan-Menggunakan-Bootstrap-1.png”

alt = “Generic placeholder image”>

</a>

<div class = “media-body”>

<h4 class = “media-heading”>Media heading</h4>

<p>

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media. Text in Media.

Text in Media.

</p>

</div>

</li>

</ul>

</body>

</html>

The above code will generate the following result:

OUTPUT:

media heading