Bootstrap - Media Object

0 4735

Bootstrap media object component to create structure. The images and other media can be aligned left and right. If we use this bootstrap, then page of look will be display awesome.

You can easily change the below example code (Text and Images upload as per your need). src use for source of image, size of width or height of image can also changeable.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<div class="container">

<h1> Bootstrap Media Object </h1>

<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://codingtag.com/wp-content/uploads/2016/07/onTime-App-Process.png" width="200">
</a>
</div>
<div class="media-body">
<h2 class="media-heading"> Heading </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis condimentum odio. In hac habitasse platea dictumst. Cras rhoncus in metus a maximus. Vestibulum id justo sed magna molestie commodo. Aliquam ornare sem nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam id ipsum convallis, tincidunt elit at, venenatis lectus. Nullam facilisis pulvinar diam, vitae volutpat ipsum lobortis nec. Aenean ornare lectus quis lectus convallis ultricies. In hac habitasse platea dictumst. Fusce magna nisl, molestie maximus vestibulum eget, iaculis nec odio. </p>
</div>
</div>

<div class="media">
<div class="media-body">
<h2 class="media-heading"> Heading </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis condimentum odio. In hac habitasse platea dictumst. Cras rhoncus in metus a maximus. Vestibulum id justo sed magna molestie commodo. Aliquam ornare sem nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam id ipsum convallis, tincidunt elit at, venenatis lectus. Nullam facilisis pulvinar diam, vitae volutpat ipsum lobortis nec. Aenean ornare lectus quis lectus convallis ultricies. In hac habitasse platea dictumst. Fusce magna nisl, molestie maximus vestibulum eget, iaculis nec odio. </p>
</div>
<div class="media-right">
<a href="#">
<img class="media-object" src="http://codingtag.com/wp-content/uploads/2016/07/onTime-App-Process.png" width="200">
</a>
</div>

</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://codingtag.com/wp-content/uploads/2016/07/onTime-App-Process.png" width="200">
</a>
</div>
<div class="media-body">
<h2 class="media-heading"> Heading </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis condimentum odio. In hac habitasse platea dictumst. Cras rhoncus in metus a maximus. Vestibulum id justo sed magna molestie commodo. Aliquam ornare sem nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam id ipsum convallis, tincidunt elit at, venenatis lectus. Nullam facilisis pulvinar diam, vitae volutpat ipsum lobortis nec. Aenean ornare lectus quis lectus convallis ultricies. In hac habitasse platea dictumst. Fusce magna nisl, molestie maximus vestibulum eget, iaculis nec odio. </p>
</div>
</div>

</div>

</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</html>