<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"> <!-- Pricing --> <section class="d-flex bg-white" id="pricing"> <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 font-weight-normal">Pricing</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 mb-3"> <div class="col-12 col-lg-4"> <div class="card border-secondary mb-5"> <span class="h6 w-60 mx-auto px-4 py-2 rounded-bottom bg-primary text-white shadow-sm">Basic</span> <div class="card-body"> <div class="row"> <div class="col text-center align-self-center"> <h1 class="display-4 font-weight-normal text-primary text-center mb-3"><span class="font-weight-light h6">$</span>29</><span class="h6 text-muted ml-2">/ per month</span></h1> </div> </div> <p class="card-text lead">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> <ul class="list-group list-group-flush"> <li class="list-group-item"><i class="fa fa-file-contract mr-3"></i>One Site</li> <li class="list-group-item"><i class="fa fa-cloud mr-3"></i>1 GB Storage</li> <li class="list-group-item"><i class="fa fa-database mr-3"></i>Unlimited Databases</li> </ul> <div class="card-body text-center"> <a class="btn btn-outline-secondary btn-lg font-weight-light">Buy Now</a> </div> </div> </div> <! -- Col --> <div class="col-12 col-lg-4"> <div class="card border-primary mb-5"> <span class="h6 w-60 mx-auto px-4 py-2 rounded-bottom bg-primary text-white shadow-sm">Business</span> <div class="card-body"> <h1 class="display-4 font-weight-normal text-primary text-center mb-3"><span class="font-weight-light h6">$</span>29</><span class="h6 text-muted ml-2">/ per month</span></h1> <p class="card-text lead">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> <ul class="list-group list-group-flush"> <li class="list-group-item"><i class="fa fa-file-contract mr-3"></i>One Site</li> <li class="list-group-item"><i class="fa fa-cloud mr-3"></i>1 GB Storage</li> <li class="list-group-item"><i class="fa fa-database mr-3"></i>Unlimited Databases</li> </ul> <div class="card-body text-center"> <a class="btn btn-primary btn-lg text-white font-weight-light">Buy Now</a> </div> </div> </div> <! -- Col --> <div class="col-12 col-lg-4"> <div class="card border-secondary mb-5"> <span class="h6 w-60 mx-auto px-4 py-2 rounded-bottom bg-primary text-white shadow-sm">Enterprise</span> <div class="card-body"> <h1 class="display-4 font-weight-normal text-primary text-center mb-3"><span class="font-weight-light h6">$</span>49</><span class="h6 text-muted ml-2">/ per month</span></h1> <p class="card-text lead">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> <ul class="list-group list-group-flush"> <li class="list-group-item"><i class="fa fa-file-contract mr-3"></i>One Site</li> <li class="list-group-item"><i class="fa fa-cloud mr-3"></i>1 GB Storage</li> <li class="list-group-item"><i class="fa fa-database mr-3"></i>Unlimited Databases</li> </ul> <div class="card-body text-center"> <a class="btn btn-outline-secondary btn-lg font-weight-light">Buy Now</a> </div> </div> </div> <! -- Col --> </div> </div> </div> </div> </section> </div>