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 p-0">
<a href="#/" class="btn btn-primary float-right mt-n1"><i class="fas fa-plus"></i> New project</a>
<h1 class="h3 mb-3">Projects</h1>
<div class="row">
<div class="col-12 col-md-6 col-lg-3">
<div class="card">
<div class="card-header px-4 pt-4">
<div class="card-actions float-right">
<div class="dropdown show">
<a href="#/" data-toggle="dropdown" data-display="static">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal align-middle"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#/">Action</a>
<a class="dropdown-item" href="#/">Another action</a>
<a class="dropdown-item" href="#/">Something else here</a>
</div>
</div>
</div>
<h5 class="card-title mb-0">Landing page redesign</h5>
<div class="badge bg-success my-2">Finished</div>
</div>
<div class="card-body px-4 pt-2">
<p>Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque
sed ipsum.</p>
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="rounded-circle mr-1" alt="Avatar" width="28" height="28"/>
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="rounded-circle mr-1" alt="Avatar" width="28" height="28"/>
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="rounded-circle mr-1" alt="Avatar" width="28" height="28"/>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-4 pb-4">
<p class="mb-2 font-weight-bold">Progress <span class="float-right">100%</span></p>
<div class="progress progress-sm">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style={{/*width: 100%;*/}}>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card">
<div class="card-header px-4 pt-4">
<div class="card-actions float-right">
<div class="dropdown show">
<a href="#/" data-toggle="dropdown" data-display="static">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal align-middle"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#/">Action</a>
<a class="dropdown-item" href="#/">Another action</a>
<a class="dropdown-item" href="#/">Something else here</a>
</div>
</div>
</div>
<h5 class="card-title mb-0">Company posters</h5>
<div class="badge bg-warning my-2">In progress</div>
</div>
<div class="card-body px-4 pt-2">
<p>Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat
at massa.</p>
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="rounded-circle mr-1" alt="Avatar" width="28" height="28"/>
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="rounded-circle mr-1" alt="Avatar" width="28" height="28"/>
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="rounded-circle mr-1" alt="Avatar" width="28" height="28"/>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-4 pb-4">
<p class="mb-2 font-weight-bold">Progress <span class="float-right">75%</span></p>
<div class="progress progress-sm">
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style={{/*width: 75%;*/}}>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card">
<div class="card-header px-4 pt-4">
<div class="card-actions float-right">
<div class="dropdown show">
<a href="#/" data-toggle="dropdown" data-display="static">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal align-middle"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#/">Action</a>
<a class="dropdown-item" href="#/">Another action</a>
<a class="dropdown-item" href="#/">Something else here</a>
</div>
</div>
</div>
<h5 class="card-title mb-0">Product page design</h5>
<div class="badge bg-success my-2">Finished</div>
</div>
<div class="card-body px-4 pt-2">
<p>Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque
sed ipsum.</p>
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="rounded-circle mr-1" alt="Avatar" width="28" height="28"/>
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="rounded-circle mr-1" alt="Avatar" width="28" height="28"/>
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="rounded-circle mr-1" alt="Avatar" width="28" height="28"/>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-4 pb-4">
<p class="mb-2 font-weight-bold">Progress <span class="float-right">100%</span></p>
<div class="progress progress-sm">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style={{/*width: 100%;*/}}>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card">
<div class="card-header px-4 pt-4">
<div class="card-actions float-right">
<div class="dropdown show">
<a href="#/" data-toggle="dropdown" data-display="static">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal align-middle"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#/">Action</a>
<a class="dropdown-item" href="#/">Another action</a>
<a class="dropdown-item" href="#/">Something else here</a>
</div>
</div>
</div>
<h5 class="card-title mb-0">Upgrade CRM software</h5>
<div class="badge bg-warning my-2">In progress</div>
</div>
<div class="card-body px-4 pt-2">
<p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam
ultrices mauris.</p>
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="rounded-circle mr-1" alt="Avatar" width="28" height="28"/>
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="rounded-circle mr-1" alt="Avatar" width="28" height="28"/>
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="rounded-circle mr-1" alt="Avatar" width="28" height="28"/>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-4 pb-4">
<p class="mb-2 font-weight-bold">Progress <span class="float-right">50%</span></p>
<div class="progress progress-sm">
<div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style={{/*width: 50%;*/}}>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card">
<img class="card-img-top" src="https://www.bootdey.com/image/350x280/87CEFA/000000" alt="Unsplash"/>
<div class="card-header px-4 pt-4">
<div class="card-actions float-right">
<div class="dropdown show">
<a href="#/" data-toggle="dropdown" data-display="static">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal align-middle"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#/">Action</a>
<a class="dropdown-item" href="#/">Another action</a>
<a class="dropdown-item" href="#/">Something else here</a>
</div>
</div>
</div>
<h5 class="card-title mb-0">Fix form validation</h5>
<div class="badge bg-warning my-2">In progress</div>
</div>
<div class="card-body px-4 pt-2">
<p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam
ultrices mauris.</p>
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="rounded-circle mr-1" alt="Avatar" width="28" height="28"/>
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="rounded-circle mr-1" alt="Avatar" width="28" height="28"/>
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="rounded-circle mr-1" alt="Avatar" width="28" height="28"/>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-4 pb-4">
<p class="mb-2 font-weight-bold">Progress <span class="float-right">65%</span></p>
<div class="progress progress-sm">
<div class="progress-bar" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style={{/*width: 65%;*/}}>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card">
<img class="card-img-top" src="https://www.bootdey.com/image/350x280/FFB6C1/000000" alt="Unsplash"/>
<div class="card-header px-4 pt-4">
<div class="card-actions float-right">
<div class="dropdown show">
<a href="#/" data-toggle="dropdown" data-display="static">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal align-middle"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#/">Action</a>
<a class="dropdown-item" href="#/">Another action</a>
<a class="dropdown-item" href="#/">Something else here</a>
</div>
</div>
</div>
<h5 class="card-title mb-0">New company logo</h5>
<div class="badge bg-danger my-2">On hold</div>
</div>
<div class="card-body px-4 pt-2">
<p>Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque
sed ipsum.</p>
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="rounded-circle mr-1" alt="Avatar" width="28" height="28"/>
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="rounded-circle mr-1" alt="Avatar" width="28" height="28"/>
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="rounded-circle mr-1" alt="Avatar" width="28" height="28"/>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-4 pb-4">
<p class="mb-2 font-weight-bold">Progress <span class="float-right">20%</span></p>
<div class="progress progress-sm">
<div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style={{/*width: 20%;*/}}>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card">
<img class="card-img-top" src="https://www.bootdey.com/image/350x280/20B2AA/000000" alt="Unsplash"/>
<div class="card-header px-4 pt-4">
<div class="card-actions float-right">
<div class="dropdown show">
<a href="#/" data-toggle="dropdown" data-display="static">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal align-middle"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#/">Action</a>
<a class="dropdown-item" href="#/">Another action</a>
<a class="dropdown-item" href="#/">Something else here</a>
</div>
</div>
</div>
<h5 class="card-title mb-0">Upgrade to latest Maps API</h5>
<div class="badge bg-success my-2">Finished</div>
</div>
<div class="card-body px-4 pt-2">
<p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam
ultrices mauris.</p>
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="rounded-circle mr-1" alt="Avatar" width="28" height="28"/>
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="rounded-circle mr-1" alt="Avatar" width="28" height="28"/>
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="rounded-circle mr-1" alt="Avatar" width="28" height="28"/>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-4 pb-4">
<p class="mb-2 font-weight-bold">Progress <span class="float-right">100%</span></p>
<div class="progress progress-sm">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style={{/*width: 100%;*/}}>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card">
<img class="card-img-top" src="https://www.bootdey.com/image/350x280/87CEFA/000000" alt="Unsplash"/>
<div class="card-header px-4 pt-4">
<div class="card-actions float-right">
<div class="dropdown show">
<a href="#/" data-toggle="dropdown" data-display="static">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal align-middle"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#/">Action</a>
<a class="dropdown-item" href="#/">Another action</a>
<a class="dropdown-item" href="#/">Something else here</a>
</div>
</div>
</div>
<h5 class="card-title mb-0">Refactor backend templates</h5>
<div class="badge bg-danger my-2">On hold</div>
</div>
<div class="card-body px-4 pt-2">
<p>Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat
at massa.</p>
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="rounded-circle mr-1" alt="Avatar" width="28" height="28"/>
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="rounded-circle mr-1" alt="Avatar" width="28" height="28"/>
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="rounded-circle mr-1" alt="Avatar" width="28" height="28"/>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-4 pb-4">
<p class="mb-2 font-weight-bold">Progress <span class="float-right">0%</span></p>
<div class="progress progress-sm">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style={{/*width: 0%;*/}}>
</div>
</div>
</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{margin-top:20px;
background-color: #f7f7fc;
}
.card-subtitle, .card-title {
font-weight: 400;
}
.card-title {
font-size: .875rem;
color: #495057;
}
.card {
margin-bottom: 24px;
box-shadow: 0 0 0.875rem 0 rgba(33,37,41,.05);
}
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: initial;
border: 0 solid transparent;
border-radius: .25rem;
}
.card-body {
flex: 1 1 auto;
padding: 1.25rem;
}
.card-header:first-child {
border-radius: .25rem .25rem 0 0;
}
.card-header {
border-bottom-width: 1px;
}
.pb-0 {
padding-bottom: 0!important;
}
.card-header {
padding: 1rem 1.25rem;
margin-bottom: 0;
background-color: #fff;
border-bottom: 0 solid transparent;
}
