HTML code
This is the html code used to create this bootstrap snippet, You can copy and paste the following html code inside a page with bootstrap 4.1.1 included, to get the result that you can see in the preview selection
Download<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-md-8 left-side-sidebar">
<div class="row text-center">
<div class="col-md-8 offset-md-2">
<h3>Not happy with the results?</h3>
<p class="body-text-3x">Type your search again</p>
<div class="small-search-wrap">
<div class="search-form">
<form action="#">
<div class="form-group">
<input type="text" value="test" placeholder="Search something here" maxlength="100" class="form-control" name="name" id="name">
</div>
</form>
</div>
</div>
<hr class="invisible small">
</div>
<div class="col-md-12">
<div class="v-heading-v2">
<h4 class="v-search-result-count">About 18,580 results</h4>
</div>
</div>
</div>
<div class="clearfix mt-40">
<ul class="xsearch-items">
<li class="search-item">
<div class="search-item-img">
<a href="#">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" width="70" height="70">
</a>
</div>
<div class="search-item-content">
<h3 class="search-item-caption"><a href="#">10 tips for creating a stunning web presentation</a></h3>
<div class="search-item-meta mb-15">
<ul class="list-inline">
<li class="time">November 10, 2017</li>
<li><a href="#">0 Comments</a></li>
<li class="pr-0">in</li>
<li class="pl-0"><a href="#">Design</a></li>
</ul>
</div>
<div>
Illustration by Julian Burford. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam massa quis mauris sollicitudin commodo venenatis ligula commodo. Sed blandit convallis dignissim. Pellentesque pharetra velit eu velit elementum et convallis erat vulputate.
</div>
</div>
</li>
<li class="search-item">
<div class="search-item-img">
<a href="#">
<img itemprop="image" src="https://bootdey.com/img/Content/avatar/avatar3.png" width="70" height="70">
</a>
</div>
<div class="search-item-content">
<h3 class="search-item-caption"><a href="#">Vertex makes it easy to sell your product</a></h3>
<div class="search-item-meta mb-15">
<ul class="list-inline">
<li class="time">October 10, 2017</li>
<li><a href="#">0 Comments</a></li>
<li class="pr-0">in</li>
<li class="pl-0"><a href="#">Design</a>, <a href="#">Photoshop</a></li>
</ul>
</div>
<div>
Illustration by Julian Burford. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam massa quis mauris sollicitudin commodo venenatis ligula commodo. Sed blandit convallis dignissim. Pellentesque pharetra velit eu velit elementum et convallis erat vulputate.
</div>
</div>
</li>
<li class="search-item">
<div class="search-item-img">
<a href="#">
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" width="70" height="70">
</a>
</div>
<div class="search-item-content">
<h3 class="search-item-caption"><a href="#">5 questions you must ask at the start of every project</a></h3>
<div class="search-item-meta mb-15">
<ul class="list-inline">
<li class="time">April 15, 2017</li>
<li><a href="#">40 Comments</a></li>
<li class="pr-0">in</li>
<li class="pl-0"><a href="#">Design</a>, <a href="#">Photoshop</a></li>
</ul>
</div>
<div>
Illustration by Julian Burford. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam massa quis mauris sollicitudin commodo venenatis ligula commodo. Sed blandit convallis dignissim. Pellentesque pharetra velit eu velit elementum et convallis erat vulputate. Sed in nulla ut elit mollis posuere.
</div>
</div>
</li>
<li class="search-item">
<div class="search-item-img">
<a href="#">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" width="70" height="70">
</a>
</div>
<div class="search-item-content">
<h3 class="search-item-caption"><a href="#">How to make selling and beautifull website</a></h3>
<div class="search-item-meta mb-15">
<ul class="list-inline">
<li class="time">March 22, 2017</li>
<li><a href="#">0 Comments</a></li>
<li class="pr-0">in</li>
<li class="pl-0"><a href="#">PHP</a>, <a href="#">Wordpress</a></li>
</ul>
</div>
<div>
Illustration by Julian Burford. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam massa quis mauris sollicitudin commodo venenatis ligula commodo. Sed blandit convallis dignissim. Pellentesque pharetra velit eu velit elementum et convallis erat vulputate.
</div>
</div>
</li>
<li class="search-item">
<div class="search-item-img">
<a href="#">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" width="70" height="70">
</a>
</div>
<div class="search-item-content">
<h3 class="search-item-caption"><a href="#">Secrets of better SEO for your website</a></h3>
<div class="search-item-meta mb-15">
<ul class="list-inline">
<li class="time">February 19, 2017</li>
<li><a href="#">0 Comments</a></li>
<li class="pr-0">in</li>
<li class="pl-0"><a href="#">SEO</a>, <a href="#">Wordpress</a>, <a href="#">Mobile</a></li>
</ul>
</div>
<div>
Illustration by Julian Burford. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam massa quis mauris sollicitudin commodo venenatis ligula commodo. Sed blandit convallis dignissim. Pellentesque pharetra velit eu velit elementum et convallis erat vulputate. Sed in nulla ut elit mollis posuere.
</div>
</div>
</li>
<li class="search-item">
<div class="search-item-img">
<a href="#">
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" width="70" height="70">
</a>
</div>
<div class="search-item-content">
<h3 class="search-item-caption"><a href="#">Lorem Ipsum Dolor Sit Amet</a></h3>
<div class="search-item-meta mb-15">
<ul class="list-inline">
<li class="time">February 25, 2017</li>
<li><a href="#">5 Comments</a></li>
<li class="pr-0">in</li>
<li class="pl-0"><a href="#">Design</a>, <a href="#">Photoshop</a></li>
</ul>
</div>
<div>
Illustration by Julian Burford. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam massa quis mauris sollicitudin commodo venenatis ligula commodo. Sed blandit convallis dignissim. Pellentesque pharetra velit eu velit elementum et convallis erat vulputate. Sed in nulla ut elit mollis posuere.
</div>
</div>
</li>
</ul>
</div>
<div class="row">
<div class="col-md-6">
<div class="clearfix pl-90">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#"><i class="fa fa-angle-double-left"></i> </a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">..</a></li>
<li class="page-item"><a class="page-link" href="#">20</a></li>
<li class="page-item"><a class="page-link" href="#"><i class="fa fa-angle-double-right"></i> </a></li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="clearfix pull-right">
<span class="o-7">Page 1 of 8</span>
</div>
</div>
</div>
</div>
</div>
</div>CSS code
This is the css code used to create this bootstrap snippet, You can copy and paste the following css code inside a page with bootstrap 4.1.1 included, to get the result that you can see in the preview selection
Downloadbody{
background:#f2f3f8;
margin-top:20px;
}
.page.has-sidebar.bordered .page-header {
margin-bottom: 0;
}
.page.has-sidebar.bordered .page-inner {
padding-bottom: 0;
padding-top: 0px;
}
.page.has-sidebar.bordered .left-side-sidebar {
padding-top: 50px;
padding-bottom: 50px;
}
.page.has-sidebar.bordered .right-side-sidebar {
padding-top: 50px;
padding-bottom: 50px;
}
.has-sidebar.bordered.has-right-sidebar .left-side-sidebar {
border-right: 1px solid rgba(0,0,0,0.1) !important;
box-shadow: 1px 0px 0px 0px rgba(255,255,255,0.715) !important;
padding-right: 45px;
}
.has-sidebar.bordered.has-right-sidebar .right-side-sidebar {
padding-left: 40px;
}
.has-sidebar.bordered.has-left-sidebar .right-side-sidebar {
padding-left: 45px;
}
.has-sidebar.bordered.has-left-sidebar .left-side-sidebar {
border-right: 1px solid rgba(0,0,0,0.1) !important;
box-shadow: 1px 0px 0px 0px rgba(255,255,255,0.715) !important;
padding-right: 40px;
}
.page.has-sidebar .left-side-sidebar {
padding-top: 50px;
padding-bottom: 50px;
}
.page.has-sidebar .page-inner {
padding-bottom: 0;
padding-top: 0px;
}
.page.has-sidebar .right-side-sidebar {
padding-top: 50px;
padding-bottom: 50px;
}
/* --------------------------------------------
SEARCH LIST
-------------------------------------------- */
.xsearch-items {
padding-left: 0px;
}
.search-item-img {
float: left;
position: relative;
}
.search-item-img img, .search-item-img .img-holder {
height: 70px;
width: 70px;
display: block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(50,50,93,.15), 0 1px 0 rgba(0,0,0,.02);
border: 4px solid white;
}
.search-item-img .img-holder {
border: 1px solid #e3e3e3;
line-height: 20px;
background: #f7f7f7;
border-color: rgba(207,215,223,.25);
}
.search-item-img .img-holder i {
display: inline-block;
padding: 28px 20px;
font-size: 28px;
opacity: 0.5;
}
.search-item-content {
margin-left: 100px;
padding-bottom: 35px;
margin-bottom: 20px;
/*border-bottom: 1px solid rgb(231, 231, 231);*/
}
.search-item-content.no-excerpt h3 {
margin-top: 8px;
}
.search-item-content .search-item-meta {
display: block;
margin-bottom: 10px;
}
.search-item-meta-down a,
.search-item-meta a {
font-size: 11px;
text-transform: uppercase;
}
.xsearch-items a:hover {
border-bottom-width: 1px;
border-bottom-style: dotted;
}
.search-item-content .time {
color: #999;
font-size: 11px;
text-transform: uppercase;
}
.search-item-content time,
.search-item-content span {
color: #999999;
}
.xsearch-items h3.search-item-caption {
margin-bottom: 2px;
font-weight: 600;
font-size: 20px;
}
.xsearch-items .search-item-meta-down {
margin-top: 5px;
color: #999;
font-size: 12px;
}
.xsearch-items .star-vote li {
padding: 0;
font-size: 14px;
}
.xsearch-result-count {
color: #999;
margin-bottom: 30px;
}
ul.xsearch-items-2 {
padding-left: 0;
margin-left: 0;
}
.xsearch-items-2 li {
list-style: none;
}
.xsearch-info-meta:before, .xsearch-info-meta:after {
content: "";
display: table;
}
.xsearch-info-meta:after {
clear: both;
}
.xsearch-info-meta {
padding: 0;
margin: 0;
list-style-type: none;
margin-bottom: 5px;
font-size: 12px;
opacity: 0.7;
}
.xsearch-info-meta-item {
float: left;
margin-right: 10px;
}
.xsearch-item-title h3,
.xsearch-item-title h4 {
margin-bottom: 5px;
}
.xsearch-desc {
margin-bottom: 2px;
}
.search-item-icon {
padding-right: 3px;
}
nav.xsearch-navbar {
padding-left: 0;
}
nav.xsearch-navbar.navbar-light .navbar-nav .active > .nav-link {
border-bottom-width: 2px;
border-bottom-style: solid;
padding-bottom: 12px;
}
.xsearch-item .xsearch-item-title strong {
font-weight: 600;
}
ul.xsearch-items-2 .xsearch-item {
margin-bottom: 40px;
}
.xsearch-item .xsearch-desc strong {
color: #111;
}
.search-result-wrap .search-result-item {
padding-bottom: 25px;
padding-top: 25px;
border-bottom: 1px solid rgba(207,215,223,.25);
}
.search-result-wrap .search-result-item .title h4,
.search-result-wrap .search-result-item .title h3 {
margin-bottom: 5px;
}
.search-result-item-meta {
font-size: 14px;
margin-bottom: 10px;
margin-left: 25px;
}
.search-result-item-meta li {
color: #999;
margin-right: 5px;
}
.search-result-item-meta li i {
margin-right: 4px;
}
.search-result-item-meta li a {
/*border-bottom:1px dotted rgba(207,215,223,.25);
padding-bottom:2px;*/
color: #1a0dab;
}
.search-result-item-link,
.search-result-item-excerpt,
.search-result-item-meta {
margin-left: 25px;
}
.search-result-item-excerpt strong {
color: #444;
font-weight: 600;
}
.search-result-item-excerpt {
margin-bottom: 5px;
}
.search-result-item-meta li:first-child {
margin-left: 0;
padding-left: 0;
}
ul {
list-style-type: none;
}
About this bootstrap example/template
This example/template, bs4 simple search result, was published on Mar 2nd 2019, 11:40 by Bootdey Admin and it is free.
We hope you will enjoy this awesome snippet and stay tuned for the latest updates, bootdey snippets are already used in thousands of blogs, websites and projects. We believe it will save your precious time and gives trendy look to your next web project.
We always try to offer the best beautiful and responsive source of Bootstrap code examples and components.
This code example currectly have 10.6K views, Using this bootstrap snippet you have the following benefits:
Bootstrap 4.1.1
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css'>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js'></script>
This code example is based on bootstrap 4.1.1 and the grid system of this framework
Responsive
Based on bootstrap framework makes all the layouts perfectly responsive for all devices
Crossbrowser compatibility
Tested on all major browsers, it works smoothly on all of them
semantic html 5
Built on html / css3 the code quality is really amazing
Simple Integration
This code example can be simply integrated on existing sites and new ones too, all you need to do is copy the code and start working