<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 ----------> <section id="highlight"> <div class="container"> <div class="row py-3"> <div class="col-md-6 mb-2"> <div class="row"> <div class="col-3"> <div class="border p-4 text-center"> <i class="fas fa-graduation-cap fa-3x"></i> </div> </div> <div class="col-9"> <h6 class="text-warning">Standard Education</h6> <p class="text-white">demo edmoe dmie adnfs kasdf asdjfksadfkjasdf</p> </div> </div> </div> <div class="col-md-6 mb-2"> <div class="row"> <div class="col-3"> <div class="border p-4 text-center"> <i class="fas fa-handshake fa-3x"></i> </div> </div> <div class="col-9"> <h6 class="text-warning">Our Staff</h6> <p class="text-white">demo edmoe dmie adnfs kasdf asdjfksadfkjasdf</p> </div> </div> </div> <div class="col-md-6 mb-2"> <div class="row"> <div class="col-3"> <div class="border p-4 text-center"> <i class="fas fa-basketball-ball fa-3x"></i> </div> </div> <div class="col-9"> <h6 class="text-warning">Various Activities</h6> <p class="text-white">demo edmoe dmie adnfs kasdf asdjfksadfkjasdf</p> </div> </div> </div> <div class="col-md-6 mb-2"> <div class="row"> <div class="col-3"> <div class="border p-4 text-center"> <i class="fas fa-photo-video fa-3x"></i> </div> </div> <div class="col-9"> <h6 class="text-warning">Our Facilities</h6> <p class="text-white">demo edmoe dmie adnfs kasdf asdjfksadfkjasdf</p> </div> </div> </div> </div> </div> </section>

@import url('https://use.fontawesome.com/releases/v5.11.2/css/all.css'); #highlight { background: #e7e7e7; background-size: cover; box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.65); } .fa-3x { color: #ffc107; }