Bootstrap snippet. bs4 simple search result

This Bootstrap snippet. bs4 simple search result, 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

This is the html code used to create this bootstrap snippet, You can copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<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, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

body{
    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;
}
                                    

Similar snippets

Bootstrap snippet bs4 blog post image

bs4 blog post image

View

Bootstrap snippet bs4 activity list

bs4 activity list

View

Bootstrap snippet bs4 Task Board page

bs4 Task Board page

View

Bootstrap snippet bs4 past orders profile

bs4 past orders profile

View

Bootstrap snippets. bs4 simple search result

About this bootstrap snippet

This bootstrap snippet, bs4 simple search result, was published on Mar 2nd, 11:40 by Dey Dey 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 snippet currectly have 1.5K views, Using this bootstrap snippet you have the following benefits:

Bootstrap 4.1.1

This snippet 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

Jquery plugins

Great built-in plugins with jquery framework, you can easy to change all declarations

semantic html 5

Built on html / css3 the code quality is really amazing

Simple Integration

This snippet can be simply integrated on existing sites and new ones too, all you need to do is copy the code and start working

Rated 5/5 based on 11 reviews