HTML code
Clean, semantic HTML that powers this Bootstrap 4.1.1 snippet. Copy and paste it into your page (with Bootstrap loaded) to reproduce the exact layout shown in the preview.
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
Scoped CSS that styles the component. Paste it after Bootstrap 4.1.1 to keep the design, spacing, and responsiveness consistent.
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;
}
FAQ
How do I use this snippet?
Include Bootstrap 4.1.1, paste the HTML, add the CSS block, and include the JS (if any) to mirror the live preview.
Can I use it in commercial projects?
Yes. It’s free for personal and commercial work; check the snippets license for details.
Is it responsive?
Yes. It inherits the responsive grid and components from Bootstrap 4.1.1.
About this bootstrap example/template
This free Bootstrap 4.1.1 snippet, bs4 simple search result, was published on Mar 2nd 2019, 11:40 by Bootdey Admin.
Optimized for copy‑paste: clean HTML, scoped CSS, and minimal JS so you can ship production‑ready UI faster and keep designs consistent.
Mobile‑first and responsive by default. Tested across modern browsers to reduce polish time on your project.
Already trusted in 11.7K+ views. Reuse this snippet to speed up landing pages, dashboards, or onboarding flows.
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