<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="img_cover"> <div class="content"> <h3>Hello world</h3> <p>Welcome to bootsnipp</p> <button class="btn btn-primary">Click</button> </div> </div> </div> </div> </div>

.img_cover { background: url(http://via.placeholder.com/350x150); min-height: 100%; } .img_cover .content { text-align: center; padding: 40px 0px 40px 0px; } .btn { border-radius: 1px; border: 1px solid #000; } .btn:hover { border-radius: 1px; border: 1px solid #000; } .btn-primary { background-color: transparent; color: #000; } .btn-primary:hover { background-color: #000; color: #fff; }