"Hotels tile view"
Bootstrap 3.0.0 Snippet by SammuMufeed

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="navbar-default top-ribbon"> <div class="container"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Why Lefa Tours ?</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#"><img src="assets/icons/fb.png" width="24" height="24"></a></li> <li><a href="#"><img src="assets/icons/twitter.png" width="24" height="24"></a></li> </ul> </div> </div> <!-- /top-ribbon --> <div class="navbar navbar-default navbar-static-top" style="border-bottom:0;"> <div class="container"> <a class="navbar-brand" href="#" style="margin:0; padding:0;"><img src="assets/logo.png" width="143" height="45"></a> <ul class="nav navbar-nav navbar-right"> <li><a href="#">HOME</a></li> <li><a href="#">MALDIVES</a></li> <li><a href="hotels.html">HOTELS</a></li> <li><a href="#">FLIGHTS</a></li> <li><a href="#">PACKAGES</a></li> <li><a href="#">DEALS</a></li> </ul> </div> </div> <div class="container"> <div class="row row-offcanvas row-offcanvas-right"> <div class="col-xs-12 col-sm-3 sidebar-offcanvas side-book"> <div class="rowsl all-booker"><h3 style="margin:0; padding:0;">Search Hotels</h3></div> <div class="rowsl all-booker-bg"></div> <div class="rowsl booker-form"> <form> <div class="form-group"> <label>Where do you want to stay ?</label> <input type="text" class="form-control simplebox" placeholder="Your Destination"> </div> <div class="form-group"> <div class="row"> <div class="col-lg-6"><label>Arrival</label><input type="text" class="form-control calendar simplebox"></div> <div class="col-lg-6"><label>Departure</label><input type="text" class="form-control calendar simplebox" ></div> </div> </div> <div class="form-group"> <button type="submit" class="btn btn-default simplebox search-btn">Search</button> </div> </form> </div> <div class="rowsl"><h3>Filter by</h3></div> <div class="Hotel-filters"> <p>Star Rating</p> <ul> <li><a href=""><img src="assets/icons/rate-5.png" width="90" height="15"><span>5 Stars</span></a></li> <li><a href=""><img src="assets/icons/rate-4.png" width="90" height="15"><span>4 Stars</span></a></li> <li><a href=""><img src="assets/icons/rate-3.png" width="90" height="15"><span>3 Stars</span></a></li> <li><a href=""><img src="assets/icons/rate-2.png" width="90" height="15"><span>2 Stars</span></a></li> </ul> </div> <div class="Hotel-filters"> <p>Accomadation Type</p> <ul> <li><a href="">All</a></li> <li><a href="">Resort Islands</a></li> <li><a href="">City Hotels</a></li> <li><a href="">Liveaboards</a></li> <li><a href="">Honeymoon</a></li> <li><a href="">Family</a></li> <li><a href="">Relax</a></li> </ul> </div> </div> <div class="col-xs-12 col-sm-9 iiner"> <div class="rowsl"><h3>All Hotels</h3><p>Explore our unbeatable offers.</p></div> <div class="rows clearfix" > <div class="col-6 col-sm-6 col-lg-4 s1"></div> <div class="col-6 col-sm-6 col-lg-4 s2"></div> <div class="col-6 col-sm-6 col-lg-4 s1"></div> <div class="col-6 col-sm-6 col-lg-4 s1"></div> <div class="col-6 col-sm-6 col-lg-4 s2"></div> <div class="col-6 col-sm-6 col-lg-4 s1"></div> <div class="col-6 col-sm-6 col-lg-4 s1"></div> <div class="col-6 col-sm-6 col-lg-4 s2"></div> <div class="col-6 col-sm-6 col-lg-4 s1"></div> <div class="col-6 col-sm-6 col-lg-4 s1"></div> <div class="col-6 col-sm-6 col-lg-4 s2"></div> <div class="col-6 col-sm-6 col-lg-4 s1"></div> </div><!-- /row --> <div class="rowsl"><h3>Budget Holidays</h3><p>If you have a budget this is for you.</p></div> <div class="rows clearfix"> <div class="col-6 col-sm-6 col-lg-4 s1"></div> <div class="col-6 col-sm-6 col-lg-4 s2"></div> <div class="col-6 col-sm-6 col-lg-4 s1"></div> </div><!-- /row --> </div><!-- /iiner --> </div><!-- /off --> </div><!-- /container --> <div class="footer"> <div class="container"> <div class="row"> <div class="col-md-3"><img src="" width="291" height="88"></div> <div class="col-md-3"> <h4>Contact Info</h4> Tripper Travels Pvt Ltd <br> 20934, Nikagas Magu, Male', Maldives <br> E info@xxxxxxxxx.com T 00 960 000 00 00 F 00 960 000 00 00 </div> <div class="col-md-2"> <h4>Customer Support</h4> <ul> <li><a href="">FAQ</a></li> <li><a href="">Payment Options</a></li> <li><a href="">Booking tips</a></li> <li><a href="">Information</a></li> </ul> </div> <div class="col-md-3 newsletter"> <h4>Get Our Newsletter</h4> <form> <p>Signup for our newsletter</p> <div class="input-group"> <input type="text" class="form-control " placeholder="Your email"> <span class="input-group-btn"> <button type="submit" class="btn btn-search btn-stylr">SIGNUP</button> </span> </div> </form> </div> </div> </div> </div>
body { font-family: Lato; font-weight: 300; font-size: 16px; color: #555; -webkit-font-smoothing: antialiased; -webkit-overflow-scrolling: touch } @font-face{font-family:'brandon_grotesquebold'; src:url("../fonts/brandon/brandon_bld-webfont.eot"); src:url("../fonts/brandon/brandon_bld-webfont.eot?#iefix") format("embedded-opentype"),url("../fonts/brandon/brandon_bld-webfont.woff") format("woff"),url("../fonts/brandon/brandon_bld-webfont.ttf") format("truetype"),url("../fonts/brandon/brandon_bld-webfont.svg#brandon_grotesquebold") format("svg");font-weight:normal;font-style:normal} h1, h2, h3, h4, h5, h6 { font-family: Raleway; font-weight: 300; color: #333 } .container { padding:0; } .main-in { width:990px;} .top-headings { } .top-headings h4 {font-family:"brandon_grotesquebold","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1em;text-transform:uppercase; font-weight:normal; font-size:1.3em; color:#384653; margin:20px 0 0 0; } .top-headings p { font-style:italic; color:#666; margin:0 0 25px 0; } .carousel { margin:0 0 0px 0; } .carousel .sliderr { height:400px;} .carousel .carousel-caption { top:15px;} .carousel .carousel-caption h1 {font-family:"brandon_grotesquebold","Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase; border-bottom:3px solid #FFF; padding:8px; font-size:2.8em;} .carousel .carousel-caption p {color:#FFF; font-family:Georgia, "Times New Roman", Times, serif; font-size:13px; padding:12px; font-style:italic;} .special-offers { margin-bottom:20px;} .special-offers .offer-box { height:200px; position:relative;} .special-offers .offer-box .offer-details { position:absolute; bottom:30px; height:50px; left:0; font-size:17px; padding:8px;text-align:center; width:100%;} .special-offers .offer-box .offer-details a { border-bottom:3px solid #FFF; color:#FFF; text-decoration:none; font-family:"brandon_grotesquebold","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1em;text-transform:uppercase;margin:0 0 0.5em;font-weight:normal; } .special-offers .offer-box .offer-details a:hover {background:#00B285; padding:8px 8px 0 8px;} .special-offers .offer-box .offer-details p { color:#FFF; font-family:Georgia, "Times New Roman", Times, serif; font-size:13px; padding:8px; font-style:italic;} .booking-ribbon { background:#FFF url(../assets/img/booker-bg.png); width:100%; } .booking-ribbon {padding:15px 8px 25px 8px; z-index:1000; font-family:"brandon_grotesquebold","Helvetica Neue",Helvetica,Arial,sans-serif;} .booking-ribbon h3 { font-size:1.1em; margin:0 0 5px 0; padding:0;color:#FFF; font-weight:normal; text-transform:uppercase;} .booking-ribbon .form-inline label { font-size:0.7em; font-weight:normal; color:#333; font-weight:normal;text-transform:uppercase; padding:0; margin:0;} .booking-ribbon .sm { border-right:1px solid #999;} .calendar { background:url(../assets/ui_cal_icon.gif) #FFF no-repeat right; } .simplebox{outline: none;box-shadow:none !important; border-radius:0;} .featured {} .featured .boxsers { height:200px; background:#666; margin:0; position:relative;} .featured .boxsers .details { position:absolute; bottom:0; width:100%; left:0; padding:10px; text-align:center;} .featured .boxsers .details a {border-bottom:2px solid #FFF; color:#FFF; text-decoration:none; font-family:"brandon_grotesquebold","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:0.9em;text-transform:uppercase;margin:0 0 0.5em;font-weight:normal; background:#333; padding:8px 8px 0 8px;} .featured .boxsers .details p { color:#FFF; font-family:Georgia, "Times New Roman", Times, serif; font-size:13px; padding:8px; font-style:italic;} .news {} .news ul { margin:0; padding:0;} .news ul li { list-style:none; margin:10px 0 15px 0; border-bottom:1px solid #eee; padding:12px 0 12px 10px;} .news ul li a { color:#00B285; text-decoration:none;} .sub-main-box {} .sub-main-box .sm-5 {} .sub-main-box .sm-5 .sl { height:100px; background:#666;} .navver { padding:35px 0 20px 0;} .navver ul { margin:0; padding:0;} .navver ul li { list-style:none; display:inline; margin:0 10px 0 10px; text-align:right;} .navver ul li a { text-decoration:none; color:#00B285;} .footer { background:#333; margin:60px 0 0 0; color:#FFF; font-size:12px; } .footer .container { padding:20px 0 40px 10px;} .footer h4 { color:#FF9900;} .footer ul { margin:0; padding:0;} .footer ul li { list-style:none; } .footer ul li a { text-decoration:none; color:#FFF;} .navbar { margin:0; padding:0; height:10px; background:#FFF;} .navbar ul li a { font-size:0.9em; font-weight:normal; } .top-ribbon { margin-bottom:20px;font-size:0.8em; border-bottom:1px solid #EEE; } .top-ribbon li { border-right:1px solid #EEE;} .top-ribbon li a { padding:8px; } .middle-section { margin-top:30px;} .two-divider .thumbnail .placer { width:100%; height:120px; position:relative;} .two-divider .thumbnail .plus { position:absolute; right:0; bottom:0; background:#54667A; color:#FFF; padding:1px 8px 1px 8px; font-size:1.5em;} .two-divider .thumbnail { border: 0 none;} .two-divider .caption { background:#F4F5F9; position:relative;} .two-divider .caption h3 {font-family:"brandon_grotesquebold","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:normal; font-size:1em; text-transform:uppercase; color:#384653;} .two-divider .caption p { font-size:0.8em; margin:5px 0; color:#666;} .two-divider .caption .price { font-size:1.2em; color:#D63343;margin:5px 0;} .two-divider .caption .price span { font-size:0.7em;} .two-divider .caption .more-but { border-top:1px solid #EEE; padding:10px;} .two-divider .caption .more-but a { background:#D63343; padding:8px; color:#FFF; font-size:0.6em; right:0; bottom:0; position:absolute;} .featured-main .thumbnail .placer { width:100%; height:170px; position:relative;} .featured-main .thumbnail .plus { position:absolute; right:0; bottom:0; background:#54667A; color:#FFF; padding:1px 8px 1px 8px; font-size:2em;} .featured-main .caption { background:#F4F5F9; position:relative;} .featured-main .caption h3 {font-family:"brandon_grotesquebold","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:normal; font-size:1.1em; text-transform:uppercase; color:#384653;} .featured-main .caption p { font-size:0.9em; margin:5px 0; color:#666;} .featured-main .caption .price { font-size:1.5em; color:#D63343;margin:5px 0;} .featured-main .caption .price span { font-size:0.7em;} .featured-main .caption .more-but { border-top:1px solid #EEE; padding:10px;} .featured-main .caption .more-but a { background:#D63343; padding:8px; color:#FFF; font-size:0.7em; right:0; bottom:0; position:absolute;} .featured-main .thumbnail { border: 0 none;} .featured-main .col-lg-4 { margin:0; background:#099;} .right-lists {} .right-lists .placer { width:100%; height:60px; position:relative;} .right-lists .plus { position:absolute; right:0; bottom:0; background:#54667A; color:#FFF; padding:1px 8px 1px 8px; font-size:1.5em;} .right-lists .row { margin-bottom:10px; border-bottom:1px solid #EEE;} .right-lists h3 {font-family:"brandon_grotesquebold","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:normal; font-size:0.9em; text-transform:uppercase; color:#384653;} .right-lists p { font-size:0.8em; margin:5px 0; color:#666;} .more { margin-top:20px; margin-bottom:50px;} .more h1 { font-size:1em; text-align:center; border-top:1px dashed #EEE; border-bottom:1px dashed #EEE; padding:8px 0px;} .more h1 a { color:#999; text-decoration:none; font-weight:normal;} .more h1 a span { color:#333;} .ds { background-image:url(../assets/img/f3.jpg); background-size: 100% } .ds h1 { font-size: 3.25em; color:#FFF;font-family:"brandon_grotesquebold","Helvetica Neue",Helvetica,Arial,sans-serif; text-transform:uppercase; text-align:center; border-bottom:2px solid #FFF; padding:20px 0; } #homeThumbs .thumbnails > li { float: left; margin-bottom: 5px; margin-left: 0; margin-right: 5px; } #homeThumbs .col-md-1 { width: 50px; height:50px; background:#000; } #homeThumbs .thumbnails { list-style: none outside none; margin-left: 0px; } .rowsl { margin-top:30px;} .rowsl h3 {} .hotel-search { background:#C33; height:50px;} .hotel-detail-name { border-bottom:1px solid #EEE;text-align:center;} .details .panel { border:0;} .details .panel-heading { background:#FFF; } .details .panel-heading h4 { font-size:21px;} .details .panel-heading .panel-title a { color:#C36;} .details .panel-heading .panel-title a:hover { text-decoration:none;} .Hotel-filters { margin-bottom:1px; border-bottom:1px solid #EEE; padding:15px 0;} .Hotel-filters p { border-bottom:1px solid #EEE; padding:0 0 5px 0;} .Hotel-filters ul { margin:0; padding:0;} .Hotel-filters li { list-style:none; padding:2px 0;} .Hotel-filters li a { text-decoration:none; color:#666; font-size:13px;} .Hotel-filters li img { margin-right:20%;} .side-book {} .side-book .booker-form {} .side-book label { font-weight:normal; font-size:14px; color:#999;} .side-book .search-btn { background:#F90; color:#FFF; border:0; margin:10px 0 0 0;} .all-booker { background:#F90; text-align:center; color:#FFF; padding:10px 0; } .all-booker h3 { color:#FFF;} .all-booker p { padding:0; margin:0;} .all-booker-bg { background:url(../assets/icons/allbooker-bottom-arrow.png) no-repeat center top; height:8px; margin:0 0 20px 0; } .sm-3 { background:#033; width:100%; height:100px;} .s1{ background:#333; height:200px; border:2px solid #FFF;} .s2{ background:#444; height:200px; border:2px solid #FFF;} .sm1{ background:#333; height:100px; border:2px solid #FFF;} .sm2{ background:#444; height:100px; border:2px solid #FFF;} .s3r1 {background:#CCF; height:200px; padding-left:0;} .s3r2 {background:#CCC; height:200px; padding-left:0;} .s3r3 {background:#CC9; height:200px; padding-left:0;}

Related: See More


Questions / Comments: