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>
<div class="container bootstrap snippets bootdey">
<div class="row">
<div class="col-sm-3 col-md-2">
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
Mail <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#/">Mail</a></li>
<li><a href="#/">Contacts</a></li>
<li><a href="#/">Tasks</a></li>
</ul>
</div>
</div>
<div class="col-sm-9 col-md-10">
<div class="btn-group">
<button type="button" class="btn btn-default">
<div class="checkbox" style={{/*margin: 0;*/}}>
<label>
<input type="checkbox"/>
</label>
</div>
</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span><span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#/">All</a></li>
<li><a href="#/">None</a></li>
<li><a href="#/">Read</a></li>
<li><a href="#/">Unread</a></li>
<li><a href="#/">Starred</a></li>
<li><a href="#/">Unstarred</a></li>
</ul>
</div>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Refresh">
<span class="glyphicon glyphicon-refresh"></span> </button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
More <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#/">Mark all as read</a></li>
<li class="divider"></li>
<li class="text-center"><small class="text-muted">Select messages to see more actions</small></li>
</ul>
</div>
<div class="pull-right">
<span class="text-muted"><b>1</b>–<b>50</b> of <b>160</b></span>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
</div>
</div>
</div>
<hr/>
<div class="row">
<div class="col-sm-3 col-md-2">
<a href="#/" class="btn btn-success btn-sm btn-block" role="button"><i class="glyphicon glyphicon-edit"></i> Compose</a>
<hr/>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#/"><span class="badge pull-right">32</span> Inbox </a>
</li>
<li><a href="#/">Starred</a></li>
<li><a href="#/">Important</a></li>
<li><a href="#/">Sent Mail</a></li>
<li><a href="#/"><span class="badge pull-right">3</span>Drafts</a></li>
</ul>
</div>
<div class="col-sm-9 col-md-10">
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab"><span class="glyphicon glyphicon-inbox">
</span>Primary</a></li>
<li><a href="#profile" data-toggle="tab"><span class="glyphicon glyphicon-user"></span>
Social</a></li>
<li><a href="#messages" data-toggle="tab"><span class="glyphicon glyphicon-tags"></span>
Promotions</a></li>
<li><a href="#settings" data-toggle="tab"><span class="glyphicon glyphicon-plus no-margin">
</span></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="home">
<div class="list-group">
<a href="#/" class="list-group-item">
<div class="checkbox">
<label>
<input type="checkbox"/>
</label>
</div>
<span class="glyphicon glyphicon-star-empty"></span><span class="name label label-info" style={{/*min-width: 120px;
display: inline-block;*/}}>Andres posada</span> <span class="">Nice work on the lastest version</span>
<span class="text-muted" style={{/*font-size: 11px;*/}}>- More content here</span> <span class="badge">12:10 AM</span> <span class="pull-right"><span class="glyphicon glyphicon-paperclip">
</span></span></a><a href="#/" class="list-group-item">
<div class="checkbox">
<label>
<input type="checkbox"/>
</label>
</div>
<span class="glyphicon glyphicon-star-empty"></span><span class="name label label-success" style={{/*min-width: 120px;
display: inline-block;*/}}>Juan acosta</span> <span class="">This is big title</span>
<span class="text-muted" style={{/*font-size: 11px;*/}}>- I saw that you had..</span> <span class="badge">12:09 AM</span> <span class="pull-right"><span class="glyphicon glyphicon-paperclip">
</span></span></a><a href="#/" class="list-group-item read">
<div class="checkbox">
<label>
<input type="checkbox"/>
</label>
</div>
<span class="glyphicon glyphicon-star"></span><span class="name label label-warning" style={{/*min-width: 120px;
display: inline-block;*/}}>Mariana jaramillo</span> <span class="">This is big title</span>
<span class="text-muted" style={{/*font-size: 11px;*/}}>- Hi hello how r u ?</span> <span class="badge">11:30 PM</span> <span class="pull-right"><span class="glyphicon glyphicon-paperclip">
</span>
</span>
</a>
</div>
</div>
<div class="tab-pane fade in" id="profile">
<div class="list-group">
<div class="list-group-item">
<span class="text-center">This tab is empty.</span>
</div>
</div>
</div>
<div class="tab-pane fade in" id="messages">
...</div>
<div class="tab-pane fade in" id="settings">
This tab is empty.</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 :
/* CSS used here will be applied after bootstrap.css */
body{ margin-top:50px;}
.nav-tabs .glyphicon:not(.no-margin) { margin-right:10px; }
.tab-pane .list-group-item:first-child {border-top-right-radius: 0px;border-top-left-radius: 0px;}
.tab-pane .list-group-item:last-child {border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;}
.tab-pane .list-group .checkbox { display: inline-block;margin: 0px; }
.tab-pane .list-group input[type="checkbox"]{ margin-top: 2px; }
.tab-pane .list-group .glyphicon { margin-right:5px; }
.tab-pane .list-group .glyphicon:hover { color:#FFBC00; }
a.list-group-item.read { color: #222;background-color: #F3F3F3; }
hr { margin-top: 5px;margin-bottom: 10px; }
.nav-pills>li>a {padding: 5px 10px;}
.ad { padding: 5px;background: #F5F5F5;color: #222;font-size: 80%;border: 1px solid #E5E5E5; }
.ad a.title {color: #15C;text-decoration: none;font-weight: bold;font-size: 110%;}
.ad a.url {color: #093;text-decoration: none;}
