<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"> <h1>Sample Title</h1> <div class="row"> <div class="col-xs-4"> <h3> Lorem Ipsum </h3> </div> <div class="col-xs-2"> <h4> 2:00 </h4> </div> <div class="col-xs-4"> <h4> Short Description </h4> </div> <div class="col-xs-2"> <div class="btn-wrap"> <a href="#"> Button</a> </div> </div> </div> <div class="row"> <div class="col-xs-4"> <h3> Lorem Ipsum </h3> </div> <div class="col-xs-2"> <h4> 2:00 </h4> </div> <div class="col-xs-4"> <h4> Short Description </h4> </div> <div class="col-xs-2"> <div class="btn-wrap"> <a href="#"> Button</a> </div> </div> </div> <div class="row"> <div class="col-xs-4"> <h3> Lorem Ipsum </h3> </div> <div class="col-xs-2"> <h4> 2:00 </h4> </div> <div class="col-xs-4"> <h4> Short Description </h4> </div> <div class="col-xs-2"> <div class="btn-wrap"> <a href="#"> Button</a> </div> </div> </div> </div>

@import url('https://fonts.googleapis.com/css?family=Righteous'); .container{ font-family: 'Righteous', cursive; background-color: #f2f2f2; } .btn-wrap a{ color:#212121; font-family: 'Righteous', cursive; font-size:18px; padding: 11px 28px; } .btn-wrap a:hover{ text-decoration: none; } .btn-wrap{ font-family: 'Righteous', cursive; border-width: 4px; box-shadow: 4px 5px 0 #212121; border: 4px solid #212121; text-align: center; padding: 7px; } .btn-wrap:hover{ -webkit-transform: translate(2px,3px); transform: translate(2px,3px); box-shadow: 2px 2px 0 #212121; } h3{ margin-top:0px; } h1{ font-weight:bold; } .row{ padding-top:20px; padding-bottom:20px; border-bottom: 1px solid; border-color: rgba(158, 158, 158, 0.25); }