Bootstrap Snippet How to Design Bootstrap Call to Action Widget Appointment using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

Related: See More

Questions / Comments:

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

Related: See More

Questions / Comments:

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