<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://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous" /> <section class="home-box"> <div class="container"> <div class="row"> <div class="col-md-9 pt-5"> <div class="card-group"> <div class="card me-3"> <div class="card-body"><i aria-hidden="true" class="fas fa-user-friends"></i> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build </p> </div> </div> <div class="card me-3"> <div class="card-body"><i aria-hidden="true" class="fas fa-book"></i> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build</p> </div> </div> <div class="card me-3"> <div class="card-body"><i aria-hidden="true" class="fa fa-bell"></i> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to </p> </div> </div> <div class="card me-3"> <div class="card-body"><i aria-hidden="true" class="far fa-heart"></i> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card </p> </div> </div> </div> </div> <div class="col-md-3"></div> </div> </div> </section> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>

.home-box { background: #231833; } .fab { font-family: "Font Awesome 5 Brands"; } .home-box .fa, .home-box .fas { font-family: "Font Awesome 5 Free"; font-weight: 900; } .home-box .far { font-family: "Font Awesome 5 Free"; font-weight: 400; } .home-box svg { width: 4em !important; height: 4em; color: #ff8700; border-color: #ff8700; margin-bottom: 10px; } .home-box .card { border-style: solid; border-width: 3px 3px 3px 3px; border-color: rgba(71, 55, 112, 0.6); transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s; padding: 10px; border-radius: 5px; background-color: transparent; text-align: center; } .card-group > .card + .card { margin: 0 6px; border-left: 3px solid rgba(71, 55, 112, 0.6); } .home-box .card-title { color: #ffffff; font-weight: 600; } .home-box .card-text { color: #766c8f; } .home-box .card-body { padding: 1rem 0.5rem; }