German
Japanese
French
Heading
Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum,rutrum neque eu,gravida neque.
<!-- Simple --><div class="media"><img class="rounded" src="assets/img/90x90.jpg" alt="pic1"><div class="media-body"><h4 class="media-heading">Heading</h4><p class="media-text">Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum,rutrum neque eu,gravida neque.</p></div></div>
Heading
Sed dapibus nulla elementum,rutrum neque eu,gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.
<!-- Order --><div class="media"><div class="media-body"><h4 class="media-heading">Heading</h4><p class="media-text">Sed dapibus nulla elementum,rutrum neque eu,gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. </p></div><img class="rounded" src="assets/img/90x90.jpg" alt="pic1"></div>
Heading
Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.Sed dapibus nulla elementum,rutrum neque eu,gravida neque. Pellentesque pellentesque sed magna vitae porttitor. Integer quis urna eget ligula commodo venenatis in et ligula.
<!-- Top Aligned Media --><div class="media"><img class="rounded" src="assets/img/90x90.jpg" alt="pic1"><div class="media-body"><h4 class="media-heading">Heading</h4><p class="media-text">Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.Sed dapibus nulla elementum,rutrum neque eu,gravida neque. Pellentesque pellentesque sed magna vitae porttitor. Integer quis urna eget ligula commodo venenatis in et ligula.</p></div></div>
Heading
Pellentesque pellentesque sed magna vitae porttitor. Integer quis urna eget ligula commodo venenatis in et ligula. Integer eget lorem sodales,sodales dui vel,mattis erat. Sed dapibus nulla elementum,rutrum neque eu,gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.
<!-- Center Aligned Media --><div class="media"><img class="align-self-center rounded" src="assets/img/90x90.jpg" alt="pic1"><div class="media-body"><h4 class="media-heading">Heading</h4><p class="media-text">Pellentesque pellentesque sed magna vitae porttitor. Integer quis urna eget ligula commodo venenatis in et ligula. Integer eget lorem sodales,sodales dui vel,mattis erat. Sed dapibus nulla elementum,rutrum neque eu,gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.</p></div></div>
Heading
Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum,rutrum neque eu,gravida neque. Pellentesque pellentesque sed magna vitae porttitor. Integer quis urna eget ligula commodo venenatis in et ligula. Integer eget lorem sodales,sodales dui vel,mattis erat. Fusce condimentum cursus mauris et ornare.
<!-- Bottom Aligned Media --><div class="media"><img class="align-self-end rounded" src="assets/img/90x90.jpg" alt="pic1"><div class="media-body"><h4 class="media-heading">Heading</h4><p class="media-text">Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum,rutrum neque eu,gravida neque. Pellentesque pellentesque sed magna vitae porttitor. Integer quis urna eget ligula commodo venenatis in et ligula. Integer eget lorem sodales,sodales dui vel,mattis erat. Fusce condimentum cursus mauris et ornare.</p></div></div>
Heading
Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum,rutrum neque eu,gravida neque.
<!-- Right Aligned --><div class="media"><div class="media-body text-right"><h4 class="media-heading">Heading</h4><p class="media-text">Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum,rutrum neque eu,gravida neque.</p></div><img class="rounded" src="assets/img/90x90.jpg" alt="pic1"></div>
-
Heading
Sed dapibus nulla elementum,rutrum neque eu,gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.
-
Heading
Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum,rutrum neque eu,gravida neque.
-
Heading
Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum,rutrum neque eu,gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.
<!-- Media List --><ul class="list-unstyled"><li class="media"><img class="rounded" src="assets/img/90x90.jpg" alt="pic1"><div class="media-body"><h4 class="media-heading">Heading</h4><p class="media-text">Sed dapibus nulla elementum,rutrum neque eu,gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.</p></div></li><li class="media"><img class="rounded" src="assets/img/90x90.jpg" alt="pic1"><div class="media-body"><h4 class="media-heading">Heading</h4><p class="media-text">Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum,rutrum neque eu,gravida neque.</p></div></li><li class="media"><img class="rounded" src="assets/img/90x90.jpg" alt="pic1"><div class="media-body"><h4 class="media-heading">Heading</h4><p class="media-text">Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum,rutrum neque eu,gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.</p></div></li></ul>
Heading
Sed dapibus nulla elementum,rutrum neque eu,gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.
Heading
Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum,rutrum neque eu,gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.
<!-- Nesting --><div class="media"><img class="meta-usr-img rounded" src="assets/img/90x90.jpg" alt="pic1"><div class="media-body"><h4 class="media-heading">Heading</h4><p class="media-text">Sed dapibus nulla elementum,rutrum neque eu,gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.</p><div class="media"><a class="meta-usr-img" href="javascript:void(0);"><img class="rounded" src="assets/img/90x90.jpg" alt="pic2"></a><div class="media-body"><h4 class="media-heading">Heading</h4><p class="media-text">Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum,rutrum neque eu,gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.</p></div></div></div></div>
<!-- Notation Text --><div class="media"><img class="rounded" src="assets/img/90x90.jpg" alt="pic1"><div class="media-body"><h4 class="media-heading">Heading</h4><p class="media-text">Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum,rutrum neque eu,gravida neque.</p><div class="media-notation"><a href="javascript:void(0);" class="">Reply </a><a href="javascript:void(0);" class="">Edit </a><a href="javascript:void(0);" class="">Delete </a></div></div></div>
<!-- Notation Text with Icon --><div class="media"><img class=" rounded" src="assets/img/90x90.jpg" alt="pic1"><div class="media-body"><h4 class="media-heading">Heading</h4><p class="media-text">Sed dapibus nulla elementum,rutrum neque eu,gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.</p><div class="media-notation"><a href="javascript:void(0);" class=""><svg>... </svg>Reply </a><a href="javascript:void(0);" class=""><svg>... </svg>Edit </a><a href="javascript:void(0);" class=""><svg>... </svg>Delete </a></div></div></div>
HeadingWeb Designer
Sed dapibus nulla elementum,rutrum neque eu,gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.
<!-- Badge --><div class="media"><img class="rounded" src="assets/img/90x90.jpg" alt="pic1"><div class="media-body"><h4 class="media-heading"><span class="media-title">Heading</span><span class="badge badge-primary">Web Designer</span></h4><p class="media-text">Sed dapibus nulla elementum,rutrum neque eu,gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.</p></div></div>
<!-- Dropdown List --><div class="media"><img class=" rounded" src="assets/img/90x90.jpg" alt="pic1"><div class="media-body"><h4 class="media-heading"><span class="media-title">Heading</span><span class="dropdown-list dropdown"><i role="menu" class="flaticon-dot-three sr-only" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">sdfdsf</i><svg>... </svg><span class="dropdown-menu" aria-labelledby="dropdownMenuButton2"><a class="dropdown-item" href="javascript:void(0);"><span>Start chat</span><svg>... </svg></a><a class="dropdown-item" href="javascript:void(0);"><span>Make a call</span><svg>... </svg></a><span class="dropdown-divider"></span><a class="dropdown-item" href="javascript:void(0);"><span>Statistics</span><svg>... </svg></a></span></span></h4><p class="media-text">Sed dapibus nulla elementum,rutrum neque eu,gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.</p></div></div>