<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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" /> <div class="py-5 my-5"> <div class="container"> <div class="row"> <div class="col-sm-2 col-lg-4"> <div class="item"> <i class="fas fa-chess-king"></i> <h3>King</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit duis facilisis massa.</p> </div> </div> <div class="col-sm-2 col-lg-4"> <div class="item"> <i class="fas fa-chess-queen"></i> <h3>Queen</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit duis facilisis massa.</p> </div> </div> <div class="col-sm-2 col-lg-4"> <div class="item"> <i class="fas fa-chess-knight"></i> <h3>Knight</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit duis facilisis massa.</p> </div> </div> </div> </div> </div>

.item { background-color: #fff; box-shadow: 0 4px 6px rgba(50,50,93,0.11), 0 1px 3px rgba(0,0,0,0.08); margin-bottom: 30px; border-radius: 5px; padding: 35px; text-align: center; cursor: pointer; transition: 0.3s all; } .item:hover { transform: translateY(-2px); box-shadow: 0 7px 14px rgba(50,50,93,0.10), 0 3px 6px rgba(0,0,0,0.08); } .item p:last-of-type { margin-bottom: 0px; } .item i { color: #007bff; font-size: 50px; margin-bottom: 20px; } .item h3 { text-transform: uppercase; font-size: 25px; letter-spacing: 2px; font-weight: 700; } .item p { font-size: 15px; color: #666; }