Rich-React

React js UI example. bs4 project grid

React js UI example and template, bs4 project grid! . Take a look at this UI example and see how it can enhance your project. Your can copy or download the code and use it in your project. Don't forget to browse our library of other free React Native templates for even more design and functionality inspiration. Happy coding!
Tags: grid,list,bs4,projects

Preview Code

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;
}

Similar snippets

Find more similar snippets using the following tags:grid,list,bs4,projects

React js template and ui example light user grid

light user grid

View
React js template and ui example bs4 todo list

bs4 todo list

View
React js template and ui example blog page

blog page

View
React js template and ui example contacts lab

contacts lab

View
React js template and ui example bs5 dark footer

bs5 dark footer

View
React js template and ui example User list page

User list page

View
React js template and ui example blue login

blue login

View
React js template and ui example Products View List

Products View List

View