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.1.0/css/font-awesome.min.css"/>
<div class="container bootstrap snippets bootdey">
<div class="col-sm-8">
<div class="panel panel-white post panel-shadow">
<div class="post-heading">
<div class="pull-left image">
<img src="https://bootdey.com/img/Content/user_1.jpg" class="img-circle avatar" alt="user profile image"/>
</div>
<div class="pull-left meta">
<div class="title h5">
<a href="#/"><b>Ryan Haywood</b></a>
made a post.
</div>
<h6 class="text-muted time">1 minute ago</h6>
</div>
</div>
<div class="post-description">
<p>Bootdey is a gallery of free snippets resources templates and utilities for bootstrap css hmtl js framework. Codes for developers and web designers</p>
<div class="stats">
<a href="#/" class="btn btn-default stat-item">
<i class="fa fa-thumbs-up icon"></i>2
</a>
<a href="#/" class="btn btn-default stat-item">
<i class="fa fa-share icon"></i>12
</a>
</div>
</div>
<div class="post-footer">
<div class="input-group">
<input class="form-control" placeholder="Add a comment" type="text"/>
<span class="input-group-addon">
<a href="#/"><i class="fa fa-edit"></i></a>
</span>
</div>
<ul class="comments-list">
<li class="comment">
<a class="pull-left" href="#/">
<img class="avatar" src="https://bootdey.com/img/Content/user_1.jpg" alt="avatar"/>
</a>
<div class="comment-body">
<div class="comment-heading">
<h4 class="user">Gavino Free</h4>
<h5 class="time">5 minutes ago</h5>
</div>
<p>Sure, oooooooooooooooohhhhhhhhhhhhhhhh</p>
</div>
<ul class="comments-list">
<li class="comment">
<a class="pull-left" href="#/">
<img class="avatar" src="https://bootdey.com/img/Content/user_3.jpg" alt="avatar"/>
</a>
<div class="comment-body">
<div class="comment-heading">
<h4 class="user">Ryan Haywood</h4>
<h5 class="time">3 minutes ago</h5>
</div>
<p>Relax my friend</p>
</div>
</li>
<li class="comment">
<a class="pull-left" href="#/">
<img class="avatar" src="https://bootdey.com/img/Content/user_2.jpg" alt="avatar"/>
</a>
<div class="comment-body">
<div class="comment-heading">
<h4 class="user">Gavino Free</h4>
<h5 class="time">3 minutes ago</h5>
</div>
<p>Ok, cool.</p>
</div>
</li>
</ul>
</li>
</ul>
</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{
background:#eee;
padding-top:20px;
}
.panel-shadow {
box-shadow: rgba(0, 0, 0, 0.3) 7px 7px 7px;
}
.panel-white {
border: 1px solid #dddddd;
}
.panel-white .panel-heading {
color: #333;
background-color: #fff;
border-color: #ddd;
}
.panel-white .panel-footer {
background-color: #fff;
border-color: #ddd;
}
.post .post-heading {
height: 95px;
padding: 20px 15px;
}
.post .post-heading .avatar {
width: 60px;
height: 60px;
display: block;
margin-right: 15px;
}
.post .post-heading .meta .title {
margin-bottom: 0;
}
.post .post-heading .meta .title a {
color: black;
}
.post .post-heading .meta .title a:hover {
color: #aaaaaa;
}
.post .post-heading .meta .time {
margin-top: 8px;
color: #999;
}
.post .post-image .image {
width: 100%;
height: auto;
}
.post .post-description {
padding: 15px;
}
.post .post-description p {
font-size: 14px;
}
.post .post-description .stats {
margin-top: 20px;
}
.post .post-description .stats .stat-item {
display: inline-block;
margin-right: 15px;
}
.post .post-description .stats .stat-item .icon {
margin-right: 8px;
}
.post .post-footer {
border-top: 1px solid #ddd;
padding: 15px;
}
.post .post-footer .input-group-addon a {
color: #454545;
}
.post .post-footer .comments-list {
padding: 0;
margin-top: 20px;
list-style-type: none;
}
.post .post-footer .comments-list .comment {
display: block;
width: 100%;
margin: 20px 0;
}
.post .post-footer .comments-list .comment .avatar {
width: 35px;
height: 35px;
}
.post .post-footer .comments-list .comment .comment-heading {
display: block;
width: 100%;
}
.post .post-footer .comments-list .comment .comment-heading .user {
font-size: 14px;
font-weight: bold;
display: inline;
margin-top: 0;
margin-right: 10px;
}
.post .post-footer .comments-list .comment .comment-heading .time {
font-size: 12px;
color: #aaa;
margin-top: 0;
display: inline;
}
.post .post-footer .comments-list .comment .comment-body {
margin-left: 50px;
}
.post .post-footer .comments-list .comment > .comments-list {
margin-left: 50px;
}
