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 rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"/>
<div class="container bootstrap snippets bootdey">
<div class="row">
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-sm-8">
<h2 class="text-primary"><b><span class="glyphicon glyphicon-user"></span> Bootdey Bootstrap</b></h2>
<p><strong><span class="glyphicon glyphicon-ok-circle"></span>About: </strong>Page for Web Designer</p>
<p><strong><span class="glyphicon glyphicon-certificate"></span>Hobbies: </strong>write rap, listen to rap music</p>
<p><strong><span class="glyphicon glyphicon-thumbs-up"></span>Skills: </strong>
<span class="label label-info tags">html5</span>
<span class="label label-info tags">css3</span>
<span class="label label-info tags">jquery</span>
<span class="label label-info tags">bootstrap3</span>
</p>
</div>
<div class="col-xs-12 col-sm-4 text-center">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="" class="center-block img-circle img-responsive profile-img"/>
<ul class="list-inline ratings text-center" title="Ratings">
<li><a href="#/"><span class="fa fa-star fa-lg"></span></a></li>
<li><a href="#/"><span class="fa fa-star fa-lg"></span></a></li>
<li><a href="#/"><span class="fa fa-star fa-lg"></span></a></li>
<li><a href="#/"><span class="fa fa-star fa-lg"></span></a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-4">
<h2><strong> 10,7K </strong></h2>
<p><small>Followers</small></p>
<button class="btn btn-success btn-block"><span class="fa fa-plus-circle"></span> Follow </button>
</div>
<div class="col-xs-12 col-sm-4">
<h2><strong>35</strong></h2>
<p><small>Following</small></p>
<button class="btn btn-info btn-block"><span class="fa fa-user"></span> View Profile </button>
</div>
<div class="col-xs-12 col-sm-4">
<h2><strong>58</strong></h2>
<p><small>Snippets</small></p>
<button type="button" class="btn btn-primary btn-block"><span class="fa fa-gear"></span> Options </button>
</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 :
.profile-img{box-shadow: 0 5px 15px rgba(0,0,0,.5)}
