"How to Design Bootstrap Call to Action Widget Appointment"
Bootstrap 3.3.0 Snippet by jochemstoel

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Call to action for <a href="https://easetemplate.com/downloads/physiotherapy-free-website-template-download/">online booking appointment</a></h2> </div> <div class="space"> <div class="row"> <div class="col-md-4"> <div class="widget widget-call-to-action well-default"> <h3 class="widget-title">Book Your Appointment</h3> <p class="text-white">Call to action widget for booking appointment online.</p> <a href="https://easetemplate.com/downloads/physiotherapy-free-website-template-download/" class="btn btn-white btn-lg">Make An Appointment</a> </div> </div> <div class="col-md-4"> <div class="widget widget-call-to-action well-primary"> <h3 class="widget-title">Book Your Appointment</h3> <p class="text-white">Call to action widget for booking appointment online.</p> <a href="https://easetemplate.com/downloads/physiotherapy-free-website-template-download/" class="btn btn-white btn-lg">Make An Appointment</a> </div> </div> <div class="col-md-4"> <div class="widget widget-call-to-action well-secondary"> <h3 class="widget-title">Book Your Appointment</h3> <p class="text-white">Call to action widget for booking appointment online.</p> <a href="https://easetemplate.com/downloads/physiotherapy-free-website-template-download/" class="btn btn-white btn-lg">Make An Appointment</a> </div> </div> </div></div> </div>
.space{padding-top:100px; padding-bottom:100px;} .btn { display: inline-block; padding: 10px 20px; margin-bottom: 0; font-size: 13px; font-weight: 800; letter-spacing: 1px; line-height: 1.42857143; text-align: center; border: none; text-transform: uppercase; border-radius: 0px; } .btn-default { color: #fff; background-color: #333; } .btn-default:hover { color: #fff; background-color: #019852; border-color: #019852; } .btn-default.focus, .btn-default:focus { color: #fff; background-color: #019852; border-color: #019852; } .btn-primary { background-color: #474747; color: #333; } .btn-primary:hover { background-color: #333; color: #fff; } .btn-white { color: #333; background-color: #fff; border: 1px solid #fff; } .btn-white:hover { background-color: #ddd; border-color: #ddd; color: #333; } .btn-white.focus, .btn-white:focus { background-color: #019852; border-color: #019852; color: #fff; } .widget { margin-bottom: 4px; background-color: #eef4f1; padding: 40px; } .widget-title { margin-bottom: 20px; margin-top:0px; } .well-default{background-color: #0eb769;} .well-primary{background-color: #ff515b;} .well-secondary{background-color: #0db2f0;} .widget-call-to-action {} .widget-call-to-action .widget-title{font-size: 42px; color: #fff; font-weight: 600;} .widget-call-to-action p{font-size: 18px; color:#fff; margin-bottom:30px;}

Related: See More


Questions / Comments: