Bootstrap Snippet layout using HTML CSS Bootstrap jQuery

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 ---------->
 <script type="text/javascript " src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js "></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css" />
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<!-- Page Content -->
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div style="height:40px"></div>
                <div class="row carousel-holder">
                    <div class="col-md-12">
                        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                            <ol class="carousel-indicators">
                                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                            </ol>
                            <div class="carousel-inner">
                                <div class="item active">
                                    <img class="slide-image" src="https://cache-graphicslib.viator.com/graphicslib/destination/rhine-river-133772.jpg" alt="">
                                </div>
                                <div class="item">
                                    <img class="slide-image" src="https://cache-graphicslib.viator.com/graphicslib/destination/rhine-river-133772.jpg" alt="">
                                </div>
                                <div class="item">
                                    <img class="slide-image" src="https://cache-graphicslib.viator.com/graphicslib/destination/rhine-river-133772.jpg" alt="">
                                </div>
                            </div>
                            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left" style="color:red;"></span>
                            </a>
                            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right" style="color:red;"></span>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
 body {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
        }
        
        .form-control {
            border-radius: 0;
        }
        
        .form-control:focus {
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        
        .check {
            background-image: url(http://individual.icons-land.com/IconsPreview/Medical/PNG/Documents/32x32/Calendar_DoctorVisit.png);
            background-repeat: no-repeat;
            background-position: 98% 50%;
            cursor: pointer;
        }
        
        .date {
            background-image: url(images/watch.png);
            background-repeat: no-repeat;
            background-position: 98% 50%;
            cursor: pointer;
        }
        
        .ui-datepicker {
            background: #333;
            border: 1px solid #555;
            color: #EEE;
        }
        
        .item-desc {
            background: #E8E8E8 none repeat scroll 0% 0%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function () {
            $(".check ").datepicker({
                showButtonPanel: true,
                currentText: "Today ",
                closeText: "Close ",
                constrainInput: true,
                minDate: 0,
                maxDate: "+2M ",
                // numberOfMonths: 2
            });
        });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"layout"
Bootstrap 3.3.0 Snippet by walifaizy

Related: See More

Questions / Comments:

"layout" Bootstrap 3.3.0 Snippet by walifaizy

Related: See More

Questions / Comments:

"layout"
Bootstrap 3.3.0 Snippet by walifaizy