Code

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Graduation</title>
    <!-- CSS -->
    <link rel="stylesheet" href="http://graduation.dev/graduation/public/_css/bootstrap.css"/>                           <!-- Bootstrap -->
    <link rel="stylesheet" href="http://graduation.dev/graduation/public/_css/bootstrap-social.css"/>                    <!-- For Social Icons -->
    <link rel="stylesheet" href="http://graduation.dev/graduation/public/_css/font-awesome.css"/>                        <!-- Font Awesome -->
    <link rel="stylesheet" href="http://graduation.dev/graduation/public/_css/main.css"/>                                <!-- Main Style -->
    <link rel="stylesheet" href="http://graduation.dev/graduation/public/_css/prettyPhoto.css"/>                         <!-- Carousel -->
    <link rel="stylesheet" href="http://graduation.dev/graduation/public/_lib/lightbox/css/jquery.lightbox-0.5.css"/>    <!-- Lightbox -->
    <link rel="stylesheet" href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css">      <!-- Blueimp -->
    <link rel="stylesheet" href="http://graduation.dev/graduation/public/_lib/Bootstrap-Image-Gallery/css/bootstrap-image-gallery.min.css"/>    <!-- For the Photo gallery Effect -->
    <link rel="stylesheet" href="//tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css"> <!-- Booking Calendar -->
    <link href="//www.fuelcdn.com/fuelux/3.2.1/css/fuelux.min.css" rel="stylesheet">            <!-- Booking calendar -->
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">  <!-- Calendar -->
    <link rel="stylesheet" href="http://graduation.dev/graduation/public/_css/datepicker.css"/>                         <!-- Carousel -->
</head>
            <!-- Head End -->

<body id="booking" onload="startTime()">
            <nav class="nav navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="http://graduation.dev/graduation/public">
                <img class="hidden-xs" src="http://placehold.it/150x50&text=Logo" alt=""> <!-- Hidden XS devices like Iphone -->
                <img class="visible-xs" src="http://placehold.it/120x40&text=Logo" alt=""> <!-- Visible XS devices like Iphone -->
                <!-- Logo in two formats one normal one for mobile -->
            </a>
        </div>

        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="http://graduation.dev/graduation/public">Home</a></li>
                <li><a href="http://graduation.dev/graduation/public/about">About</a></li>
                <li><a href="http://graduation.dev/graduation/public/media">Gallery</a></li>
                <li><a href="http://graduation.dev/graduation/public/booking">Booking</a></li>
                <li class="hidden-xs"><a href="http://graduation.dev/graduation/public/contact">Contact</a></li>
                <li class="visible-xs"><a href="http://graduation.dev/graduation/public/info">Info</a></li> <!-- Mobile Vs -->
            </ul>
        </div>

    </div>
</nav>

<!-- Nav -->
  <!-- NAVIGATION -->

<div id="wrap">

    <div class="content container">


    <div class="input-group date">
    <input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
    </div>

                       <!-- CONTENT -->


    </div> <!-- Content -->

</div> <!-- Wrap -->
<div class="clearfix"></div>
    <footer class="footer" id="footer">
    <div class="container">
        <p class="text-muted pull-left">
            <a class="btn btn-social-icon btn-facebook">
                <i class="fa fa-facebook"></i>
            </a>
            <a class="btn btn-social-icon btn-twitter">
                <i class="fa fa-twitter"></i>
            </a>
            <a class="btn btn-social-icon btn-linkedin">
                 <i class="fa fa-linkedin"></i>
            </a>
            <a class="btn btn-primary hidden-xs" href="http://graduation.dev/graduation/public/contact">
                <span class="glyphicon glyphicon-envelope fa-1x"></span>
            </a>
        </p>

        <p id="copyright" class="text-muted pull-right">
            <span class="glyphicon glyphicon-copyright-mark"></span>2014/2015
        </p>
    </div>
</footer>
      <!-- FOOTER -->

<!-- Scripts JS/JQ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://graduation.dev/graduation/public/_js/datepicker.js"></script>
<script src="http://graduation.dev/graduation/public/_js/bootstrap.js"></script>
<script src="http://graduation.dev/graduation/public/_js/jquery.jqEasyCharCounter-min.js"></script>
<script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<script src="http://graduation.dev/graduation/public/_lib/Bootstrap-Image-Gallery/js/bootstrap-image-gallery.min.js"></script>
<script src="http://graduation.dev/graduation/public/_js/response.js"></script>
<script src="http://graduation.dev/graduation/public/_js/jquery.prettyPhoto.js"></script>
<script src="http://graduation.dev/graduation/public/_js/jquery.fittext.js"></script>
<script src="http://graduation.dev/graduation/public/_lib/lightbox/js/jquery.lightbox-0.5.pack.js"></script>
<script src="http://graduation.dev/graduation/public/_js/mainScripts.js"></script>

</body> <!-- Body End -->
</html>