Today, We will see how to make a simple Admin Template in React js using Bootstrap 5. Admin Dashboard in React JS.
As we know that The Bootstrap is a framework of CSS. You can use Material UI or any other design framework for the Admin dashboard.
Admin Panel in React JS
Installation of Packages
You just have to use two packages ( Dependencies )
1 ). Bootstrap and Fontawesome
2 ). Chart JS
First Install Bootstrap in your react project using the below command. But you can cdn link as well .so It is up to you want you to want to use for your project.
npm install bootstrap --save or using yarn package manager yarn add bootstrap
Below is the CDN link of bootstrap and font awesome
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
Installation of React Chart js
I am using React Chart.js to show data on different charts, You can use other charts for your project. After installation of Chartjs. You will see a new package react-chartjs-2 in your package.json file.
npm install --save react-chartjs-2 chart.js # or yarn add react-chartjs-2 chart.js
Coding Part starts here
I am using three-component Header.js, Sidebar.js, Dashboard.js, and PieChart.js So first We will see header.js ( Navbar.js )
Folder Structure of src Folder
src/Navbar.js
import React from 'react'
export const Navbar = () => {
return (
<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-dark mb-3">
<div class="flex-row d-flex">
<button type="button" class="navbar-toggler mr-2 " data-toggle="offcanvas" title="Toggle responsive left sidebar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#" title="Free Bootstrap 4 Admin Template">Record Book</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="//www.codeply.com">Link</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#myAlert" data-toggle="collapse">Alert</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" data-target="#myModal" data-toggle="modal">About</a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light text-white">
<i class="fab fa-google-plus-g"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light text-white">
<i class="fas fa-envelope-open-text"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light text-white">
<i class="fas fa-align-justify"></i>
</a>
</li>
</ul>
</div>
</nav>
)
}
export default Navbar
Now Sidebar part
src/Sidebar.js
import React from 'react'
const Sidebar = () => {
return (
<div class="col-md-3 col-lg-2 sidebar-offcanvas pl-0" id="sidebar" role="navigation" style={{backgroundColor:"#e9ecef"}}>
<ul class="nav flex-column sticky-top pl-0 pt-5 p-3 mt-3 ">
<li class="nav-item mb-2 mt-3"><a class="nav-link text-secondary" href="#"><h5>Jacob Nejam</h5></a></li>
<li class="nav-item mb-2 "><a class="nav-link text-secondary" href="#"><i class="fas fa-user font-weight-bold"></i> <span className="ml-3">Overview</span></a></li>
<li class="nav-item mb-2">
<a class="nav-link text-secondary" href="#submenu1" data-toggle="collapse" data-target="#submenu1"><i class="far fa-file-word font-weight-bold"></i> <span className="ml-3"> Reports▾</span></a>
<ul class="list-unstyled flex-column pl-3 collapse" id="submenu1" aria-expanded="false">
<li class="nav-item mb-2 "><a class="nav-link text-secondary" href=""><i class="fas fa-book-reader"></i> Data Report </a></li>
<li class="nav-item mb-2 "><a class="nav-link text-secondary" href=""> <i class="fas fa-book-medical"></i> File Report </a></li>
</ul>
</li>
<li class="nav-item mb-2"><a class="nav-link text-secondary" href="#"><i class="far fa-chart-bar font-weight-bold"></i> <span className="ml-3">Analytics</span></a></li>
<li class="nav-item mb-2"><a class="nav-link text-secondary" href="#"><i class="fas fa-file-export font-weight-bold"></i><span className="ml-3">Export</span></a></li>
<li class="nav-item mb-2"><a class="nav-link text-secondary" href="#"><i class="fas fa-tablet-alt font-weight-bold"></i><span className="ml-3">Snippets</span></a></li>
<li class="nav-item mb-2"><a class="nav-link text-secondary" href="#"><i class="fas fa-atom font-weight-bold"></i> <span className="ml-3">Flex</span></a></li>
<li class="nav-item mb-2"><a class="nav-link text-secondary" href="#"><i class="far fa-folder font-weight-bold"></i> <span className="ml-3">Layouts</span></a></li>
<li class="nav-item mb-2"><a class="nav-link text-secondary" href="#">Templates</a></li>
<li class="nav-item mb-2"><a class="nav-link text-secondary" href="#">Themes</a></li>
</ul>
</div>
)
}
export default Sidebar
src/Dashboard.js
import {useEffect,useState} from 'react';
import PieChart from './PieChart';
const Dashboard = () => {
const[record,setRecord] = useState([])
const getData = () =>
{
fetch('https://jsonplaceholder.typicode.com/users')
.then(resposne=> resposne.json())
.then(res=>setRecord(res))
}
useEffect(() => {
getData();
},)
return (
<div class="col main pt-5 mt-3">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<p class="lead d-none d-sm-block">Add Employee Details and Records</p>
<div class="alert alert-warning fade collapse" role="alert" id="myAlert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<strong>Data and Records</strong> Learn more about employee
</div>
<div class="row mb-3">
<div class="col-xl-3 col-sm-6 py-2">
<div class="card bg-success text-white h-100">
<div class="card-body bg-success" style={{backgroundColor:"#57b960"}}>
<div class="rotate">
<i class="fa fa-user fa-4x"></i>
</div>
<h6 class="text-uppercase">Users</h6>
<h1 class="display-4">134</h1>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 py-2">
<div class="card text-white bg-danger h-100">
<div class="card-body bg-danger">
<div class="rotate">
<i class="fa fa-list fa-4x"></i>
</div>
<h6 class="text-uppercase">Posts</h6>
<h1 class="display-4">87</h1>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 py-2">
<div class="card text-white bg-info h-100">
<div class="card-body bg-info">
<div class="rotate">
<i class="fab fa-twitter fa-4x"></i>
</div>
<h6 class="text-uppercase">Tweets</h6>
<h1 class="display-4">125</h1>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 py-2">
<div class="card text-white bg-warning h-100">
<div class="card-body">
<div class="rotate">
<i class="fa fa-share fa-4x"></i>
</div>
<h6 class="text-uppercase">Shares</h6>
<h1 class="display-4">36</h1>
</div>
</div>
</div>
</div>
<hr/>
{/* <div class="row placeholders mb-3">
<div class="col-6 col-sm-3 placeholder text-center">
<img src="//placehold.it/200/dddddd/fff?text=1" class="mx-auto img-fluid rounded-circle" alt="Generic placeholder thumbnail"/>
<h4>Responsive</h4>
<span class="text-muted">Device agnostic</span>
</div>
<div class="col-6 col-sm-3 placeholder text-center">
<img src="//placehold.it/200/e4e4e4/fff?text=2" class="mx-auto img-fluid rounded-circle" alt="Generic placeholder thumbnail"/>
<h4>Frontend</h4>
<span class="text-muted">UI / UX oriented</span>
</div>
<div class="col-6 col-sm-3 placeholder text-center">
<img src="//placehold.it/200/d6d6d6/fff?text=3" class="mx-auto img-fluid rounded-circle" alt="Generic placeholder thumbnail"/>
<h4>HTML5</h4>
<span class="text-muted">Standards-based</span>
</div>
<div class="col-6 col-sm-3 placeholder text-center">
<img src="//placehold.it/200/e0e0e0/fff?text=4" class="center-block img-fluid rounded-circle" alt="Generic placeholder thumbnail"/>
<h4>Framework</h4>
<span class="text-muted">CSS and JavaScript</span>
</div>
</div> */}
<div class="row ">
<div class="col-lg-7 col-md-6 col-sm-12">
<h5 class="mt-3 mb-3 text-secondary">
Check More Records of Employees
</h5>
<div class="table-responsive">
<table class="table table-striped">
<thead class="thead-light">
<tr>
<th>No</th>
<th>Label</th>
<th>Header</th>
<th>Column</th>
<th>Record Data</th>
</tr>
</thead>
<tbody>
{record.slice(0, 5).map((output)=>
<tr>
<td>{output.id}</td>
<td>{output.name}</td>
<td>{output.email}</td>
<td>{output.username}</td>
<td>{output.website}</td>
<td></td>
</tr>
)}
</tbody>
</table>
</div>
</div>
<div className="col-lg-5 col-md-6 col-sm-12 col-sm-offset-5">
<h4 className='title mt-3 mb-3 text-center text-secondary'>Data in Chart</h4>
<div className="mb-5" style={{height:"300px",width:"400px"}}><PieChart/> </div></div>
</div>
<a id="more"></a>
<hr/>
<h2 class="sub-header mt-5">Use card decks for equal height rows of cards</h2>
<div class="mb-3">
<div class="card-deck">
<div class="card card-inverse card-success text-center">
<div class="card-body">
<blockquote class="card-blockquote">
<p>It's really good news that the new Bootstrap 4 now has support for CSS 3 flexbox.</p>
<footer>Makes flexible layouts <cite title="Source Title">Faster</cite></footer>
</blockquote>
</div>
</div>
<div class="card card-inverse card-danger text-center">
<div class="card-body">
<blockquote class="card-blockquote">
<p>The Bootstrap 3.x element that was called "Panel" before, is now called a "Card".</p>
<footer>All of this makes more <cite title="Source Title">Sense</cite></footer>
</blockquote>
</div>
</div>
<div class="card card-inverse card-warning text-center">
<div class="card-body">
<blockquote class="card-blockquote">
<p>There are also some interesting new text classes for uppercase and capitalize.</p>
<footer>These handy utilities make it <cite title="Source Title">Easy</cite></footer>
</blockquote>
</div>
</div>
<div class="card card-inverse card-info text-center">
<div class="card-body">
<blockquote class="card-blockquote">
<p>If you want to use cool icons in Bootstrap 4, you'll have to find your own such as Font Awesome or Ionicons.</p>
<footer>The Glyphicons are not <cite title="Source Title">Included</cite></footer>
</blockquote>
</div>
</div>
</div>
</div>
<a id="flexbox"></a>
<hr/>
<h2 class="mt-5">Masonry-style grid columns</h2>
<h6>with Bootstrap 4 flexbox</h6>
<div class="card-columns mb-3">
<div class="card">
<img class="card-img-top img-fluid" src="//placehold.it/600x200/444/fff?text=..." alt="Card image cap"/>
<div class="card-body">
<h4 class="card-title">New XL Grid Tier</h4>
<p class="card-text">With screens getting smaller, Bootstrap 4 introduces a new grid breakpoint with the col-xl-* classes. This extra tier extends the media query range all the way down to 576 px. Eventhough the new XL tier would make one think it’s been added to support extra large screens, it’s actually the opposite.</p>
</div>
</div>
<div class="card card-body">
<blockquote class="card-blockquote">
<p>Bootstrap 4 will be lighter and easier to customize.</p>
<footer>
<small class="text-muted">
Someone famous like <cite title="Source Title">Mark Otto</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img class="card-img-top img-fluid" src="//placehold.it/600x200/bbb/fff?text=..." alt="Card image cap"/>
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card card-body card-inverse card-primary text-center">
<blockquote class="card-blockquote">
<p>Create masonry or Pinterest-style card layouts in Bootstrap 4.</p>
<footer>
<small>
Someone famous in <cite title="Source Title">Bootstrap</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card card-body text-center">
<h4 class="card-title">Clever heading</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 5 mins ago</small></p>
</div>
<div class="card">
<img class="card-img img-fluid" src="//placehold.it/600x200/777/fff?text=..." alt="Card image"/>
</div>
<div class="card card-body text-right">
<blockquote class="card-blockquote">
<p>There are also some interesting new text classes to uppercase or capitalize.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Bootstrap</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card card-body">
<h4 class="card-title">Responsive</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<div class="card">
<div class="card-body">
<ul class="list-unstyled">
<li class="text-capitalize"><code class="text-lowercase">text-capitalize</code> Capitalize each word</li>
<li class="text-uppercase"><code class="text-lowercase">text-uppercase</code> Uppercase text</li>
<li class="text-success"><code>text-success</code> Contextual colors for text</li>
<li><code>text-muted</code> <span class="text-muted">Lighten with muted</span></li>
<li><code>text-info</code> <span class="text-muted">Info text color</span></li>
<li><code>text-danger</code> <span class="text-muted">Danger text color</span></li>
<li><code>text-warning</code> <span class="text-muted">Warning text color</span></li>
<li><code>text-primary</code> <span class="text-primary">Primary text color</span></li>
</ul>
</div>
</div>
<div class="card card-body">
<h4 class="card-title">Heading</h4>
<p class="card-text">So now that you've seen some of what Bootstrap 4 has to offer, are you going to give it a try?</p>
<p class="card-text"><small class="text-muted">Last updated 12 mins ago</small></p>
</div>
</div>
<a id="layouts"></a>
<hr/>
<h2 class="sub-header mt-5">Interesting layouts and elements</h2>
<div class="row mb-3">
<div class="col-lg-6">
<div class="card mb-3">
<div class="card-header">
Bye .well, .panel & .thumbnail
</div>
<div class="card-body">
<h4 class="card-title">Replaced with .card</h4>
<p class="card-text">All of these Bootstrap 3.x components have been dropped entirely for the new card component.</p>
<button type="button" class="btn btn-secondary btn-lg">Large</button>
</div>
</div>
</div>
<div class="col-lg-6">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#home1" role="tab" data-toggle="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#profile1" role="tab" data-toggle="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#messages1" role="tab" data-toggle="tab">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#settings1" role="tab" data-toggle="tab">Settings</a>
</li>
</ul>
<div class="tab-content">
<br/>
<div role="tabpanel" class="tab-pane active" id="home1">
<h4>Home</h4>
<p>
1. These Bootstrap 4 Tabs work basically the same as the Bootstrap 3.x tabs.
<br/>
<br/>
<button class="btn btn-primary-outline btn-lg">Wow</button>
</p>
</div>
<div role="tabpanel" class="tab-pane" id="profile1">
<h4>Pro</h4>
<p>
2. Tabs are helpful to hide or collapse some addtional content.
</p>
</div>
<div role="tabpanel" class="tab-pane" id="messages1">
<h4>Messages</h4>
<p>
3. You can really put whatever you want into the tab pane.
</p>
</div>
<div role="tabpanel" class="tab-pane" id="settings1">
<h4>Settings</h4>
<p>
4. Some of the Bootstrap 3.x components like well and panel have been dropped for the new card component.
</p>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="col-lg-6">
<div class="card card-default card-body">
<ul id="tabsJustified" class="nav nav-tabs nav-justified">
<li class="nav-item">
<a class="nav-link" href="" data-target="#tab1" data-toggle="tab">List</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="" data-target="#tab2" data-toggle="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" data-target="#tab3" data-toggle="tab">More</a>
</li>
</ul>
<br/>
<div id="tabsJustifiedContent" class="tab-content">
<div class="tab-pane" id="tab1">
<div class="list-group">
<a href="" class="list-group-item"><span class="float-right label label-success">51</span> Home Link</a>
<a href="" class="list-group-item"><span class="float-right label label-success">8</span> Link 2</a>
<a href="" class="list-group-item"><span class="float-right label label-success">23</span> Link 3</a>
<a href="" class="list-group-item text-muted">Link n..</a>
</div>
</div>
<div class="tab-pane active" id="tab2">
<div class="row">
<div class="col-sm-7">
<h4>Profile Section</h4>
<p>Imagine creating this simple user profile inside a tab card.</p>
</div>
<div class="col-sm-5"><img src="//placehold.it/170" class="float-right img-responsive img-rounded"/></div>
</div>
<hr/>
<a href="javascript:;" class="btn btn-info btn-block">Read More Profiles</a>
<div class="spacer5"></div>
</div>
<div class="tab-pane" id="tab3">
<div class="list-group">
<a href="" class="list-group-item"><span class="float-right label label-info label-pill">44</span> <code>.panel</code> is now <code>.card</code></a>
<a href="" class="list-group-item"><span class="float-right label label-info label-pill">8</span> <code>.nav-justified</code> is deprecated</a>
<a href="" class="list-group-item"><span class="float-right label label-info label-pill">23</span> <code>.badge</code> is now <code>.label-pill</code></a>
<a href="" class="list-group-item text-muted">Message n..</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="headingOne" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion example
</div>
<div id="collapseOne" class="card-block collapse in" role="tabpanel" aria-labelledby="headingOne">
<p>This is a Bootstrap 4 accordion that uses the <code>.card</code> classes instead of <code>.panel</code>. The single-open section aspect is not working because the parent option (dependent on .panel) has not yet been finalized in BS 4 alpha. </p>
</div>
<div class="card-header" role="tab" id="headingTwo" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Mobile-first
</div>
<div id="collapseTwo" class="card-block collapse" role="tabpanel" aria-labelledby="headingTwo">
<p>Just like it's predecesor, Bootstrap 4 is mobile-first so that you start by designing for smaller devices such as smartphones and tablets, then proceed to laptop and desktop layouts.</p>
</div>
<div class="card-header" role="tab" id="headingThree" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Built for CSS3
</div>
<div id="collapseThree" class="card-block collapse" role="tabpanel" aria-labelledby="headingThree">
<p>Bootstrap employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles.</p>
</div>
</div>
</div>
<p class="mt-4">
<a href="/go/KrUO8QpyXP/bootstrao-4-dashboard" target="_ext">Get this Bootstrap 4 admin dashboard at Codeply</a>
</p>
</div>
</div>
</div>
)
}
export default Dashboard
src/PieChart.js
import React from 'react';
import { Pie } from 'react-chartjs-2';
const data = {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'pink',
'#17a2b8',
'#ffc107',
'rgb(87, 185, 96)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
],
borderWidth: 1,
},
],
};
const PieChart = () => (
<>
<div className='header'>
<div className='links'>
</div>
</div>
<Pie data={data} />
</>
);
export default PieChart;
Now We will call all the components in the App.js file
App.js
import React from 'react';
import Dashboard from './Dashboard';
import Navbar from './Navbar';
import Sidebar from './Sidebar';
function App(){
return (
<div>
<Navbar/>
<div class="container-fluid" id="main">
<div class="row row-offcanvas row-offcanvas-left">
<Sidebar/>
<Dashboard/>
</div>
</div>
</div>
);
}
export default App
Now run the code using npm start and your project will start running on PORT 3000.
http://localhost:3000/
.
Subscribe to My Programming YouTube Channel Before Downloading the code :
Download the Source Code : Admin Dashboard Code
See our More project in React and Nodejs
Send Emails with Node.js & React Js
Theme Color change in React JS
Records display in Material UI Table
Can we use this Admin Dashboard in React App ???