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 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-3">
<div class="mb-4">
<div class="small mb-3">Search</div>
<div class="input-group">
<input placeholder="Search for..." type="text" class="form-control"/>
<div class="input-group-append">
<button class="btn btn-secondary"><i class="fa fa-search"></i></button>
</div>
</div>
</div>
<div class="mb-4">
<div class="small mb-3">Favorites</div>
<ul class="nav flex-column nav-pills">
<li class="nav-item"><a href="#/" class="nav-link active"><i class="fa fa-fw fa-line-chart mr-2"></i>Overview</a></li>
<li class="nav-item"><a href="#/" class="nav-link"><i class="fa fa-fw fa-calendar-o mr-2"></i>Calendar</a></li>
</ul>
</div>
<div class="mb-4">
<div class="small mb-3">Projects</div>
<ul class="nav flex-column nav-pills">
<li class="nav-item"><a href="#/" class="d-flex nav-link"><i class="fa fa-fw fa-star-o align-self-center mr-2"></i>Analytics Redesign<span class="ml-auto align-self-center badge badge-secondary badge-pill">12</span></a></li>
<li class="nav-item"><a href="#/" class="d-flex nav-link"><i class="fa fa-fw fa-star-o align-self-center mr-2"></i>New Website<span class="ml-auto align-self-center badge badge-secondary badge-pill">4</span></a></li>
<li class="nav-item"><a href="#/" class="d-flex nav-link"><i class="fa fa-fw fa-star-o align-self-center mr-2"></i>Chart for Newsletter<span class="ml-auto align-self-center badge badge-secondary badge-pill">9</span></a></li>
<li class="nav-item"><a href="#/" class="nav-link"><i class="fa fa-fw fa-plus mr-2"></i>Add New Project</a></li>
</ul>
</div>
<div class="mb-4">
<div class="small mb-3">People</div>
<ul class="nav flex-column nav-pills">
<li class="nav-item">
<a href="#/" class="d-flex nav-link">
<div class="media">
<div class="mr-3 align-self-center media-left media-middle">
<div class="avatar-image avatar-image--loaded">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar1.png"/></div>
</div>
</div>
</div>
<div class="media-body">
<div class="mt-0">Alva Kuhic</div><span class="small">Florida, AR</span></div>
</div><i class="fa fa-fw fa-circle text-success ml-auto align-self-center ml-2"></i></a>
</li>
<li class="nav-item">
<a href="#/" class="d-flex nav-link">
<div class="media">
<div class="mr-3 align-self-center media-left media-middle">
<div class="avatar-image avatar-image--loaded">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar2.png"/></div>
</div>
</div>
</div>
<div class="media-body">
<div class="mt-0">Jeramy Gleason</div><span class="small">Indiana, AZ</span></div>
</div><i class="fa fa-fw fa-circle text-warning ml-auto align-self-center ml-2"></i></a>
</li>
<li class="nav-item">
<a href="#/" class="d-flex nav-link">
<div class="media">
<div class="mr-3 align-self-center media-left media-middle">
<div class="avatar-image avatar-image--loaded">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar3.png"/></div>
</div>
</div>
</div>
<div class="media-body">
<div class="mt-0">Travis Koch</div><span class="small">Tennessee, AZ</span></div>
</div><i class="fa fa-fw fa-circle text-danger ml-auto align-self-center ml-2"></i></a>
</li>
<li class="nav-item"><a href="#/" class="nav-link"><i class="fa fa-fw fa-plus mr-2"></i>Add New People</a></li>
</ul>
</div>
</div>
<div class="col-lg-9">
<div class="d-flex flex-column flex-md-row mb-3 mb-md-0">
<nav class="mr-auto d-flex align-items-center" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="active breadcrumb-item" aria-current="page"><a href="#/"><i class="fa fa-home"></i></a></li>
<li class="active breadcrumb-item" aria-current="page">Projects Grid</li>
</ol>
</nav>
<div role="toolbar" class="btn-toolbar">
<div role="group" class="mr-auto mr-md-2 btn-group"><a class="align-self-center btn btn-secondary" id="tooltipShowList" href="/apps/projects/list"><i class="fa-fw fa fa-bars"></i></a><a class="align-self-center btn btn-secondary active" id="tooltipShowGrid" href="/apps/projects/grid" aria-current="page"><i class="fa-fw fa fa-th-large"></i></a></div>
<div role="group" class="btn-group">
<button id="tooltipAddNew" class="align-self-center btn btn-primary"><i class="fa-fw fa fa-plus"></i></button>
</div>
</div>
</div>
<div class="card-columns">
<div class="Card_custom-card--border_5wJKy card">
<div class="card-body"><span class="mb-2 badge badge-success badge-pill">Active</span>
<div class="mb-2"><a href="#/" class="mr-2"><i class="fa fa-fw fa-star-o"></i></a><a href="/apps/tasks/grid">Polarised stable frame</a></div><span>Last Edited by: Caden Brakus <br/>Saturday, 12 September, 2018</span></div>
<div class="card-footer">
<div class="mb-2 progress" style={{/*height: 5px;*/}}>
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style={{/*width: 80%;*/}}></div>
</div>
<div>Tasks Completed:<span class="text-inverse">36/94</span></div>
</div>
<div class="card-footer">
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar7.png"/></div>
</div>
</div>
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar6.png"/></div>
</div>
</div>
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar1.png"/></div>
</div>
</div>
</div>
<div class="d-flex card-footer"><span class="align-self-center">20 Sep, Fri, 2018</span>
<div class="align-self-center ml-auto btn-group">
<button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link btn-sm"><i class="fa fa-gear"></i></button>
<div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-folder-open mr-2"></i>View</button>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-ticket mr-2"></i>Add Task</button>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-paperclip mr-2"></i>Add Files</button>
<div tabindex="-1" class="dropdown-divider"></div>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-trash mr-2"></i>Delete</button>
</div>
</div>
</div>
</div>
<div class="Card_custom-card--border_5wJKy card">
<div class="card-body"><span class="mb-2 badge badge-warning badge-pill">Waiting</span>
<div class="mb-2"><a href="#/" class="mr-2"><i class="fa fa-fw fa-star-o"></i></a><a href="/apps/tasks/grid">Synergized upward-trending info-mediaries</a></div><span>Last Edited by: Keely West <br/>Tuesday, 12 March, 2018</span></div>
<div class="card-footer">
<div class="mb-2 progress" style={{/*height: 5px;*/}}>
<div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style={{/*width: 30%;*/}}></div>
</div>
<div>Tasks Completed:<span class="text-inverse">36/94</span></div>
</div>
<div class="card-footer">
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar1.png"/></div>
</div>
</div>
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar5.png"/></div>
</div>
</div>
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar4.png"/></div>
</div>
</div>
</div>
<div class="d-flex card-footer"><span class="align-self-center">20 Sep, Fri, 2018</span>
<div class="align-self-center ml-auto btn-group">
<button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link btn-sm"><i class="fa fa-gear"></i></button>
<div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-folder-open mr-2"></i>View</button>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-ticket mr-2"></i>Add Task</button>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-paperclip mr-2"></i>Add Files</button>
<div tabindex="-1" class="dropdown-divider"></div>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-trash mr-2"></i>Delete</button>
</div>
</div>
</div>
</div>
<div class="Card_custom-card--border_5wJKy card">
<div class="card-body"><span class="mb-2 badge badge-danger badge-pill">Suspended</span>
<div class="mb-2"><a href="#/" class="mr-2"><i class="fa fa-fw fa-star-o"></i></a><a href="/apps/tasks/grid">Automated systemic benchmark</a></div><span>Last Edited by: Rod Koelpin <br/>Tuesday, 12 June, 2018</span></div>
<div class="card-footer">
<div class="mb-2 progress" style={{/*height: 5px;*/}}>
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style={{/*width: 90%;*/}}></div>
</div>
<div>Tasks Completed:<span class="text-inverse">36/94</span></div>
</div>
<div class="card-footer">
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar2.png"/></div>
</div>
</div>
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar3.png"/></div>
</div>
</div>
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar4.png"/></div>
</div>
</div>
</div>
<div class="d-flex card-footer"><span class="align-self-center">20 Sep, Fri, 2018</span>
<div class="align-self-center ml-auto btn-group">
<button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link btn-sm"><i class="fa fa-gear"></i></button>
<div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-folder-open mr-2"></i>View</button>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-ticket mr-2"></i>Add Task</button>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-paperclip mr-2"></i>Add Files</button>
<div tabindex="-1" class="dropdown-divider"></div>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-trash mr-2"></i>Delete</button>
</div>
</div>
</div>
</div>
<div class="Card_custom-card--border_5wJKy card">
<div class="card-body"><span class="mb-2 badge badge-secondary badge-pill">Paused</span>
<div class="mb-2"><a href="#/" class="mr-2"><i class="fa fa-fw fa-star-o"></i></a><a href="/apps/tasks/grid">Organized stable synergy</a></div><span>Last Edited by: Cedrick Dibbert <br/>Saturday, 12 November, 2018</span></div>
<div class="card-footer">
<div class="mb-2 progress" style={{/*height: 5px;*/}}>
<div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style={{/*width: 30%;*/}}></div>
</div>
<div>Tasks Completed:<span class="text-inverse">36/94</span></div>
</div>
<div class="card-footer">
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar7.png"/></div>
</div>
</div>
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar6.png"/></div>
</div>
</div>
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar5.png"/></div>
</div>
</div>
</div>
<div class="d-flex card-footer"><span class="align-self-center">20 Sep, Fri, 2018</span>
<div class="align-self-center ml-auto btn-group">
<button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link btn-sm"><i class="fa fa-gear"></i></button>
<div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-folder-open mr-2"></i>View</button>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-ticket mr-2"></i>Add Task</button>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-paperclip mr-2"></i>Add Files</button>
<div tabindex="-1" class="dropdown-divider"></div>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-trash mr-2"></i>Delete</button>
</div>
</div>
</div>
</div>
<div class="Card_custom-card--border_5wJKy card">
<div class="card-body"><span class="mb-2 badge badge-warning badge-pill">Waiting</span>
<div class="mb-2"><a href="#/" class="mr-2"><i class="fa fa-fw fa-star-o"></i></a><a href="/apps/tasks/grid">Progressive logistical circuit</a></div><span>Last Edited by: Lera Bailey <br/>Wednesday, 12 September, 2018</span></div>
<div class="card-footer">
<div class="mb-2 progress" style={{/*height: 5px;*/}}>
<div class="progress-bar" role="progressbar" aria-valuenow="28" aria-valuemin="0" aria-valuemax="100" style={{/*width: 28%;*/}}></div>
</div>
<div>Tasks Completed:<span class="text-inverse">36/94</span></div>
</div>
<div class="card-footer">
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar7.png"/></div>
</div>
</div>
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar6.png"/></div>
</div>
</div>
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar5.png"/></div>
</div>
</div>
</div>
<div class="d-flex card-footer"><span class="align-self-center">20 Sep, Fri, 2018</span>
<div class="align-self-center ml-auto btn-group">
<button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link btn-sm"><i class="fa fa-gear"></i></button>
<div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-folder-open mr-2"></i>View</button>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-ticket mr-2"></i>Add Task</button>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-paperclip mr-2"></i>Add Files</button>
<div tabindex="-1" class="dropdown-divider"></div>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-trash mr-2"></i>Delete</button>
</div>
</div>
</div>
</div>
<div class="Card_custom-card--border_5wJKy card">
<div class="card-body"><span class="mb-2 badge badge-danger badge-pill">Suspended</span>
<div class="mb-2"><a href="#/" class="mr-2"><i class="fa fa-fw fa-star-o"></i></a><a href="/apps/tasks/grid">Assimilated cohesive ability</a></div><span>Last Edited by: Nasir Ryan <br/>Thursday, 12 January, 2018</span></div>
<div class="card-footer">
<div class="mb-2 progress" style={{/*height: 5px;*/}}>
<div class="progress-bar" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100" style={{/*width: 57%;*/}}></div>
</div>
<div>Tasks Completed:<span class="text-inverse">36/94</span></div>
</div>
<div class="card-footer">
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar1.png"/></div>
</div>
</div>
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar2.png"/></div>
</div>
</div>
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar3.png"/></div>
</div>
</div>
</div>
<div class="d-flex card-footer"><span class="align-self-center">20 Sep, Fri, 2018</span>
<div class="align-self-center ml-auto btn-group">
<button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link btn-sm"><i class="fa fa-gear"></i></button>
<div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-folder-open mr-2"></i>View</button>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-ticket mr-2"></i>Add Task</button>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-paperclip mr-2"></i>Add Files</button>
<div tabindex="-1" class="dropdown-divider"></div>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-trash mr-2"></i>Delete</button>
</div>
</div>
</div>
</div>
<div class="Card_custom-card--border_5wJKy card">
<div class="card-body"><span class="mb-2 badge badge-danger badge-pill">Suspended</span>
<div class="mb-2"><a href="#/" class="mr-2"><i class="fa fa-fw fa-star-o"></i></a><a href="/apps/tasks/grid">Re-contextualized full-range alliance</a></div><span>Last Edited by: Verda Kassulke <br/>Sunday, 12 January, 2018</span></div>
<div class="card-footer">
<div class="mb-2 progress" style={{/*height: 5px;*/}}>
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style={{/*width: 90%;*/}}></div>
</div>
<div>Tasks Completed:<span class="text-inverse">36/94</span></div>
</div>
<div class="card-footer">
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar3.png"/></div>
</div>
</div>
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar4.png"/></div>
</div>
</div>
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar5.png"/></div>
</div>
</div>
</div>
<div class="d-flex card-footer"><span class="align-self-center">20 Sep, Fri, 2018</span>
<div class="align-self-center ml-auto btn-group">
<button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link btn-sm"><i class="fa fa-gear"></i></button>
<div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-folder-open mr-2"></i>View</button>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-ticket mr-2"></i>Add Task</button>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-paperclip mr-2"></i>Add Files</button>
<div tabindex="-1" class="dropdown-divider"></div>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-trash mr-2"></i>Delete</button>
</div>
</div>
</div>
</div>
<div class="Card_custom-card--border_5wJKy card">
<div class="card-body"><span class="mb-2 badge badge-success badge-pill">Active</span>
<div class="mb-2"><a href="#/" class="mr-2"><i class="fa fa-fw fa-star-o"></i></a><a href="/apps/tasks/grid">Future-proofed next generation process improvement</a></div><span>Last Edited by: Franz Koepp <br/>Friday, 12 August, 2018</span></div>
<div class="card-footer">
<div class="mb-2 progress" style={{/*height: 5px;*/}}>
<div class="progress-bar" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100" style={{/*width: 57%;*/}}></div>
</div>
<div>Tasks Completed:<span class="text-inverse">36/94</span></div>
</div>
<div class="card-footer">
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar2.png"/></div>
</div>
</div>
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar2.png"/></div>
</div>
</div>
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar2.png"/></div>
</div>
</div>
</div>
<div class="d-flex card-footer"><span class="align-self-center">20 Sep, Fri, 2018</span>
<div class="align-self-center ml-auto btn-group">
<button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link btn-sm"><i class="fa fa-gear"></i></button>
<div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-folder-open mr-2"></i>View</button>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-ticket mr-2"></i>Add Task</button>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-paperclip mr-2"></i>Add Files</button>
<div tabindex="-1" class="dropdown-divider"></div>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-trash mr-2"></i>Delete</button>
</div>
</div>
</div>
</div>
<div class="Card_custom-card--border_5wJKy card">
<div class="card-body"><span class="mb-2 badge badge-success badge-pill">Active</span>
<div class="mb-2"><a href="#/" class="mr-2"><i class="fa fa-fw fa-star-o"></i></a><a href="/apps/tasks/grid">Organic 4th generation hardware</a></div><span>Last Edited by: Savanah Gottlieb <br/>Friday, 12 October, 2018</span></div>
<div class="card-footer">
<div class="mb-2 progress" style={{/*height: 5px;*/}}>
<div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style={{/*width: 30%;*/}}></div>
</div>
<div>Tasks Completed:<span class="text-inverse">36/94</span></div>
</div>
<div class="card-footer">
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar2.png"/></div>
</div>
</div>
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar2.png"/></div>
</div>
</div>
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar2.png"/></div>
</div>
</div>
</div>
<div class="d-flex card-footer"><span class="align-self-center">20 Sep, Fri, 2018</span>
<div class="align-self-center ml-auto btn-group">
<button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link btn-sm"><i class="fa fa-gear"></i></button>
<div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-folder-open mr-2"></i>View</button>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-ticket mr-2"></i>Add Task</button>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-paperclip mr-2"></i>Add Files</button>
<div tabindex="-1" class="dropdown-divider"></div>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-trash mr-2"></i>Delete</button>
</div>
</div>
</div>
</div>
<div class="Card_custom-card--border_5wJKy card">
<div class="card-body"><span class="mb-2 badge badge-secondary badge-pill">Paused</span>
<div class="mb-2"><a href="#/" class="mr-2"><i class="fa fa-fw fa-star-o"></i></a><a href="/apps/tasks/grid">Diverse transitional strategy</a></div><span>Last Edited by: Flavio Bayer <br/>Friday, 12 October, 2018</span></div>
<div class="card-footer">
<div class="mb-2 progress" style={{/*height: 5px;*/}}>
<div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style={{/*width: 30%;*/}}></div>
</div>
<div>Tasks Completed:<span class="text-inverse">36/94</span></div>
</div>
<div class="card-footer">
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar2.png"/></div>
</div>
</div>
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar2.png"/></div>
</div>
</div>
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar2.png"/></div>
</div>
</div>
</div>
<div class="d-flex card-footer"><span class="align-self-center">20 Sep, Fri, 2018</span>
<div class="align-self-center ml-auto btn-group">
<button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link btn-sm"><i class="fa fa-gear"></i></button>
<div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-folder-open mr-2"></i>View</button>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-ticket mr-2"></i>Add Task</button>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-paperclip mr-2"></i>Add Files</button>
<div tabindex="-1" class="dropdown-divider"></div>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-trash mr-2"></i>Delete</button>
</div>
</div>
</div>
</div>
<div class="Card_custom-card--border_5wJKy card">
<div class="card-body"><span class="mb-2 badge badge-danger badge-pill">Suspended</span>
<div class="mb-2"><a href="#/" class="mr-2"><i class="fa fa-fw fa-star-o"></i></a><a href="/apps/tasks/grid">Phased high-level collaboration</a></div><span>Last Edited by: Hailie Sauer <br/>Monday, 12 April, 2018</span></div>
<div class="card-footer">
<div class="mb-2 progress" style={{/*height: 5px;*/}}>
<div class="progress-bar" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100" style={{/*width: 57%;*/}}></div>
</div>
<div>Tasks Completed:<span class="text-inverse">36/94</span></div>
</div>
<div class="card-footer">
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar2.png"/></div>
</div>
</div>
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar2.png"/></div>
</div>
</div>
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar2.png"/></div>
</div>
</div>
</div>
<div class="d-flex card-footer"><span class="align-self-center">20 Sep, Fri, 2018</span>
<div class="align-self-center ml-auto btn-group">
<button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link btn-sm"><i class="fa fa-gear"></i></button>
<div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-folder-open mr-2"></i>View</button>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-ticket mr-2"></i>Add Task</button>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-paperclip mr-2"></i>Add Files</button>
<div tabindex="-1" class="dropdown-divider"></div>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-trash mr-2"></i>Delete</button>
</div>
</div>
</div>
</div>
<div class="Card_custom-card--border_5wJKy card">
<div class="card-body"><span class="mb-2 badge badge-warning badge-pill">Waiting</span>
<div class="mb-2"><a href="#/" class="mr-2"><i class="fa fa-fw fa-star-o"></i></a><a href="/apps/tasks/grid">Up-sized optimizing system engine</a></div><span>Last Edited by: Devante Senger <br/>Sunday, 12 May, 2018</span></div>
<div class="card-footer">
<div class="mb-2 progress" style={{/*height: 5px;*/}}>
<div class="progress-bar" role="progressbar" aria-valuenow="28" aria-valuemin="0" aria-valuemax="100" style={{/*width: 28%;*/}}></div>
</div>
<div>Tasks Completed:<span class="text-inverse">36/94</span></div>
</div>
<div class="card-footer">
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar2.png"/></div>
</div>
</div>
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar2.png"/></div>
</div>
</div>
<div class="avatar-image avatar-image--loaded mr-2">
<div class="avatar avatar--md avatar-image__image">
<div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar2.png"/></div>
</div>
</div>
</div>
<div class="d-flex card-footer"><span class="align-self-center">20 Sep, Fri, 2018</span>
<div class="align-self-center ml-auto btn-group">
<button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link btn-sm"><i class="fa fa-gear"></i></button>
<div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-folder-open mr-2"></i>View</button>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-ticket mr-2"></i>Add Task</button>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-paperclip mr-2"></i>Add Files</button>
<div tabindex="-1" class="dropdown-divider"></div>
<button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-trash mr-2"></i>Delete</button>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center">
<nav class="" aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a href="#/" class="page-link" aria-label="Previous"><span aria-hidden="true"><i class="fa fa-fw fa-angle-left"></i></span><span class="sr-only">Previous</span></a></li>
<li class="page-item active"><a href="#/" class="page-link">1</a></li>
<li class="page-item"><a href="#/" class="page-link">2</a></li>
<li class="page-item"><a href="#/" class="page-link">3</a></li>
<li class="page-item"><a href="#/" class="page-link" aria-label="Next"><span aria-hidden="true"><i class="fa fa-fw fa-angle-right"></i></span><span class="sr-only">Next</span></a></li>
</ul>
</nav>
</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:#eee;
}
.avatar-image {
display: inline-block;
position: relative;
}
.mr-2, .mx-2 {
margin-right: .5rem!important;
}
.avatar-image--loaded .avatar-image__image {
visibility: visible;
}
.avatar--md {
width: 30px;
height: 30px;
}
.avatar-image__image {
position: relative;
visibility: hidden;
z-index: 0;
}
.avatar {
position: relative;
display: inline-block;
}
.avatar__content {
border-radius: 50%;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
z-index: 0;
-webkit-mask-image: -webkit-radial-gradient(#fff,#000);
}
.avatar-image__image img {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.card {
border: none;
-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
margin-bottom: 30px;
}