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 rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"/>
<div class="container bootdey">
<div ng-app="myApp">
<div ng-controller="ctrlApp" id="myApp">
<div class="alerts" ng-shw="noty.queue.length>0">
<div class="alert alert-dismissable fade in pull-right" ng-repeat="m in noty.queue">
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
</div>
<div class="container-fluid">
<ol class="breadcrumb">
<li><a href="#/">Home</a></li>
<li><a href="#/">Category</a></li>
<li class="active">Sub-section</li>
</ol>
</div>
<div class="container-fluid">
<ul class="nav nav-justified" id="iconbar">
<li><a class="text-center color-1" href="#/"><i class="fa fa-tag fa-5x"></i> <br/>Tags</a></li>
<li><a class="text-center color-2" href="#/"><i class="fa fa-bookmark fa-5x"></i> <br/>Tasks</a></li>
<li><a class="text-center color-3" href="#/"><i class="fa fa-camera fa-5x"></i> <br/>Photos</a></li>
<li><a class="text-center color-4" href="#/"><i class="fa fa-map-marker fa-5x"></i> <br/>Tour</a></li>
<li><a class="text-center color-5" href="#/"><i class="fa fa-music fa-5x"></i> <br/>Tunes</a></li>
<li><a class="text-center color-6" href="#/"><i class="fa fa-book fa-5x"></i> <br/>Books</a></li>
<li><a class="text-center color-7" href="#/"><i class="fa fa-film fa-5x"></i> <br/>Videos</a></li>
</ul>
</div>
<hr/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#collapse1">
<h3 class="panel-title">
Collapsible Panel
</h3>
</div>
<div id="collapse1" class="collapse">
<div class="panel-body">
<blockquote>
<p>"Click my heading to make me collapse"</p>
</blockquote>
<button class="btn btn-default pull-right" id="btn1">Button</button>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseList">
<h3 class="panel-title">
Collapsible List Group
</h3>
</div>
<ul id="collapseList" class="list-group collapse">
<li class="list-group-item">Dey-Dey</li>
<li class="list-group-item">Triveo</li>
<li class="list-group-item">Behance</li>
</ul>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapse2">
<h3 class="panel-title">
Collapsed Panel
</h3>
</div>
<div id="collapse2" class="collapse">
<div class="panel-body">
<blockquote>
<p>"Click my heading to toggle me"</p>
</blockquote>
<p>Wow, that's clever!</p>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapse3">
<h3 class="panel-title">
Collapsed Panel (info)
</h3>
</div>
<div id="collapse3" class="collapse">
<div class="panel-body">
<blockquote>
<p>"Click my heading to toggle me"</p>
</blockquote>
<p>This panel has the <code>panel-info</code> context.</p>
</div>
</div>
</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 :
body{
background:#eee;
}
.color-1{
color:#0000FF;
}
.color-2{
color:#FF8C00;
}
.color-3{
color:#FF1493;
}
.color-4{
color:#7CFC00;
}
.color-5{
color:#00FA9A;
}
.color-6{
color:#8A2BE2;
}
.color-7{
color:#00FFFF;
}