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>
<div class="container bootstrap snippets bootdey">
<div class="row">
<div class="col-md-8">
<div class="panel">
<div class="panel-bg-cover">
<img class="img-responsive" src="https://www.bootdey.com/image/700x300/FFB6C1/000000" alt="Image"/>
</div>
<div class="panel-media">
<img src="https://bootdey.com/img/Content/user_6.jpg" class="panel-media-img img-circle img-border-light" alt="Profile Picture"/>
<div class="row">
<div class="col-md-7">
<h3 class="panel-media-heading">Deyson Bejarano</h3>
<a href="#/" class="btn-link">@amazing-dey</a>
<p class="text-muted mar-btm">Web and Graphic designer</p>
</div>
<div class="col-md-5 pull-right">
<button class="btn btn-sm btn-primary">Add Friend</button>
<button class="btn btn-sm btn-success btn-icon glyphicon glyphicon-envelope"></button>
</div>
</div>
</div>
<div class="panel-body">
<h4>Consectetur adipisicing</h4>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</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;
background:#eee;
}
.panel {
box-shadow: 0 2px 0 rgba(0,0,0,0.05);
border-radius: 0;
border: 0;
margin-bottom: 24px;
}
.panel {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.panel .panel-bg-cover {
max-height: 180px;
overflow: hidden;
}
.panel .panel-bg-cover img {
min-width: 100%;
min-height: 100%;
background-size: cover;
}
.panel-media {
box-shadow: 0 -50px 20px -10px rgba(0,0,0,0.2);
padding: 10px 15px 15px 140px;
position: relative;
}
.panel-media-img {
position: absolute;
width: 96px;
height: 96px;
left: 20px;
top: -48px;
}
.img-border-light {
box-shadow: 0 0 0 4px #fff;
}
@media (min-width: 1200px){
.text-lg-right {
text-align: right;
}
}
.panel-media-heading {
color: #fff;
position: absolute;
top: -2.7em;
}
.btn-link {
border-color: transparent;
}
.text-muted, a.text-muted:hover, a.text-muted:focus, a.text-muted:focus {
color: #606060;
}
.mar-btm {
margin-bottom: 15px;
}
.panel-body {
padding: 25px 20px;
}