<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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> </div> </div> </div>

@import url(http://fonts.googleapis.com/css?family=News+Cycle:400,700); 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; }