Rich-React

React js UI example. bs4 simple search result

React js UI example and template, bs4 simple search result! . Take a look at this UI example and see how it can enhance your project. Your can copy or download the code and use it in your project. Don't forget to browse our library of other free React Native templates for even more design and functionality inspiration. Happy coding!
Tags: bs4,search,list,find,blog,posts

Preview Code

1. First, we need fresh reactjs setup, and for that, we need to run below commands into out terminal, and also we should have latest node version installed on our system:

npx create-react-app my-awesome-project

cd my-awesome-project

npm start

2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:

npm install [email protected] --save

npm start //For start project again

3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:

import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';


function App() {
  
	return (
		<div>
			<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>
		</div>
	);
}
export default App;

4. Now we need to add below code into our my-awesome-project/src/App.css file :

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

React js template and ui example bs4 timeline widget

bs4 timeline widget

View
React js template and ui example bs4 beta user lists

bs4 beta user lists

View
React js template and ui example bs4 profile friend list

bs4 profile friend list

View
React js template and ui example bs4 schedule list

bs4 schedule list

View
React js template and ui example bs5 dark footer

bs5 dark footer

View
React js template and ui example product catalog

product catalog

View
React js template and ui example bs4 shop cart

bs4 shop cart

View
React js template and ui example candidate list with skills rating and location

candidate list with skills rating and location

View