<div class="media media-lg">
<img class="mr-3 mb-4" src="https://laravel.spruko.com/yoha/Horizontal-Light/assets/images/media/media1.jpg" alt="Generic placeholder image">
<div class="media-body">
<h4 class="mt-0">Media heading</h4>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
</div>
<div class="media media-lg">
<img class="mr-3 mb-4" src="https://laravel.spruko.com/yoha/Horizontal-Light/assets/images/media/media2.jpg" alt="Generic placeholder image">
<div class="media-body overflow-hidden">
<h4 class="mt-0">Media heading</h4>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
<div class="media media-lg mt-3">
<img class="mr-3 mb-4" src="https://laravel.spruko.com/yoha/Horizontal-Light/assets/images/media/media3.jpg" alt="Generic placeholder image">
<div class="media-body overflow-hidden">
<h4 class="mt-0">Media heading</h4>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
</div>
</div>
</div>
<ul class="list-unstyled">
<li class="media media-lg mt-0 border-bottom-0">
<img class="mr-3 mb-4" src="https://laravel.spruko.com/yoha/Horizontal-Light/assets/images/media/media4.jpg" alt="Generic placeholder image">
<div class="media-body">
<h4 class="mt-0 mb-1">Media heading 01</h4>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
</li>
<li class="media media-lg my-4 border-bottom-0">
<img class="mr-3" src="https://laravel.spruko.com/yoha/Horizontal-Light/assets/images/media/media5.jpg" alt="Generic placeholder image">
<div class="media-body">
<h4 class="mt-0 mb-1">Media heading 02</h4>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
</li>
<li class="media media-lg border-bottom-0">
<img class="mr-3" src="https://laravel.spruko.com/yoha/Horizontal-Light/assets/images/media/media1.jpg" alt="Generic placeholder image">
<div class="media-body">
<h4 class="mt-0 mb-1">Media heading 03</h4>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
</li>
</ul>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
<div class="media media-lg">
<img class="align-self-start mr-3 mb-4" src="https://laravel.spruko.com/yoha/Horizontal-Light/assets/images/media/media2.jpg" alt="Generic placeholder image">
<div class="media-body">
<h4 class="mt-0">Top-aligned media</h4>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
<div class="media media-lg">
<img class="align-self-center mr-3 mb-4" src="https://laravel.spruko.com/yoha/Horizontal-Light/assets/images/media/media3.jpg" alt="Generic placeholder image">
<div class="media-body">
<h4 class="mt-0">Center-aligned media</h4>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
<div class="media media-lg">
<img class="align-self-end mr-3 mb-4" src="https://laravel.spruko.com/yoha/Horizontal-Light/assets/images/media/media4.jpg" alt="Generic placeholder image">
<div class="media-body">
<h4 class="mt-0">Bottom-aligned media</h4>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
<p class="mb-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
<div class="media media-lg">
<div class="media-body mt-0">
<h4 class="mt-0 mb-4">Media object</h4>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
<img class="ml-2 mt-3 mb-3" src="https://laravel.spruko.com/yoha/Horizontal-Light/assets/images/media/media5.jpg" alt="Generic placeholder image">
</div>