<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 ----------> <div class="card box-shadow"> <h4 class="card-title pricing-card-title text-center" style="margin-bottom: 0px; padding: 15px; font-size: 22px; font-weight: 100;"> LOREM IPSUM</h4> <div class="pricing-color card-header" style="border-bottom: 0px solid rgba(0,0,0,.125); padding: 15px;"> <ul> <li><i style="color:green;" class="fa fa-check"></i> Lorem Ipsum</li> <li><i style="color:green;" class="fa fa-check"></i> Lorem Ipsum</li> <li><i style="color:green;" class="fa fa-check"></i> Lorem Ipsum</li> <li><i style="color:green;" class="fa fa-check"></i> Lorem Ipsum</li> <li><i style="color:green;" class="fa fa-check"></i> Lorem Ipsum</li> <li><strong><i style="color:green;" class="fa fa-check"></i> Lorem Ipsum</strong></li></ul> </div> <div class="card-body text-center"> <a style="margin-top: 0px;" class="btn type--uppercase btn--primary" href="contact.php"><i class="fa fa-angle-right"></i> Lorem Ipsum</a> </div> </div>

.card { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; min-width: 40%; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0,0,0,.125); border-radius: .25rem; } .card-body { -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 1.25rem; } .card-header { padding: .75rem 1.25rem; margin-bottom: 0; background-color: rgba(0,0,0,.03); border-bottom: 1px solid rgba(0,0,0,.125); } /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) { .spacing { padding-top: 15px; padding-bottom: 15px; } }