Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"lastone"
Bootstrap 4.0.0 Snippet by
rjnish
4.0.0
Preview
HTML
CSS
View Full Screen
Forked from
Fork
Fork this
Parent
325
 
0 Fav
Post to Facebook
Tweet this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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 ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div id="tinkersale-navbar"> <div class="container"> <div class="row"> <div class="col-sm-2"> <h2 style="margin:0px;"><span class="largenav">Tinkersale</span></h2> </div> <div class="tinkersale-navbar-search smallsearch col-sm-6 col-xs-9"> <input class="tinkersale-navbar-input col-xs-7" type="" placeholder="Search local business in india" name=""> <input name="searchinput" type="text" placeholder="Please type a location" class="tinkersale-navbar-search-input col-xs-4"> <button class="tinkersale-navbar-button col-xs-1"> <svg width="15px" height="15px"> <path d="M11.618 9.897l4.224 4.212c.092.09.1.23.02.312l-1.464 1.46c-.08.08-.222.072-.314-.02L9.868 11.66M6.486 10.9c-2.42 0-4.38-1.955-4.38-4.367 0-2.413 1.96-4.37 4.38-4.37s4.38 1.957 4.38 4.37c0 2.412-1.96 4.368-4.38 4.368m0-10.834C2.904.066 0 2.96 0 6.533 0 10.105 2.904 13 6.486 13s6.487-2.895 6.487-6.467c0-3.572-2.905-6.467-6.487-6.467 "></path> </svg> </button> </div> <div id="tinkersale-navbar" class="collapse navbar-collapse col-sm-4"> <ul class="nav tinkersale-navbar-nav pull-right"> <li><a href="#">Add Bussiness</a></li> <li><a href="#">Categories</a></li> <li><a href="#">Myaccount</a></li> </ul> <div> </div> </div> </div> </div> <div class="container-fluid" style="background-color:#e8e8e8"> <div class="container container-pad" id="property-listings"> <div class="row"> <div class="col-sm-7 "> <p class="fnt-brighter">Number of results found for</p> </div> <div class=" col-xs-3"> <select id="" name="search" class="form-control"> <option value="1">Popular</option> <option value="2">A-Z</option> <option value="3">By Rating</option> </select> </div> </div> <div class="row"> <div class="col-sm-10"> <!-- Begin Listing: 609 W GRAVERS LN--> <div class="brdr bgc-fff pad-10 box-shad btm-mrg-20 property-listing"> <div class="media"> <a class="pull-left" href="#" target="_parent"> <img alt="image" class="img-responsive" src="http://images.prd.mris.com/image/V2/1/Yu59d899Ocpyr_RnF0-8qNJX1oYibjwp9TiLy-bZvU9vRJ2iC1zSQgFwW-fTCs6tVkKrj99s7FFm5Ygwl88xIA.jpg"></a> <div class="clearfix visible-sm"></div> <div class="media-body fnt-smaller"> <a href="#" target="_parent"></a> <h3 class="media-heading"> <a href="#" target="_parent">Upendra handloom textile </a></h3> <div class="row"> <div class="col-sm-4"> <ul class="list-inline mrg-0 btm-mrg-10 clr-535353 "> <li> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> <span><i class="glyphicon glyphicon-star-empty "></i> 0reviews</span> </li> </ul> </div> <div class="col-sm-4"> <p class="text-center fnt-lighter">OPEN-until 8:00pm</p> </div> </div> <span class="fnt-smaller fnt-lighter fnt-arial">Courtesy of HS Fox & Roach-Chestnut Hill Evergreen</span> </div> </div> </div> <div class="brdr bgc-fff pad-10 box-shad btm-mrg-20 property-listing"> <div class="media"> <a class="pull-left" href="#" target="_parent"> <img alt="image" class="img-responsive" src="http://images.prd.mris.com/image/V2/1/Yu59d899Ocpyr_RnF0-8qNJX1oYibjwp9TiLy-bZvU9vRJ2iC1zSQgFwW-fTCs6tVkKrj99s7FFm5Ygwl88xIA.jpg"></a> <div class="clearfix visible-sm"></div> <div class="media-body fnt-smaller"> <a href="#" target="_parent"></a> <h3 class="media-heading"> <a href="#" target="_parent">Upendra handloom textile </a></h3> <div class="row"> <div class="col-sm-4"> <ul class="list-inline mrg-0 btm-mrg-10 clr-535353 "> <li> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> <span><i class="glyphicon glyphicon-star-empty "></i> 0reviews</span> </li> </ul> </div> <div class="col-sm-4"> <p class="text-center fnt-lighter">OPEN-until 8:00pm</p> </div> <div class="col-sm-4"> <h4 class="text-center">+91 966667546</h4> </div> </div> </div> </div> </div>
/**** BASE ****/ body { color: #e8e8e8; } a { color: #03a1d1; text-decoration: none!important; } /**** LAYOUT ****/ .list-inline>li { padding: 0 20px 0; } .container-pad { padding: 10px 15px; } /**** MODULE ****/ .bgc-fff { background-color: #fff!important; } .box-shad { -webkit-box-shadow: 1px 1px 0 rgba(0,0,0,.2); box-shadow: 1px 1px 0 rgba(0,0,0,.2); } .brdr { border: 1px solid #ededed; } /* Font changes */ .fnt-smaller { font-size: .9em; } .fnt-lighter { color: #f00; } .fnt-brighter { color: #000; } /* Padding - Margins */ .pad-10 { padding: 10px!important; } .mrg-0 { margin: 0!important; } .btm-mrg-10 { margin-bottom: 0px!important; } .btm-mrg-20 { margin-bottom: 20px!important; } /* Color */ .clr-535353 { color: #535353; } /**** MEDIA QUERIES ****/ @media only screen and (max-width: 991px) { #property-listings .property-listing { padding: 10px!important; } #property-listings .property-listing a { margin: 0; } #property-listings .property-listing .media-body { padding: 10px; } } @media only screen and (min-width: 992px) { #property-listings .property-listing img { max-width: 180px; } } #tinkersale-navbar { background-color: #FFFF00; color: #FFFFFF; } .row { padding-top: 10px; padding-bottom: 10px; } .tinkersale-navbar-input { padding: 11px 16px; border-radius: 10px 0 0 2px; border: 1 none; outline: 1 none; font-size: 15px; } .tinkersale-navbar-search-input { padding: 11px 16px; border-radius: 1px 0 0 2px; border: 1 none; outline: 1 none; font-size: 15px; } .tinkersale-navbar-button { background-color: #00f; border: 1px solid #00f; border-radius: 0 10px 10px 0; color: #0ff; padding: 11px 16px ; height: 46px; cursor: pointer; } .largenav { display: none; } .smallsearch{ margin-left: 15px; margin-top: 15px; } @media screen and (min-width: 768px) { .largenav { display: block; } .smallsearch{ margin: 0px; } }
Related:
See More
Template
Paper Dashboard 2 PRO
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76