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="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"/>
<div class="container profile">
<div class="row">
<div class="col-md-12">
<div class="well well-small clearfix">
<div class="row">
<div class="col-md-2">
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" class="img-polaroid img-responsive"/>
</div>
<div class="col-md-4">
<h2>Dey-Dey name</h2>
<ul class="list-unstyled">
<li><i class="icon-phone"></i> 916-241-3613</li>
<li><i class="icon-envelope"></i> [email protected]</li>
<li><i class="icon-globe"></i> http://bootnipets.com</li>
</ul>
</div>
<div class="col-md-6">
<ul class="list-inline stats">
<li>
<span>275</span>
Friends
</li>
<li>
<span>354</span>
Followers
</li>
<li>
<span>186</span>
Photos
</li>
</ul>
<div>
</div>
</div>
</div>
</div>
<div class="well clearfix">
<b>Aplication name</b>
</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;}
body{
padding-top:25px !important;
}
.stats {
text-align:center;
text-shadow:1px 1px 0px #fff;
margin-top:25px;
}
.stats li{
width:125px;
}
.stats span{
font-family:Helvetica;
font-weight:bold;
text-shadow:1px 1px 0px #fff;
font-size:4em;
display:block;
line-height:1em;
}
/* Large desktop */
@media (min-width: 1200px) {
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
.profile img{
width:75px;
}
.profile h2{
font-size:1.7em;
}
.stats span{
font-size: 2em;
}
}
/* Landscape phones and down */
@media (max-width: 480px) {
}