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-xs-12">
<div class="media search-media">
<div class="media-left">
<a href="#/">
<img class="media-object" src="https://www.bootdey.com/image/72x72/FFB6C1/000000" data-holder-rendered="true" style={{/*width: 72px; height: 72px;*/}}/>
</a>
</div>
<div class="media-body">
<div>
<h4 class="media-heading">
<a href="#/" class="blue">Media heading</a>
</h4>
</div>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis ...</p>
<div class="search-actions text-center">
<span class="text-info">$</span>
<span class="blue bolder bigger-150">300</span>
monthly
<div class="action-buttons bigger-125">
<a href="#/">
<i class="ace-icon fa fa-phone green"></i>
</a>
<a href="#/">
<i class="ace-icon fa fa-heart red"></i>
</a>
<a href="#/">
<i class="ace-icon fa fa-star orange2"></i>
</a>
</div>
<a class="search-btn-action btn btn-sm btn-block btn-info">Book it!</a>
</div>
</div>
</div>
<div class="media search-media disabled">
<div class="media-left">
<a href="#/">
<img class="media-object" data-src="holder.js/72x72" alt="72x72" src="https://www.bootdey.com/image/72x72/20B2AA/00000" data-holder-rendered="true" style={{/*width: 72px; height: 72px;*/}}/>
</a>
</div>
<div class="media-body">
<div>
<h4 class="media-heading">
<a href="#/" class="blue">Media heading</a>
</h4>
</div>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis ...</p>
<div class="search-actions text-center">
<span class="grey">$</span>
<span class="grey bolder bigger-125">250</span>
monthly
<div class="action-buttons bigger-125">
<a href="#/">
<i class="ace-icon fa fa-phone green"></i>
</a>
<a href="#/">
<i class="ace-icon fa fa-heart red"></i>
</a>
<a href="#/">
<i class="ace-icon fa fa-star orange2"></i>
</a>
</div>
<a class="search-btn-action btn btn-sm btn-block btn-grey disabled">Unavailable!</a>
</div>
</div>
</div>
<div class="media search-media">
<div class="media-left">
<a href="#/">
<img class="media-object" data-src="holder.js/72x72" alt="72x72" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2272%22%20height%3D%2272%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1544082d1d1%20text%20%7B%20fill%3A%23AAAAAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1544082d1d1%22%3E%3Crect%20width%3D%2272%22%20height%3D%2272%22%20fill%3D%22%23EEEEEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2217.46875%22%20y%3D%2240.5%22%3E72x72%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true" style={{/*width: 72px; height: 72px;*/}}/>
</a>
</div>
<div class="media-body">
<div>
<h4 class="media-heading">
<a href="#/" class="blue">Media heading</a>
</h4>
</div>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis ...</p>
<div class="search-actions text-center">
<span class="text-info">$</span>
<span class="blue bolder bigger-150">220</span>
monthly
<div class="action-buttons bigger-125">
<a href="#/">
<i class="ace-icon fa fa-phone green"></i>
</a>
<a href="#/">
<i class="ace-icon fa fa-heart red"></i>
</a>
<a href="#/">
<i class="ace-icon fa fa-star orange2"></i>
</a>
</div>
<a class="search-btn-action btn btn-sm btn-block btn-info">Book it!</a>
</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{margin-top:20px;}
.search-media {
border: 1px solid #ddd;
margin-top: -1px;
padding: 12px 150px 12px 12px;
-webkit-transition: border .1s ease-in-out 0s;
-o-transition: border .1s ease-in-out 0s;
transition: border .1s ease-in-out 0s;
position: relative
}
.search-media:hover {
border-color: #75A8CE;
z-index: 1
}
.search-media .search-actions {
position: absolute;
right: 0;
top: 0;
bottom: 0;
height: 100%;
width: 20%;
min-width: 100px;
max-width: 150px;
padding: 6px 9px
}
.search-media .search-actions::before {
content: "";
display: block;
position: absolute;
left: 0;
top: 8px;
bottom: 16px;
width: 1px;
background-image: -webkit-linear-gradient(top, #FFF 0, #DDD 100%);
background-image: -o-linear-gradient(top, #FFF 0, #DDD 100%);
background-image: linear-gradient(to bottom, #FFF 0, #DDD 100%);
background-repeat: repeat-x;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffdddddd', GradientType=0)
}
.search-media:hover .search-actions {
background-color: #F0F4F7
}
.search-media.disabled:hover .search-actions {
background-color: #F6F6F6
}
.search-media:not(.disabled):hover .search-actions::before {
background-image: -webkit-linear-gradient(top, #FFF 0, #84bee5 100%);
background-image: -o-linear-gradient(top, #FFF 0, #84bee5 100%);
background-image: linear-gradient(to bottom, #FFF 0, #84bee5 100%);
background-repeat: repeat-x;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ff84bee5', GradientType=0)
}
.search-filter-header {
padding: 8px;
margin: -4px
}
.search-btn-action {
position: absolute;
bottom: -5px;
left: 0;
right: 0;
width: auto;
-webkit-transition: bottom .15s;
-o-transition: bottom .15s;
transition: bottom .15s
}
.search-media:hover .search-btn-action {
bottom: 1px
}
.search-promotion.label {
position: absolute;
margin-top: -1px;
margin-left: -1px
}
.search-filter-element {
padding: 12px;
background-color: #FFF;
border: 1px solid #C9DDE7
}
.search-results {
padding: 24px 12px;
min-height: 20px
}
.search-result {
margin-top: -1px;
position: relative;
padding: 12px;
border: 1px dotted;
border-color: #DDD #FFF #FFF;
border-color: rgba(0, 0, 0, .11) transparent transparent
}
.search-result:hover {
background-color: #F7F7F7;
border-color: #D6E1EA;
border-style: solid;
z-index: 1
}
.search-result:first-child {
border-top-color: transparent
}
.search-result:first-child:hover {
border-top-color: #D6E1EA
}
.search-result .search-title {
font-size: 16px;
margin-top: 0;
margin-bottom: 6px
}
.search-result .search-content {
margin-top: 2px
}
.btn-grey.disabled, .btn-grey.disabled.active, .btn-grey.disabled:active, .btn-grey.disabled:focus,
.btn-grey.disabled:hover, .btn-grey[disabled], .btn-grey[disabled].active, .btn-grey[disabled]:active,
.btn-grey[disabled]:focus, .btn-grey[disabled]:hover, fieldset[disabled] .btn-grey, fieldset[disabled] .btn-grey.active,
fieldset[disabled] .btn-grey:active, fieldset[disabled] .btn-grey:focus, fieldset[disabled] .btn-grey:hover {
background-color: #A0A0A0!important;
border-color: #A0A0A0;
color:#fff;
}
.dark {
color: #333!important
}
.white {
color: #FFF!important
}
.red {
color: #DD5A43!important
}
.red2 {
color: #E08374!important
}
.light-red {
color: #F77!important
}
.blue {
color: #478FCA!important
}
.light-blue {
color: #93CBF9!important
}
.green {
color: #69AA46!important
}
.light-green {
color: #B0D877!important
}
.orange {
color: #FF892A!important
}
.orange2 {
color: #FEB902!important
}
.light-orange {
color: #FCAC6F!important
}
.purple {
color: #A069C3!important
}
.pink {
color: #C6699F!important
}
.pink2 {
color: #D6487E!important
}
.brown {
color: brown!important
}
.grey {
color: #777!important
}