<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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"> <div class="col-sm-4 col-md-4"> <div class="room"> <div class="room-img-content"> <img src="http://placehold.it/460x250/e67e22/ffffff&text=HTML5" class="img-responsive" /> <span class="room-title"><b>Standard Room</b><br /> <b><i class="fa fa-exclamation-circle"></i>3 Rooms Left</b></span> </div> <div class="room-content"> <div class="roomproperties"> <b><a href="" data-toggle="modal" data-target="#room_images">View Photos</a></b> | <b><a href="" data-toggle="modal" data-target="#room_facilities">Room Facilities</a></b> </div> <div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </div> <div class="row number_rooms" id="number_rooms"> <div class="col-md-12"> <select class="form-control"> <option value="">Select Number of Rooms</option> <option value="">1</option> <option value="">2</option> <option value="">3</option> </select> </div> </div> <div class="row number_people" id="room_config"> <center> <p>Room 1</p> </center> <div class="col-md-6"> <select class="form-control" id="number_adults"> <option value="">Adults</option> <option value="">1</option> <option value="">2</option> <option value="">3</option> </select> </div> <div class="col-md-6"> <select class="form-control" id="number_kids"> <option value="">Kids</option> <option value="">0</option> <option value="">1</option> <option value="">2</option> <option value="">3</option> </select> </div> </div> <div class="row room_cost_total"> <div class="col-md-8"> <h4>$ 200</h4> </div> <div class="col-md-4 pull-right"> <a href="#" class="btn btn-success btn-sm">Add to Cart</a> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="room_images" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel"><i class="fa fa-share-alt"></i> Share</h4> </div> <div class="modal-body"> <p><a title="Facebook" href=""><span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-facebook fa-stack-1x"></i></span></a> <a title="Twitter" href=""><span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x"></i></span></a> <a title="Google+" href=""><span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-google-plus fa-stack-1x"></i></span></a> <a title="Linkedin" href=""><span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-linkedin fa-stack-1x"></i></span></a> <a title="Reddit" href=""><span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-reddit fa-stack-1x"></i></span></a> <a title="WordPress" href=""><span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-wordpress fa-stack-1x"></i></span></a> <a title="Digg" href=""><span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-digg fa-stack-1x"></i></span></a> <a title="Stumbleupon" href=""><span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-stumbleupon fa-stack-1x"></i></span></a><a title="E-mail" href=""><span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-envelope fa-stack-1x"></i></span></a> <a title="Print" href=""><span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-print fa-stack-1x"></i></span></a></p> <h2><i class="fa fa-envelope"></i> Newsletter</h2> <p>Subscribe to our weekly Newsletter and stay tuned.</p> <form action="" method="post"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope"></i></span> <input type="email" class="form-control" placeholder="your@email.com"> </div> <br /> <button type="submit" value="sub" name="sub" class="btn btn-primary"><i class="fa fa-share"></i> Subscribe Now!</button> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="room_facilities" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel"><i class="fa fa-share-alt"></i> Share</h4> </div> <div class="modal-body"> <p><a title="Facebook" href=""><span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-facebook fa-stack-1x"></i></span></a> <a title="Twitter" href=""><span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x"></i></span></a> <a title="Google+" href=""><span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-google-plus fa-stack-1x"></i></span></a> <a title="Linkedin" href=""><span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-linkedin fa-stack-1x"></i></span></a> <a title="Reddit" href=""><span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-reddit fa-stack-1x"></i></span></a> <a title="WordPress" href=""><span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-wordpress fa-stack-1x"></i></span></a> <a title="Digg" href=""><span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-digg fa-stack-1x"></i></span></a> <a title="Stumbleupon" href=""><span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-stumbleupon fa-stack-1x"></i></span></a><a title="E-mail" href=""><span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-envelope fa-stack-1x"></i></span></a> <a title="Print" href=""><span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-print fa-stack-1x"></i></span></a></p> <h2><i class="fa fa-envelope"></i> Newsletter</h2> <p>Subscribe to our weekly Newsletter and stay tuned.</p> <form action="" method="post"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope"></i></span> <input type="email" class="form-control" placeholder="your@email.com"> </div> <br /> <button type="submit" value="sub" name="sub" class="btn btn-primary"><i class="fa fa-share"></i> Subscribe Now!</button> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div>

@import url("//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css"); body { padding-top: 20px; background-color: #F7F7F7; } .room { background-color: #FFF; overflow: hidden; box-shadow: 0 0 1px #CCC; } .room img { filter: blur(2px); -webkit-filter: blur(2px); -moz-filter: blur(2px); -o-filter: blur(2px); -ms-filter: blur(2px); } .room .room-content { padding: 15px; } .room .roomproperties { font-size: 11px; color: #737373; padding: 0px 0px 20px; } .room .room-img-content { height: 196px; position: relative; } .room .room-img-content img { position: absolute; } .room-img-content .fa { padding-left: 5px; padding-right: 10px; } .room .room-title { display: table-cell; vertical-align: bottom; z-index: 2; position: relative; padding-top:20px; } .room .room-title b { background-color: rgba(51, 51, 51, 0.58); display: inline-block; margin-bottom: 5px; color: #FFF; padding: 10px 15px; margin-top: 5px; } .number_rooms { padding-top: 15px; } .number_people { padding-top: 15px; } .room_cost_total h4 { font-size : 5rem; } .room_cost_total { padding-top: 20px; padding-left: 15px; } .room_cost_total .btn { margin-top: 25px; }