<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="container"> <div class="row pannel-box"> <div class="col-lg-12"> <div class="title"> <h1 class="text-center mb-4 mt-4">Pannel Box</h1> </div> <div class="row sm-pannel"> <div class="col-sm-3"> <div class="box"> <img src="assest/image/nainavannu-la.jpg" alt="Loading Image"> </div> <h2><a href="#">Title Goes Here</a> </h2> </div> <div class="col-sm-3"> <div class="box"> <img src="assest/image/nainavannu-la.jpg"> </div> <h2><a href="#">Title Goes Here</a> </h2> </div> <div class="col-sm-3"> <div class="box"> <img src="assest/image/nainavannu-la.jpg"> </div> <h2><a href="#">Title Goes Here</a> </h2> </div> <div class="col-sm-3"> <div class="box"> <img src="assest/image/nainavannu-la.jpg"> </div> <h2><a href="#">Title Goes Here</a> </h2> </div> </div> </div> </div> </div>

.box { border: 1px #000 solid; height: 200px; width: 100%; } .box img { width: 100%; height: 100%; max-height: 200px; object-fit: cover; } .sm-pannel h2 { color: #000; font-weight: bold; font-size: 21px; margin-top: 5px; } .sm-pannel h2 a { text-decoration: none; }