NiceSnippets.com
Bootstrap 4 Display Document Files List Page Design
We are giving you template design for document listing usign bootstrap 4. In this design you can display excel files,word files,pdf files,power point files,image files and zip files lists. ms office files list with icon in bootstap 4. in left sidebar you can display folder name list usign bootstrap 4. display files list with icon and title.
We allows to free snippets of how to display document with icon in bootstrap 4 , you can download full code of left sidebar folder name list layout. Here in this post i will give you example of display files list in html and css snippet and you will get simple code of html, css and jquery. In ms office files list with icon snippet i give you three tab with html, css and js, you can easily get code of In this design you can display excel files,word files,pdf files,power point files,image files and zip files lists layout.
<!DOCTYPE html>
<html>
<head>
<title>Document List</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="custom.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container main-section pt-20">
<div class="row">
<div class="col-lg-12 col-sm-12 col-12">
<div class="row">
<div class="col-lg-4 col-12 bg-white tab-head">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true"><i class="fa fa-file" aria-hidden="true"></i> Document</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false"><i class="fa fa-picture-o" aria-hidden="true"></i> Images</a>
</li>
</ul>
</div>
<div class="col-lg-12 main-tab">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="row m-0">
<div class="col-lg-4 document bg-white pt-3">
<span class="badge badge-success pl-2 pr-2">Excel</span>
<span class="badge badge-info pl-2 pr-2">Word</span>
<span class="badge badge-danger pl-2 pr-2">PowerPoint</span>
<span class="badge badge-warning text-white pl-2 pr-2">PDF</span>
<h5 class="pt-2 m-0"><strong>Folders</strong></h5>
<p class="pt-2 m-0"><i class="fa fa-folder pl-2 text-secondary pr-1" aria-hidden="true"></i> Web Project</p>
<p class="p-0 m-0"><i class="fa fa-folder pl-2 text-secondary pr-1" aria-hidden="true"></i> Presentaion File</p>
<p class="p-0 m-0"><i class="fa fa-folder pl-2 text-secondary pr-1" aria-hidden="true"></i> Books</p>
<p class="p-0 m-0"><i class="fa fa-folder pl-2 text-secondary pr-1" aria-hidden="true"></i> Contest</p>
<p class="p-0 m-0"><i class="fa fa-folder pl-2 text-secondary pr-1" aria-hidden="true"></i> Our Project</p>
<p class="p-0 m-0"><i class="fa fa-folder pl-2 text-secondary pr-1" aria-hidden="true"></i> Our Music</p>
<p class="p-0 m-0"><i class="fa fa-folder pl-2 text-secondary pr-1" aria-hidden="true"></i> Messenger Sounds</p>
<a href="#" class="btn btn-success btn-sm w-100 mt-2 mb-3"><i class="fa fa-plus" aria-hidden="true"></i> File Upload</a>
</div>
<div class="col-lg-8 document-left-list">
<div class="bg-white document-left-list-second p-3">
<div class="row">
<div class="col-lg-4 text-center">
<div class="document-list border">
<i class="fa fa-file-excel-o" aria-hidden="true"></i>
<p class="m-0 p-2 bg-danger text-white">Excel gatabase 2017 1.2 MB</p>
</div>
</div>
<div class="col-lg-4 text-center">
<div class="document-list border">
<i class="fa fa-file-excel-o" aria-hidden="true"></i>
<p class="m-0 p-2 bg-info text-white">Excel gatabase 2016 1.4 MB</p>
</div>
</div>
<div class="col-lg-4 text-center">
<div class="document-list border">
<i class="fa fa-file-word-o" aria-hidden="true"></i>
<p class="m-0 p-2 bg-primary text-white">Word gatabase 2017 1.2 MB</p>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-lg-4 text-center">
<div class="document-list border">
<i class="fa fa-file-powerpoint-o" aria-hidden="true"></i>
<p class="m-0 p-2 bg-info text-white">Powerpoint gatabase 2017 1.2 MB</p>
</div>
</div>
<div class="col-lg-4 text-center">
<div class="document-list border">
<i class="fa fa-file-pdf-o" aria-hidden="true"></i>
<p class="m-0 p-2 bg-warning text-white">pdf gatabase 2016 1.4 MB</p>
</div>
</div>
<div class="col-lg-4 text-center">
<div class="document-list border">
<i class="fa fa-file-excel-o" aria-hidden="true"></i>
<p class="m-0 p-2 bg-danger text-white">Excel gatabase 2012 1.5 MB</p>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-lg-4 text-center">
<div class="document-list border">
<i class="fa fa-file-powerpoint-o" aria-hidden="true"></i>
<p class="m-0 p-2 bg-danger text-white">Powerpoint gatabase 2011 1.8 MB</p>
</div>
</div>
<div class="col-lg-4 text-center">
<div class="document-list border">
<i class="fa fa-file-excel-o" aria-hidden="true"></i>
<p class="m-0 p-2 bg-success text-white">Excel gatabase 2016 1.4 MB</p>
</div>
</div>
<div class="col-lg-4 text-center">
<div class="document-list border">
<i class="fa fa-file-word-o" aria-hidden="true"></i>
<p class="m-0 p-2 bg-dark text-white">Word gatabase 2017 1.8 MB</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="row m-0">
<div class="col-lg-4 bg-white pt-4">
<h5 class="p-0 m-0"><strong>Folders</strong></h5>
<p class="pt-2 m-0"><i class="fa fa-folder pl-2 text-secondary pr-1" aria-hidden="true"></i> April meeting</p>
<p class="p-0 m-0"><i class="fa fa-folder pl-2 text-secondary pr-1" aria-hidden="true"></i> Applictaion presentaion</p>
<p class="p-0 m-0"><i class="fa fa-folder pl-2 text-secondary pr-1" aria-hidden="true"></i> Staff Profile Pictures</p>
<p class="p-0 m-0"><i class="fa fa-folder pl-2 text-secondary pr-1" aria-hidden="true"></i> Trip to Yosemite</p>
<a href="#" class="btn btn-success btn-sm w-100 mt-2 mb-3"><i class="fa fa-plus" aria-hidden="true"></i> File Upload</a>
</div>
<div class="col-lg-8 images-part">
<div class="bg-white p-3">
<div class="row mt-2">
<div class="col-lg-4 text-center">
<div class="images-list border">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTqZAjknpF5QsPYopf68cGKaMVUP_L8SkM4cqM-VIlk0-CVRtAh">
<p class="m-0 p-2 bg-secondary text-white">Developer</p>
</div>
</div>
<div class="col-lg-4 text-center">
<div class="images-list border">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTK9DkWY2BgUcJMNZXyAz6Cpmiq-AhC098wtOnBL-3foioVeyaI">
<p class="m-0 p-2 bg-secondary text-white">Designer</p>
</div>
</div>
<div class="col-lg-4 text-center">
<div class="images-list border">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTxK2Mc2iU_bKarcgB-RfJxzXHzpCjwhH1kLXnmuO0tASdC3Akm">
<p class="m-0 p-2 bg-secondary text-white">CEO</p>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-lg-4 text-center">
<div class="images-list border">
<img src="https://todayshomeinc.com/wp-content/uploads/2016/07/DenzelAvatar.jpg">
<p class="m-0 p-2 bg-secondary text-white">Manager</p>
</div>
</div>
<div class="col-lg-4 text-center">
<div class="images-list border">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTBgunBZqySqYTuWp-4phthaq0rNrOx4J5b8NnTBn-D4kiV1xZl">
<p class="m-0 p-2 bg-secondary text-white">Oprater</p>
</div>
</div>
<div class="col-lg-4 text-center">
<div class="images-list border">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT6yM6JujrHFOvFH9NvuV2lWnyXECBr1SWeF-I0tMdYmK942MXr">
<p class="m-0 p-2 bg-secondary text-white">Managment</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
body{
background-color:#eeeeee;
}
.main-tab{
padding: 0px;
}
.main-section{
font-family: 'Abel', sans-serif;
background-color: #d2d2d2;
padding:15px 15px 15px 30px;
}
.document-left-list,.images-part{
margin-top: -43px;
}
.document-left-list .document-list i{
font-size:45px;
padding:50px;
}
.document-left-list .document-list p{
height:60px;
}
.images-list img{
width: 100%;
height: 150px;
}
.nav-tabs,.nav-tabs:hover,.nav-tabs .nav-link{
border:none;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
border:none;
border-bottom:5px solid #5D4C46 !important;
}
@media only screen and (max-width: 600px) {
.document-left-list,.images-part{
padding-top:45px;
width: 100%;
}
.document-list,.images-list{
margin-top:10px;
}
}
