Bootdey

Bootstrap snippet and html example. bs4 simple search result

This html snippet was created to help web designers, web developers, front-end and back-end developer save time. Use it for free 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

Preview HTML CSS
Share on facebook Share on X

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

<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

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

ul {
    list-style-type: none;
}

Similar snippets

Find more similar snippets using the following tags:bs4,search,list,find,blog,posts

Bootstrap example and template. Shop product list

Shop product list

View
Bootstrap example and template. shop cart

shop cart

View
Bootstrap example and template. bs4 account tickets

bs4 account tickets

View
Bootstrap example and template. bs4 beta user list with badges

bs4 beta user list with badges

View
Bootstrap example and template. bs5 dark footer

bs5 dark footer

View
Bootstrap example and template. tickets timeline

tickets timeline

View
Bootstrap example and template. read email

read email

View
Bootstrap example and template. card chat list

card chat list

View
Bootstrap example and template. bs4 simple search result

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

  1. Home
  2. Bootstrap Snippets
  3. search
  4. Bootstrap html snippet. bs4 simple search result