<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 ----------> <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"> <h2 class="text-center">Título Bootstrap</h2> <div class="row"> <div class="col-md-4 text-center"> <div class="box1"> <div class="box-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div> <a href="#" class="btn btn-block btn-primary">Learn more</a> </div> </div> <div class="col-md-4 text-center"> <div class="box2"> <div class="box-content"> <p>Lorem ipsum dolor sit amet</p> </div> <a href="#" class="btn btn-block btn-primary">Learn more</a> </div> </div> <div class="col-md-4 text-center"> <div class="box3"> <div class="box-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div> <a href="#" class="btn btn-block btn-primary">Learn more</a> </div> </div> </div> </div> </div> </div>

.box1 { transition:all 0.2s ease; margin-top: 10px; border-radius: 0; padding:0 10px 10px 10px; min-height:340px; background-image: url(https://media.istockphoto.com/photos/beautiful-cheerful-girl-listening-music-in-the-street-picture-id856706258?s=2048x2048); background-repeat: no-repeat; background-position: 20% 100%; background-color: transparent; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; -ms-flex-align:center; -webkit-align-items: center; -webkit-box-align: center; } .box2 { transition:all 0.2s ease; margin-top: 10px; border-radius: 0; padding:0 10px 10px 10px; min-height:340px; background-image: url(https://media.istockphoto.com/photos/dad-and-son-taking-selfie-and-having-fun-in-the-park-picture-id870798520?s=2048x2048); background-repeat: no-repeat; background-position: 20% 100%; background-color: transparent; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; -ms-flex-align:center; -webkit-align-items: center; -webkit-box-align: center; } .box3 { transition:all 0.2s ease; margin-top: 10px; border-radius: 0; padding:0 10px 10px 10px; min-height:340px; background-image: url(https://media.istockphoto.com/photos/happy-elderly-couple-at-breakfast-picture-id853664274?s=2048x2048); background-repeat: no-repeat; background-position: 20% 100%; background-color: transparent; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; -ms-flex-align:center; -webkit-align-items: center; -webkit-box-align: center; } h2 { font-size: 24px; text-transform: uppercase; font-weight:600; } .box1, .box2, .box3 { display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content:flex-end; -ms-flex-align:flex-end; -webkit-align-items:flex-end; -webkit-box-align:flex-end; flex-wrap: wrap; } .box-content{ display:inline-block; margin:0 auto; text-align:center; } .box1 .box-content p, .box2 .box-content p, .box3 .box-content p { color:#fff; font-size: 24px; text-transform: uppercase; font-weight:600; padding:0; margin: 0; text-align:center; } .box1 .btn-primary, .box2 .btn-primary, .box3 .btn-primary{ color:#fff; font-size: 24px; text-transform: uppercase; font-weight:600; background:red; border:none; border-radius:0; } .box1 .btn-primary:hover, .box2 .btn-primary:hover, .box3 .btn-primary:hover{ background:black; }