project list

This bootstrap snippet called "project list" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: project,list

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<section class="panel">
                  <header class="panel-heading">
                      All projects List
                      <span class="pull-right">
                          <button type="button" id="loading-btn" class="btn btn-warning btn-xs"><i class="fa fa-refresh"></i> Refresh</button>
                          <a href="#" class=" btn btn-success btn-xs"> Create New Project</a>
                      </span>
                  </header>
                  <div class="panel-body">
                      <div class="row">

                          <div class="col-md-12">
                              <div class="input-group"><input type="text" placeholder="Search Here" class="input-sm form-control"> <span class="input-group-btn">
                              <button type="button" class="btn btn-sm btn-success"> Go!</button> </span></div>
                          </div>
                      </div>
                  </div>
                  <table class="table table-hover p-table">
                      <thead>
                      <tr>
                          <th>Project Name</th>
                          <th>Team Member</th>
                          <th>Project Progress</th>
                          <th>Project Status</th>
                          <th>Custom</th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr>
                          <td class="p-name">
                              <a href="project_details.html">New Dashboard BS3</a>
                              <br>
                              <small>Created 27.11.2014</small>
                          </td>
                          <td class="p-team">
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar1.png"></a>
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar2.png"></a>
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar3.png"></a>
                          </td>
                          <td class="p-progress">
                              <div class="progress progress-xs">
                                  <div style="width: 87%;" class="progress-bar progress-bar-success"></div>
                              </div>
                              <small>87% Complete </small>
                          </td>
                          <td>
                              <span class="label label-primary">Active</span>
                          </td>
                          <td>
                              <a href="project_details.html" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> View </a>
                              <a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit </a>
                              <a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> Delete </a>
                          </td>
                      </tr>
                      <tr>
                          <td class="p-name">
                              <a href="project_details.html">Creative Portfolio</a>
                              <br>
                              <small>Created 21.10.2014</small>
                          </td>
                          <td class="p-team">
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar1.png"></a>
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar2.png"></a>
                          </td>
                          <td class="p-progress">
                              <div class="progress progress-xs">
                                  <div style="width: 65%;" class="progress-bar progress-bar-success"></div>
                              </div>
                              <small>65% Complete </small>
                          </td>
                          <td>
                              <span class="label label-primary">Active</span>
                          </td>
                          <td>
                              <a href="project_details.html" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> View </a>
                              <a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit </a>
                              <a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> Delete </a>
                          </td>
                      </tr>
                      <tr>
                          <td class="p-name">
                              <a href="project_details.html">Directory &amp; listing</a>
                              <br>
                              <small>Created 2.09.2014</small>
                          </td>
                          <td class="p-team">
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar1.png"></a>
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar2.png"></a>
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar3.png"></a>
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar3.png"></a>
                          </td>
                          <td class="p-progress">
                              <div class="progress progress-xs">
                                  <div style="width: 55%;" class="progress-bar progress-bar-success"></div>
                              </div>
                              <small>55% Complete </small>
                          </td>
                          <td>
                              <span class="label label-primary">Active</span>
                          </td>
                          <td>
                              <a href="project_details.html" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> View </a>
                              <a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit </a>
                              <a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> Delete </a>
                          </td>
                      </tr>
                      <tr>
                          <td class="p-name">
                              <a href="project_details.html">New Dashboard BS3</a>
                              <br>
                              <small>Created 27.11.2014</small>
                          </td>
                          <td class="p-team">
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar1.png"></a>
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar2.png"></a>
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar3.png"></a>
                          </td>
                          <td class="p-progress">
                              <div class="progress progress-xs">
                                  <div style="width: 87%;" class="progress-bar progress-bar-success"></div>
                              </div>
                              <small>87% Complete </small>
                          </td>
                          <td>
                              <span class="label label-primary">Active</span>
                          </td>
                          <td>
                              <a href="project_details.html" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> View </a>
                              <a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit </a>
                              <a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> Delete </a>
                          </td>
                      </tr>
                      <tr>
                          <td class="p-name">
                              <a href="project_details.html">Creative Portfolio</a>
                              <br>
                              <small>Created 21.10.2014</small>
                          </td>
                          <td class="p-team">
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar1.png"></a>
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar2.png"></a>
                          </td>
                          <td class="p-progress">
                              <div class="progress progress-xs">
                                  <div style="width: 65%;" class="progress-bar progress-bar-success"></div>
                              </div>
                              <small>65% Complete </small>
                          </td>
                          <td>
                              <span class="label label-primary">Active</span>
                          </td>
                          <td>
                              <a href="project_details.html" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> View </a>
                              <a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit </a>
                              <a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> Delete </a>
                          </td>
                      </tr>
                      <tr>
                          <td class="p-name">
                              <a href="project_details.html">Directory &amp; listing</a>
                              <br>
                              <small>Created 2.09.2014</small>
                          </td>
                          <td class="p-team">
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar1.png"></a>
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar2.png"></a>
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar3.png"></a>
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar4.png"></a>
                          </td>
                          <td class="p-progress">
                              <div class="progress progress-xs">
                                  <div style="width: 55%;" class="progress-bar progress-bar-success"></div>
                              </div>
                              <small>55% Complete </small>
                          </td>
                          <td>
                              <span class="label label-default">Inactive</span>
                          </td>
                          <td>
                              <a href="project_details.html" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> View </a>
                              <a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit </a>
                              <a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> Delete </a>
                          </td>
                      </tr>
                      <tr>
                          <td class="p-name">
                              <a href="project_details.html">New Dashboard BS3</a>
                              <br>
                              <small>Created 27.11.2014</small>
                          </td>
                          <td class="p-team">
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar1.png"></a>
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar2.png"></a>
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar3.png"></a>
                          </td>
                          <td class="p-progress">
                              <div class="progress progress-xs">
                                  <div style="width: 87%;" class="progress-bar progress-bar-success"></div>
                              </div>
                              <small>87% Complete </small>
                          </td>
                          <td>
                              <span class="label label-primary">Active</span>
                          </td>
                          <td>
                              <a href="project_details.html" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> View </a>
                              <a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit </a>
                              <a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> Delete </a>
                          </td>
                      </tr>
                      <tr>
                          <td class="p-name">
                              <a href="project_details.html">Creative Portfolio</a>
                              <br>
                              <small>Created 21.10.2014</small>
                          </td>
                          <td class="p-team">
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar1.png"></a>
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar2.png"></a>
                          </td>
                          <td class="p-progress">
                              <div class="progress progress-xs">
                                  <div style="width: 65%;" class="progress-bar progress-bar-success"></div>
                              </div>
                              <small>65% Complete </small>
                          </td>
                          <td>
                              <span class="label label-default">Inactive</span>
                          </td>
                          <td>
                              <a href="project_details.html" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> View </a>
                              <a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit </a>
                              <a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> Delete </a>
                          </td>
                      </tr>
                      <tr>
                          <td class="p-name">
                              <a href="project_details.html">Directory &amp; listing</a>
                              <br>
                              <small>Created 2.09.2014</small>
                          </td>
                          <td class="p-team">
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar1.png"></a>
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar2.png"></a>
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar3.png"></a>
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar4.png"></a>
                          </td>
                          <td class="p-progress">
                              <div class="progress progress-xs">
                                  <div style="width: 55%;" class="progress-bar progress-bar-success"></div>
                              </div>
                              <small>55% Complete </small>
                          </td>
                          <td>
                              <span class="label label-primary">Active</span>
                          </td>
                          <td>
                              <a href="project_details.html" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> View </a>
                              <a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit </a>
                              <a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> Delete </a>
                          </td>
                      </tr>
                      <tr>
                          <td class="p-name">
                              <a href="project_details.html">New Dashboard BS3</a>
                              <br>
                              <small>Created 27.11.2014</small>
                          </td>
                          <td class="p-team">
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar1.png"></a>
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar2.png"></a>
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar3.png"></a>
                          </td>
                          <td class="p-progress">
                              <div class="progress progress-xs">
                                  <div style="width: 87%;" class="progress-bar progress-bar-success"></div>
                              </div>
                              <small>87% Complete </small>
                          </td>
                          <td>
                              <span class="label label-primary">Active</span>
                          </td>
                          <td>
                              <a href="project_details.html" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> View </a>
                              <a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit </a>
                              <a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> Delete </a>
                          </td>
                      </tr>
                      <tr>
                          <td class="p-name">
                              <a href="project_details.html">Creative Portfolio</a>
                              <br>
                              <small>Created 21.10.2014</small>
                          </td>
                          <td class="p-team">
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar1.png"></a>
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar2.png"></a>
                          </td>
                          <td class="p-progress">
                              <div class="progress progress-xs">
                                  <div style="width: 65%;" class="progress-bar progress-bar-success"></div>
                              </div>
                              <small>65% Complete </small>
                          </td>
                          <td>
                              <span class="label label-primary">Active</span>
                          </td>
                          <td>
                              <a href="project_details.html" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> View </a>
                              <a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit </a>
                              <a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> Delete </a>
                          </td>
                      </tr>
                      <tr>
                          <td class="p-name">
                              <a href="project_details.html">Directory &amp; listing</a>
                              <br>
                              <small>Created 2.09.2014</small>
                          </td>
                          <td class="p-team">
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar1.png"></a>
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar2.png"></a>
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar3.png"></a>
                              <a href="#"><img alt="image" class="" src="https://bootdey.com/img/Content/avatar/avatar4.png"></a>
                          </td>
                          <td class="p-progress">
                              <div class="progress progress-xs">
                                  <div style="width: 55%;" class="progress-bar progress-bar-success"></div>
                              </div>
                              <small>55% Complete </small>
                          </td>
                          <td>
                              <span class="label label-primary">Active</span>
                          </td>
                          <td>
                              <a href="project_details.html" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> View </a>
                              <a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit </a>
                              <a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> Delete </a>
                          </td>
                      </tr>
                      </tbody>
                  </table>
              </section>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

body{margin-top:20px;}


.p-table th,
.p-table td {
    vertical-align: middle !important;
}


.p-team img {
    width: 35px;
    height:35px;
    border-radius: 4px;
}

.p-progress .progress {
    margin-bottom: 5px;
}

.p-name a {
    font-size:14px;
    /*font-weight:bold;*/
}

.bold {
    font-weight: bold;
}

.p-details .bio-row p span {
    width: auto;
}

.p-details .bio-row p span.bold {
    width: 100px;
}

.p-team a {
    display: inline-block;
}

.project-heading {
    font-size: 20px;
}

.mtop20 {
    margin-top: 20px;
}

.p-files li a {
    margin-bottom: 10px;
    color: #949494;
    display: block;
}

.p-files li i {
    padding-right: 10px;
    width: 20px;
}

.p-tag-list li {
    display: inline-block;
    margin:0 5px 7px 0;
}

.p-tag-list li a {
    display: inline-block;
    border: 1px solid #ddd;
    padding: 3px 10px;
    color:#797979;
    border-radius: 4px;
    font-size:12px;
}

.p-tag-list li a:hover {
    background: #ff6c60;
    border-color: #ff6c60;
    color:#fff;
}

.m-thumb img {
    width: 100%;
    border:1px solid #ddd;
}




.btn-default {
    background-color: #bec3c7;
    border-color: #bec3c7;
    color: #fff;
}

.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
    background-color: #b0b5b9;
    border-color: #b0b5b9;
    color: #fff;
}

.btn-primary ,
.btn-primary.disabled,
.btn-primary[disabled],
.btn-primary.disabled.active,
.btn-primary.active[disabled]{
    background-color: #41cac0;
    border-color: #41cac0;
    color: #FFFFFF;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary,
.btn-primary.disabled,
.btn-primary[disabled],
.btn-primary.disabled.active,
.btn-primary.active[disabled]{
    background-color: #39b2a9;
    border-color: #39b2a9;
    color: #FFFFFF;
}

.btn-success {
    background-color: #78CD51;
    border-color: #78CD51;
    color: #FFFFFF;
}

.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {
    background-color: #6dbb4a;
    border-color: #6dbb4a;
    color: #FFFFFF;
}

.btn-info {
    background-color: #58c9f3;
    border-color: #58c9f3;
    color: #FFFFFF;
}

.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info {
    background-color: #53bee6;
    border-color: #53BEE6;
    color: #FFFFFF;
}

.btn-warning {
    background-color: #f1c500;
    border-color: #f1c500;
    color: #FFFFFF;
}

.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open .dropdown-toggle.btn-warning {
    background-color: #e4ba00;
    border-color: #e4ba00;
    color: #FFFFFF;
}

.btn-danger {
    background-color: #ff6c60;
    border-color: #ff6c60;
    color: #FFFFFF;
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open .dropdown-toggle.btn-danger {
    background-color: #ec6459;
    border-color: #ec6459;
    color: #FFFFFF;
}


.btn-white {
    box-shadow: none !important;
}



.label {
    padding: 0.5em 0.8em;
}

.label-default {
    background-color: #a1a1a1;
}

.label-primary {
    background-color: #59ace2;
}

.label-success {
    background-color: #A9D86E;
}

.label-info {
    background-color: #8175c7;
}

.label-warning {
    background-color: #FCB322;
}

.label-danger {
    background-color: #FF6C60;
}

.label-inverse {
    background-color: #344860;
}


                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Mar 11th 2016, 18:53

Views: 4.1K

Rated 5/5 based on 1 reviews