bs4 simple search result

Bootstrap snippet. bs4 simple search result, this snippet was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code.
tags: bs4,search,list,find,blog,posts

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<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="http://bootstraptemplates.net/vertex-ex/img/thumbs/project-1.jpg" 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="http://bootstraptemplates.net/vertex-ex/img/thumbs/project-2.jpg" 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="http://bootstraptemplates.net/vertex-ex/img/thumbs/project-3.jpg" 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="http://bootstraptemplates.net/vertex-ex/img/thumbs/project-4.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="http://bootstraptemplates.net/vertex-ex/img/thumbs/project-5.jpg" 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="http://bootstraptemplates.net/vertex-ex/img/thumbs/project-6.jpg" 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

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

body{margin-top:20px;}

/* ==================================================
    Side bar
===================================================== */

.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;
}



aside section {
   margin-bottom: 60px;
}

aside section:after {
   clear: both;
   display: table;
   content: " ";
}

aside .heading .title {
margin-top: 0;
    margin-bottom: 28px;
    padding-bottom: 0;
    font-size: 12px;
    font-weight: 600;
    width: auto;
    text-transform: uppercase;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

aside section .list-inline > li {
   padding-right: 0;
}

aside .img-holder {
   float: left;
   margin-right: 10px;
   margin-top: 3px;
}

aside section hr {
   margin-top: 10px;
   margin-bottom: 10px;
}

.sidebar-widget-inner:after {
   clear: both;
   content: ' ';
   display: table;
}

.sidebar .list-group-item {
   padding: 0;
   background-color: transparent;
   border-width: 0;
   /*border-bottom: 1px solid rgba(207,215,223,.25);*/
   margin-bottom: 0;
   box-shadow: inset 0px 1px 0 rgba(0,0,0,.08);
}

.sidebar .list-group-item:last-child {
   border-bottom-width: 0;
}

.sidebar .list-group-item a {
   text-decoration: none;
   padding-bottom: 10px;
   padding-top: 10px;
   padding-left: 15px;
   padding-right: 15px;
   font-size: 15px;
   display: block;
   line-height: 21px;
}

.sidebar .list-group-item.active > a {
   /*padding-left: 10px;*/
}

.sidebar .list-group-item.active {
   background-color: #fbfbfb;
}

.sidebar .list-group-item i {
   margin-right: 10px;
   width: 15px;
}

.sidebar .list-group-item a:hover {
   color: #96cd56;
}

.sidebar .list-group-item ul {
   padding-top: 0px;
   padding-bottom: 15px;
   list-style: none;
   width: 100%;
}

.sidebar .list-group-item ul li {
}

.sidebar .list-group-item ul li > a {
   color: #777;
   font-size: 13px;
   padding-bottom: 4px;
   padding-top: 4px;
}

.sidebar .list-group-item > a {
   display: block;
   width: 100%;
   color: #444;
}

.sidebar .list-group-item.list-toggle > a {
   display: block;
   width: 100%;
   /*color: #333;*/
}

.sidebar .list-group-item:not(.list-toggle) > a:before {
   content: "\f105";
   font-family: FontAwesome;
   font-weight: normal;
   font-style: normal;
   display: block;
   float: right;
   text-decoration: inherit;
   font-size: 14px;
}

.sidebar .list-group-item.list-toggle > a:hover {
   color: #96cd56;
}

.sidebar .list-group-item.active.list-toggle > a:hover {
   color: inherit;
}

.sidebar .list-group-item.list-toggle > a.collapsed:after {
   content: "\f101";
   font-family: FontAwesome;
   font-weight: normal;
   font-style: normal;
   display: block;
   float: right;
   text-decoration: inherit;
   font-size: 14px;
}

.sidebar .list-group-item.list-toggle > a:after {
   content: "\f103";
   font-family: FontAwesome;
   font-weight: normal;
   font-style: normal;
   display: block;
   float: right;
   text-decoration: inherit;
   font-size: 14px;
}

.sidebar .list-group-item.list-toggle {
   /*background-color: transparent;*/
}

.sidebar .bordered-sidebar .list-group-item {
   padding: 0;
   border-width: 1px;
   border: 1px solid rgba(207,215,223,.25);
   margin-bottom: -1px;
   background-color: #fbfbfb;
   border-top: none;
}

.list-group-fw {
   margin-right: -40px;
}

.right-side-sidebar .list-group-fw {
   margin-right: 0px;
   margin-left: -40px;
}

.right-side-sidebar .sidebar .list-group-item ul {
   padding-left: 15px;
}


/* --------------------------------------------
   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: #999;
}

.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;
}
                                    

Similar snippets

Bootstrap snippet bs4 Accordion form Wizard

bs4 Accordion form Wizard

View

Bootstrap snippet bs4 profile detail page

bs4 profile detail page

View

Bootstrap snippet bs4 social profile

bs4 social profile

View

About this snippet

Creator: Dey Dey

Bootstrap version: 4.1.1

Created: Mar 2nd, 11:40

Views: 18