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 start2. 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 again3. 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 id="main" class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">
Real Estates Detail
</h2>
</div>
</div>
<div class="row" id="real-estates-detail">
<div class="col-lg-4 col-md-4 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<header class="panel-title">
<div class="text-center">
<strong>Agent</strong> Author<strong>.</strong>
</div>
</header>
</div>
<div class="panel-body">
<div class="text-center" id="author">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png"/>
<h3>John Doe</h3>
<small class="label label-warning">From USA</small>
<p>Aku kie sing sok ngedolke omah-omah kae, yo iso di omongke makelar ngono sih. Tapi makelar nek payu ne akeh yo dadi sugih bro. Tenanan ra ngapusi.</p>
<p class="sosmed-author">
<a href="#/"><i class="fa fa-facebook" title="Facebook"></i></a>
<a href="#/"><i class="fa fa-twitter" title="Twitter"></i></a>
<a href="#/"><i class="fa fa-google-plus" title="Google Plus"></i></a>
<a href="#/"><i class="fa fa-linkedin" title="Linkedin"></i></a>
</p>
</div>
</div>
</div>
</div>
<div class="col-lg-8 col-md-8 col-xs-12">
<div class="panel">
<div class="panel-body">
<ul id="myTab" class="nav nav-pills">
<li class="active"><a href="#photos" data-toggle="tab">Photos</a></li>
<li class=""><a href="#detail" data-toggle="tab">Detail</a></li>
<li class=""><a href="#contact" data-toggle="tab">Contact</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="photos">
<br/>
<div class="flexslider">
<img class="img-responsive" src="https://www.bootdey.com/image/900x400/FFB6C1/000000" draggable="false"/>
</div>
</div>
<div class="tab-pane fade" id="detail">
<p></p>
<h4>Short Detail</h4>
<p>Iki mung detail singkat wae soale seko jenenge wae wis short detail dadi yo ojo dowo-dowo.</p>
<table class="table table-th-block">
<tbody>
<tr><td class="active">Bedrooms:</td><td>5 beds</td></tr>
<tr><td class="active">Bathrooms:</td><td>2 baths</td></tr>
<tr><td class="active">Single Family:</td><td>2,957 sq ft</td></tr>
<tr><td class="active">Lot:</td><td>0.26 acres</td></tr>
<tr><td class="active">Year Built:</td><td>1998</td></tr>
<tr><td class="active">Last Sold:</td><td>Apr 1998 for $225,000</td></tr>
<tr><td class="active">Heating Type:</td><td><a href="#/">Contact for details</a></td></tr>
</tbody>
</table>
</div>
<div class="tab-pane fade" id="contact">
<p></p>
<form role="form">
<div class="form-group">
<label>Full name</label>
<input type="text" class="form-control rounded" placeholder="Enter full name"/>
</div>
<div class="form-group">
<label>Phone number</label>
<input type="text" class="form-control rounded" placeholder="(000)0000000"/>
</div>
<div class="form-group">
<label>Email address</label>
<input type="email" class="form-control rounded" placeholder="Enter email"/>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox"/> Buy this property
</label>
</div>
</div>
<div class="form-group">
<label>Message to agent</label>
<textarea class="form-control rounded" style={{/*height: 100px;*/}}></textarea>
<p class="help-block">Please be polite and professional</p>
</div>
<div class="form-group">
<button type="submit" class="btn btn-danger" data-original-title="" title="">Send message</button>
</div>
</form>
</div>
</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;}
#main {
background-color: #f2f2f2;
padding: 20px;
margin-top: -55px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
border-bottom: 4px solid #ddd;
}
#real-estates-detail #author img {
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
border: 5px solid #ecf0f1;
margin-bottom: 10px;
}
#real-estates-detail .sosmed-author i.fa {
width: 30px;
height: 30px;
border: 2px solid #bdc3c7;
color: #bdc3c7;
padding-top: 6px;
margin-top: 10px;
}
.panel-default .panel-heading {
background-color: #fff;
}
#real-estates-detail .slides li img {
height: 450px;
}
