"Article with caption"
Bootstrap 3.3.0 Snippet by andras2001

<div class="container"> <div class="row"> <div class="row"> <article class="col-md-6"> <figure class="col-lg-12"> <a href=""><img class="img img-responsive article-img" src="http://farm1.staticflickr.com/258/18511405422_d7c67c0ff8_k.jpg"></a> <figcaption class="article-caption"><h1 class="article-title"><a href="">Your article title goes here</a></h1> </figcaption> </figure> <div class="article-intro col-lg-12" style="padding-top: 10px;"> <strong>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor. Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor. Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor..</strong> </div> </article> <article class="col-md-6"> <figure class="col-lg-12"> <a href=""><img class="img img-responsive article-img" src="http://farm1.staticflickr.com/354/18141136234_6aee6ac0ea_k.jpg"></a> <figcaption class="article-caption"><h1 class="article-title"><a href="">Your article title goes here</a></h1> </figcaption> </figure> <div class="article-intro col-lg-12" style="padding-top: 10px;"> <strong>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor. Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor. Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor..</strong> </div> </article> </div> <hr> <div class="row"> <article class="col-md-6"> <figure class="col-lg-12"> <a href=""><img class="img img-responsive article-img" src="http://farm1.staticflickr.com/510/18737505996_98a20bf592_k.jpg"></a> <figcaption class="article-caption"><h1 class="article-title"><a href="">Your article title goes here</a></h1> </figcaption> </figure> <div class="article-intro col-lg-12" style="padding-top: 10px;"> <strong>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor. Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor. Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor..</strong> </div> </article> <article class="col-md-6"> <figure class="col-lg-12"> <a href=""><img class="img img-responsive article-img" src="http://farm1.staticflickr.com/346/18328027128_704280cd4c_k.jpg"></a> <figcaption class="article-caption"><h1 class="article-title"><a href="">Your article title goes here</a></h1> </figcaption> </figure> <div class="article-intro col-lg-12" style="padding-top: 10px;"> <strong>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor. Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor. Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor..</strong> </div> </article> </div> </div> </div>
@import url(http://fonts.googleapis.com/css?family=News+Cycle:400,700); body { padding-top: 30px; } h1 { font-family: 'News Cycle', sans-serif; } article { padding-bottom: 20px; } .article-caption { position: absolute; bottom: 16px; max-width: 90%; text-align: center; background-color: rgba(200,200,200,0.5); } .article-img { width: 100%; max-height: 400px; object-fit: cover; } @media screen and (max-width: 768px) { .article-title { font-size: 28px; } } @media screen and (max-width: 500px) { .article-title { font-size: 20px; } } .article-caption a { color: white; }

Questions / Comments:

Related: See More