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>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="content">
<div class="container">
<div class="row">
<div class="col-12">
<div class="card-box">
<div class="row">
<div class="col-lg-6 col-xl-6">
<h4 class="header-title m-b-30">My Files</h4>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-xl-2">
<div class="file-man-box"><a href="" class="file-close"><i class="fa fa-times-circle"></i></a>
<div class="file-img-box"><img src="https://coderthemes.com/highdmin/layouts/assets/images/file_icons/pdf.svg" alt="icon"/></div><a href="#/" class="file-download"><i class="fa fa-download"></i></a>
<div class="file-man-title">
<h5 class="mb-0 text-overflow">invoice_project.pdf</h5>
<p class="mb-0"><small>568.8 kb</small></p>
</div>
</div>
</div>
<div class="col-lg-3 col-xl-2">
<div class="file-man-box"><a href="" class="file-close"><i class="fa fa-times-circle"></i></a>
<div class="file-img-box"><img src="https://coderthemes.com/highdmin/layouts/assets/images/file_icons/bmp.svg" alt="icon"/></div><a href="#/" class="file-download"><i class="fa fa-download"></i></a>
<div class="file-man-title">
<h5 class="mb-0 text-overflow">Bmpfile.bmp</h5>
<p class="mb-0"><small>845.8 mb</small></p>
</div>
</div>
</div>
<div class="col-lg-3 col-xl-2">
<div class="file-man-box"><a href="" class="file-close"><i class="fa fa-times-circle"></i></a>
<div class="file-img-box"><img src="https://coderthemes.com/highdmin/layouts/assets/images/file_icons/psd.svg" alt="icon"/></div><a href="#/" class="file-download"><i class="fa fa-download"></i></a>
<div class="file-man-title">
<h5 class="mb-0 text-overflow">Photoshop_file.ps</h5>
<p class="mb-0"><small>684.8 kb</small></p>
</div>
</div>
</div>
<div class="col-lg-3 col-xl-2">
<div class="file-man-box"><a href="" class="file-close"><i class="fa fa-times-circle"></i></a>
<div class="file-img-box"><img src="https://coderthemes.com/highdmin/layouts/assets/images/file_icons/avi.svg" alt="icon"/></div><a href="#/" class="file-download"><i class="fa fa-download"></i></a>
<div class="file-man-title">
<h5 class="mb-0 text-overflow">Avifile.avi</h5>
<p class="mb-0"><small>5.9 mb</small></p>
</div>
</div>
</div>
<div class="col-lg-3 col-xl-2">
<div class="file-man-box"><a href="" class="file-close"><i class="fa fa-times-circle"></i></a>
<div class="file-img-box"><img src="https://coderthemes.com/highdmin/layouts/assets/images/file_icons/cad.svg" alt="icon"/></div><a href="#/" class="file-download"><i class="fa fa-download"></i></a>
<div class="file-man-title">
<h5 class="mb-0 text-overflow">Cadfile.cad</h5>
<p class="mb-0"><small>95.8 mb</small></p>
</div>
</div>
</div>
<div class="col-lg-3 col-xl-2">
<div class="file-man-box"><a href="" class="file-close"><i class="fa fa-times-circle"></i></a>
<div class="file-img-box"><img src="https://coderthemes.com/highdmin/layouts/assets/images/file_icons/txt.svg" alt="icon"/></div><a href="#/" class="file-download"><i class="fa fa-download"></i></a>
<div class="file-man-title">
<h5 class="mb-0 text-overflow">Mytextfile.txt</h5>
<p class="mb-0"><small>568.8 kb</small></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-xl-2">
<div class="file-man-box"><a href="" class="file-close"><i class="fa fa-times-circle"></i></a>
<div class="file-img-box"><img src="https://coderthemes.com/highdmin/layouts/assets/images/file_icons/eps.svg" alt="icon"/></div><a href="#/" class="file-download"><i class="fa fa-download"></i></a>
<div class="file-man-title">
<h5 class="mb-0 text-overflow">Epsfile.eps</h5>
<p class="mb-0"><small>568.8 kb</small></p>
</div>
</div>
</div>
<div class="col-lg-3 col-xl-2">
<div class="file-man-box"><a href="" class="file-close"><i class="fa fa-times-circle"></i></a>
<div class="file-img-box"><img src="https://coderthemes.com/highdmin/layouts/assets/images/file_icons/dll.svg" alt="icon"/></div><a href="#/" class="file-download"><i class="fa fa-download"></i></a>
<div class="file-man-title">
<h5 class="mb-0 text-overflow">Project_file.dll</h5>
<p class="mb-0"><small>684.3 kb</small></p>
</div>
</div>
</div>
<div class="col-lg-3 col-xl-2">
<div class="file-man-box"><a href="" class="file-close"><i class="fa fa-times-circle"></i></a>
<div class="file-img-box"><img src="https://coderthemes.com/highdmin/layouts/assets/images/file_icons/sql.svg" alt="icon"/></div><a href="#/" class="file-download"><i class="fa fa-download"></i></a>
<div class="file-man-title">
<h5 class="mb-0 text-overflow">Website_file.sql</h5>
<p class="mb-0"><small>457.8 kb</small></p>
</div>
</div>
</div>
<div class="col-lg-3 col-xl-2">
<div class="file-man-box"><a href="" class="file-close"><i class="fa fa-times-circle"></i></a>
<div class="file-img-box"><img src="https://coderthemes.com/highdmin/layouts/assets/images/file_icons/zip.svg" alt="icon"/></div><a href="#/" class="file-download"><i class="fa fa-download"></i></a>
<div class="file-man-title">
<h5 class="mb-0 text-overflow">invoice_project.pdf</h5>
<p class="mb-0"><small>568.8 kb</small></p>
</div>
</div>
</div>
<div class="col-lg-3 col-xl-2">
<div class="file-man-box"><a href="" class="file-close"><i class="fa fa-times-circle"></i></a>
<div class="file-img-box"><img src="https://coderthemes.com/highdmin/layouts/assets/images/file_icons/ps.svg" alt="icon"/></div><a href="#/" class="file-download"><i class="fa fa-download"></i></a>
<div class="file-man-title">
<h5 class="mb-0 text-overflow">invoice_project.pdf</h5>
<p class="mb-0"><small>568.8 kb</small></p>
</div>
</div>
</div>
<div class="col-lg-3 col-xl-2">
<div class="file-man-box"><a href="" class="file-close"><i class="fa fa-times-circle"></i></a>
<div class="file-img-box"><img src="https://coderthemes.com/highdmin/layouts/assets/images/file_icons/png.svg" alt="icon"/></div><a href="#/" class="file-download"><i class="fa fa-download"></i></a>
<div class="file-man-title">
<h5 class="mb-0 text-overflow">invoice_project.pdf</h5>
<p class="mb-0"><small>568.8 kb</small></p>
</div>
</div>
</div>
</div>
<div class="text-center mt-3">
<button type="button" class="btn btn-outline-danger w-md waves-effect waves-light"><i class="mdi mdi-refresh"></i> Load More Files</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default App;4. Now we need to add below code into our my-awesome-project/src/App.css file :
body{
margin-top:20px;
background:#DCDCDC;
}
.card-box {
padding: 20px;
border-radius: 3px;
margin-bottom: 30px;
background-color: #fff;
}
.file-man-box {
padding: 20px;
border: 1px solid #e3eaef;
border-radius: 5px;
position: relative;
margin-bottom: 20px
}
.file-man-box .file-close {
color: #f1556c;
position: absolute;
line-height: 24px;
font-size: 24px;
right: 10px;
top: 10px;
visibility: hidden
}
.file-man-box .file-img-box {
line-height: 120px;
text-align: center
}
.file-man-box .file-img-box img {
height: 64px
}
.file-man-box .file-download {
font-size: 32px;
color: #98a6ad;
position: absolute;
right: 10px
}
.file-man-box .file-download:hover {
color: #313a46
}
.file-man-box .file-man-title {
padding-right: 25px
}
.file-man-box:hover {
-webkit-box-shadow: 0 0 24px 0 rgba(0, 0, 0, .06), 0 1px 0 0 rgba(0, 0, 0, .02);
box-shadow: 0 0 24px 0 rgba(0, 0, 0, .06), 0 1px 0 0 rgba(0, 0, 0, .02)
}
.file-man-box:hover .file-close {
visibility: visible
}
.text-overflow {
text-overflow: ellipsis;
white-space: nowrap;
display: block;
width: 100%;
overflow: hidden;
}
h5 {
font-size: 15px;
}
