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
660
 
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"> <div class="tinkersale-navbar-header"> <button class="btn navbar-toggle" data-toggle="collapse" data-target="#my"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <h4><a class="tinkersale-navbar-brand" href="#">Tinkersale</a></h4> </div> </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" type="submit"> <i class="glyphicon glyphicon-search"></i> </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-6"> <p class="font-weight-bold fnt-mighter">Number of results found for</p> </div> <div class="col-md-2"> <select class="custom-select"> <option selected>Popular</option> <option value="1">A-Z</option> <option value="2">Recent</option> <option value="3">Ratings</option> </select> </div> </div> <div class="row"> <div class="col-sm-8"> <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="eachPopularTitle"> <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 class="glyphicon glyphicon-star-empty"></span> <span class="fnt-brighter"> 0 reviews</span> </li> </ul> <p class="fnt-smaller fnt-brighter fnt-arial text-left">Handlooms</p> <ul class="list-inline mrg-0 btm-mrg-10 clr-535353"> <li> <a href="#" target="_parent">Email</a></li> <li > | </li> <li> <a href="#" target="_parent">Website</a></li> </ul> </div> <div class="col-sm-4"> <p class="text-center">OPEN-until 8:00pm</p> </div> <div class="col-sm-4 eachPopularRight text-right"> <a class="businessContact fnt-mighter" href="tel:9666675463"><strong>+91 9666675463</strong></a> <address class="businessArea fnt-mighter"><strong>Boduppal</strong> <br>Hyderabad - 500039</address> <div class="directionsLocationsBlock"><a target="_blank" rel="nofollow" href="http://www.google.com/maps/place/17.4139,78.5783">Directions</a> </div> </div> </div> </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="eachPopularTitle"> <a href="#" target="_parent">Arvind 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 class="glyphicon glyphicon-star-empty"></span> <span class="fnt-brighter"> 0 reviews</span> </li> </ul> <p class="fnt-smaller fnt-brighter fnt-arial text-left">Handlooms</p> <ul class="list-inline mrg-0 btm-mrg-10 clr-535353"> <li> <a href="#" target="_parent">Email</a></li> <li > | </li> <li> <a href="#" target="_parent">Website</a></li> </ul> </div> <div class="col-sm-4"> <p class="text-center">OPEN-until 8:00pm</p> </div> <div class="col-sm-4 eachPopularRight text-right"> <a class="businessContact fnt-mighter" href="tel:9666675463"><strong>+91 9666675463</strong></a> <address class="businessArea fnt-mighter"><strong>Boduppal</strong> <br>Hyderabad - 500039</address> <div class="directionsLocationsBlock"><a target="_blank" rel="nofollow" href="http://www.google.com/maps/place/17.4139,78.5783">Directions</a> </div> </div> </div> </div> </div> </div> </div> <div class="col-xs-8 col-sm-4 sidebar-offcanvas" id="sidebar"> <div class="list-group"> <div class="brdr bgc-fff pad-10 box-shad btm-mrg-20 property-listing text-center"> <strong class="fnt-mighter">Need help in choosing business?</strong> <p class="fnt-mighter">Let tinkersale help u in that</p> <input type='button' class='btn-color' name='next' value='Get me best prices' /> </div> <a href="#" class="list-group-item active">Reviews</a> <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="https://cdn3.f-cdn.com/files/download/33774556/friendly+face.jpg"</a> <div class="media-body fnt-smaller"> <a href="#" target="_parent"></a> <h3 class="eachPopularTitle"> <a href="#" target="_parent">Rajiv</a></h3> <div class="row"> <div class="col-sm-9"> <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 class="glyphicon glyphicon-star-empty"></span> <span class="fnt-lighter">date and time</span> </li> </ul> </div> </div> </div> </div> <div class="col-sm-24"> <ul class="list-inline mrg-0 btm-mrg-20 clr-535353 "> <li> <a href="#" target="_parent">White House Apparels Pvt Ltd</a></li> <p>www.tendertm.com is a leading procurement information & service provider. TenderTm is changing the procurement & marketing strategy in a great manner. TenderTm has the necessary technical as well as business skills to handle and provide large volume of Indian procurement information on a real time basis. Tendertm collects public procurement information and provides the information to top class companies</p> </ul> </div> </div> </div> </div> </div> </div>
/**** BASE ****/ body { color: #888; } a { color: #0e85d9; text-decoration: none; outline: none; } .eachPopularTitle { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; font-size: 18px; padding-right: 55px; vertical-align: top; margin-top: -2px; } .eachPopularRight { display: block; font-size: 12px; } /**** LAYOUT ****/ .list-inline>li { padding: 0 10px 0 0; } .container-pad { padding: 10px 5px; } /**** 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-mighter{ color: #000; font-size: 15px; } .fnt-brighter { color: #00f; } /* Padding - Margins */ .pad-10 { padding: 10px!important; } .mrg-0 { margin: 0!important; } .btm-mrg-10 { margin-bottom: 10px!important; } .btm-mrg-20 { margin-bottom: 20px!important; } /* Color */ .clr-535353 { color: #000; } /**** MEDIA QUERIES ****/ @media only screen and (max-width: 991px) { #property-listings .property-listing { padding: 5px!important; } #property-listings .property-listing a { margin: 0; } #property-listings .property-listing .media-body { padding: 10px; } businessContact { right: 15px; } } .text-center{ font-weight: 400; color: #5aa925; } @media only screen and (min-width: 992px) { #property-listings .property-listing img { max-width: 190px; width: 100%; height: auto; } } #tinkersale-navbar { background-color: #ffcf05; 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: #000; border: 1px solid #000; border-radius: 0 10px 10px 0; color: #fff; padding: 11px 16px ; height: 46px; cursor: pointer; } .btn-color{ background-color: #ffcf05; border: 1px solid #ffcf05; color: #000; height: 46px; padding: 11px 16px ; } .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
Free Template
Navbar With Icons
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76