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>
<html lang="en">
<head>
<meta charset="utf-8"/>
{/*
The codes are free, but we require linking to our web site.
Why to Link?
A true story: one girl didn't set a link and had no decent date for two years, and another guy set a link and got a top ranking in Google!
Where to Put the Link?
home, about, credits... or in a good page that you want
THANK YOU MY FRIEND!
*/}
<title>Forum post list - Bootdey.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style type="text/css">
bodymargin-top:20px;
background:#eee;
color:#284866!important;
.white-bg
background-color: #ffffff;
.page-heading
border-top: 0;
padding: 0 10px 20px 10px;
.forum-post-container .media
margin: 10px 10px 10px 10px;
padding: 20px 10px 20px 10px;
border-bottom: 1px solid #f1f1f1;
.forum-avatar
float: left;
margin-right: 20px;
text-align: center;
width: 110px;
.forum-avatar .img-circle
height: 48px;
width: 48px;
.author-info
color: #676a6c;
font-size: 11px;
margin-top: 5px;
text-align: center;
.forum-post-info
padding: 9px 12px 6px 12px;
background: #f9f9f9;
border: 1px solid #f1f1f1;
.media-body > .media
background: #f9f9f9;
border-radius: 3px;
border: 1px solid #f1f1f1;
.forum-post-container .media-body .photos
margin: 10px 0;
.forum-photo
max-width: 140px;
border-radius: 3px;
.media-body > .media .forum-avatar
width: 70px;
margin-right: 10px;
.media-body > .media .forum-avatar .img-circle
height: 38px;
width: 38px;
.mid-icon
font-size: 66px;
.forum-item
margin: 10px 0;
padding: 10px 0 20px;
border-bottom: 1px solid #f1f1f1;
.views-number
font-size: 18px;
line-height: 18px;
font-weight: 400;
.forum-container,
.forum-post-container
padding: 30px !important;
.forum-item small
color: #999;
.forum-item .forum-sub-title
color: #999;
margin-left: 50px;
.forum-title
margin: 15px 0 15px 0;
.forum-info
text-align: center;
.forum-desc
color: #999;
.forum-icon
float: left;
width: 30px;
margin-right: 20px;
text-align: center;
a.forum-item-title
color: inherit;
display: block;
font-size: 18px;
font-weight: 600;
a.forum-item-title:hover
color: inherit;
.forum-icon .fa
font-size: 30px;
margin-top: 8px;
color: #9b9b9b;
.forum-item.active .fa
color: #1ab394;
.forum-item.active a.forum-item-title
color: #1ab394;
@media (max-width: 992px)
.forum-info
margin: 15px 0 10px 0;
/* Comment this is you want to show forum info in small devices */
display: none;
.forum-desc
float: none !important;
.ibox
clear: both;
margin-bottom: 25px;
margin-top: 0;
padding: 0;
.ibox.collapsed .ibox-content
display: none;
.ibox.collapsed .fa.fa-chevron-up:before
content: "\f078";
.ibox.collapsed .fa.fa-chevron-down:before
content: "\f077";
.ibox:after,
.ibox:before
display: table;
.ibox-title
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #ffffff;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 3px 0 0;
color: inherit;
margin-bottom: 0;
padding: 14px 15px 7px;
min-height: 48px;
.ibox-content
background-color: #ffffff;
color: inherit;
padding: 15px 20px 20px 20px;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 1px 0;
.ibox-footer
color: inherit;
border-top: 1px solid #e7eaec;
font-size: 90%;
background: #ffffff;
padding: 10px 15px;
.message-input
height: 90px !important;
.form-control, .single-line
background-color: #FFFFFF;
background-image: none;
border: 1px solid #e5e6e7;
border-radius: 1px;
color: inherit;
display: block;
padding: 6px 12px;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
width: 100%;
font-size: 14px;
.text-navy
color: #1ab394;
.mid-icon
font-size: 66px !important;
.m-b-sm
margin-bottom: 10px;
</style>
</head>
<body>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="ibox-content forum-container">
<div class="forum-item">
<div class="row">
<div class="col-md-7">
<div class="forum-icon">
<i class="fa fa-bookmark"></i>
</div>
<a href="forum_post.html" class="forum-item-title">Projet 1</a>
<div class="forum-sub-title">Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</div>
</div>
<div class="col-md-2 forum-info">
<div>
<small>Créé le </small>
</div>
<span class="views-number">
12/01/2017
</span>
</div>
<div class="col-md-2 forum-info">
<div>
<small>Stats</small>
</div>
<span class="views-number">
90
</span>
</div>
<div class="col-md-1 forum-info">
<span class="views-number">
<span class="fa-stack">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-pencil fa-stack-1x fa-inverse"></i>
</span>
</span>
</div>
</div>
</div>
<div class="forum-item">
<div class="row">
<div class="col-md-7">
<div class="forum-icon">
<i class="fa fa-bookmark"></i>
</div>
<a href="forum_post.html" class="forum-item-title">Projet 1</a>
<div class="forum-sub-title">Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</div>
</div>
<div class="col-md-2 forum-info">
<div>
<small>Créé le </small>
</div>
<span class="views-number">
12/01/2017
</span>
</div>
<div class="col-md-2 forum-info">
<div>
<small>Stats</small>
</div>
<span class="views-number">
90
</span>
</div>
<div class="col-md-1 forum-info">
<span class="views-number">
<span class="fa-stack">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-pencil fa-stack-1x fa-inverse"></i>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
</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;}
