<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"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css" rel="stylesheet" type="text/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"> <!-- Feature Cards --> <section class="d-flex bg-light" id="feature-cards"> <div class="container d-flex justify-content-center"> <div class="row align-items-center justify-content-center"> <div class="col-12 align-self-center"> <div class="row"> <div class="col-12 col-lg-7 mx-auto text-center"> <h2 class="display-4">Feature Cards</h2> <p class="text-muted lead mb-5">This snipped does not use any custom styling or scripting but does make use of Font-Awesome free.</p> </div> </div> <div class="row"> <div class="col-12 col-lg-3"> <div class="card mb-3"> <div class="card-body"> <div class="row"> <div class="col mx-auto text-center"> <i class="fa fa-cloud-upload-alt fa-4x text-info"></i> </div> </div> <div class="row mt-3"> <div class="col-12 text-center"> <p class="text-info">Cloud Upload</p> <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus dicta error.</p> <button class="btn btn-info mt-3 px-4">Click Here</button> </div> </div> </div> </div> </div> <div class="col-12 col-lg-3"> <div class="card mb-3"> <div class="card-body"> <div class="row"> <div class="col mx-auto text-center"> <i class="fa fa-desktop fa-4x text-warning"></i> </div> </div> <div class="row mt-3"> <div class="col-12 text-center"> <p class="text-info">Computer Service</p> <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus dicta error.</p> <button class="btn btn-warning mt-3 px-4">Click Here</button> </div> </div> </div> </div> </div> <div class="col-12 col-lg-3"> <div class="card mb-3"> <div class="card-body"> <div class="row"> <div class="col mx-auto text-center"> <i class="fa fa-envelope fa-4x text-success"></i> </div> </div> <div class="row mt-3"> <div class="col-12 text-center"> <p class="text-info">E-Mail Service</p> <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus dicta error.</p> <button class="btn btn-success mt-3 px-4">Click Here</button> </div> </div> </div> </div> </div> <div class="col-12 col-lg-3"> <div class="card mb-3"> <div class="card-body"> <div class="row"> <div class="col mx-auto text-center"> <i class="fa fa-wrench fa-4x text-danger"></i> </div> </div> <div class="row mt-3"> <div class="col-12 text-center"> <p class="text-info">Quality Service</p> <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus dicta error.</p> <button class="btn btn-danger mt-3 px-4">Click Here</button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section> </div>