Bootstrap snippet: projects progress

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: projects,progress,list



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div id="content" class="content container-fluid" style="min-height: 682px;"> <div class="row"> <div class="col-lg-12"> <div class="page-header"> <h2>Projects</h2> <ol class="breadcrumb"> <li><a href="index.html">Home</a></li> <li>Other pages</li> <li class="active">Projects</li> </ol> </div> </div> </div> <form> <div class="projects-search"> <input type="text" class="search-input" placeholder="Search projects"> <button class="btn search-btn waves waves-effect waves-float" type="button"><i class="fa fa-search"></i></button> </div> </form> <div class="row"> <div class="col-lg-12"> <div class="content-box project-wrapper"> <div class="project-item"> <div class="status-desktop pull-left"> <span class="active">Active</span> </div> <div class="project-box white-bg pull-left"> <div class="status-mobile pull-left"> <span class="active">Active</span> </div> <div class="project-tools mobile-tools text-right pull-left"> <a href="#"><i class="fa fa-eye"></i></a> <a href="#"><i class="fa fa-pencil"></i></a> <a href="#"><i class="fa fa-close"></i></a> </div> <div class="project-name pull-left"> <div class="name">Contract with Zelden Company</div> <div class="created">Created <span>14.08.2014</span></div> </div> <div class="project-progress pull-left"> <span class="task-title">Completion with: <span>40%</span></span> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"> </div> </div> </div> <div class="pull-left text-center"> <div class="resp-avatars"> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="avatar" class="img-circle"> <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="avatar" class="img-circle"> <img src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="avatar" class="img-circle"> </div> </div> <div class="project-tools desktop-tools text-right pull-left"> <a href="#"><i class="fa fa-eye"></i></a> <a href="#"><i class="fa fa-pencil"></i></a> <a href="#"><i class="fa fa-close"></i></a> </div> <div class="clearfix"></div> </div> </div> <div class="project-item"> <div class="status-desktop pull-left"> <span class="active">Active</span> </div> <div class="project-box white-bg pull-left"> <div class="status-mobile pull-left"> <span class="active">Active</span> </div> <div class="project-tools mobile-tools text-right pull-left"> <a href="#"><i class="fa fa-eye"></i></a> <a href="#"><i class="fa fa-pencil"></i></a> <a href="#"><i class="fa fa-close"></i></a> </div> <div class="project-name pull-left"> <div class="name">Develop chat app</div> <div class="created">Created <span>14.08.2014</span></div> </div> <div class="project-progress pull-left"> <span class="task-title">Stage completed: <span>35%/20%/10%</span></span> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-success" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width: 35%;"> </div> <div class="progress-bar progress-bar-striped progress-bar-warning" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"> </div> <div class="progress-bar progress-bar-striped progress-bar-danger" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%;"> </div> </div> </div> <div class="pull-left text-center"> <div class="resp-avatars"> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="avatar" class="img-circle"> <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="avatar" class="img-circle"> <img src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="avatar" class="img-circle"> </div> </div> <div class="project-tools desktop-tools text-right pull-left"> <a href="#"><i class="fa fa-eye"></i></a> <a href="#"><i class="fa fa-pencil"></i></a> <a href="#"><i class="fa fa-close"></i></a> </div> <div class="clearfix"></div> </div> </div> <div class="project-item"> <div class="status-desktop pull-left"> <span class="active">Active</span> </div> <div class="project-box white-bg pull-left"> <div class="status-mobile pull-left"> <span class="active">Active</span> </div> <div class="project-tools mobile-tools text-right pull-left"> <a href="#"><i class="fa fa-eye"></i></a> <a href="#"><i class="fa fa-pencil"></i></a> <a href="#"><i class="fa fa-close"></i></a> </div> <div class="project-name pull-left"> <div class="name">Develop Android app</div> <div class="created">Created <span>14.08.2014</span></div> </div> <div class="project-progress pull-left"> <span class="task-title">Completion with: <span>49%</span></span> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-info" role="progressbar" aria-valuenow="49" aria-valuemin="0" aria-valuemax="100" style="width: 49%;"> </div> </div> </div> <div class="pull-left text-center"> <div class="resp-avatars"> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="avatar" class="img-circle"> <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="avatar" class="img-circle"> </div> </div> <div class="project-tools desktop-tools text-right pull-left"> <a href="#"><i class="fa fa-eye"></i></a> <a href="#"><i class="fa fa-pencil"></i></a> <a href="#"><i class="fa fa-close"></i></a> </div> <div class="clearfix"></div> </div> </div> <div class="project-item"> <div class="status-desktop pull-left"> <span class="unactive">Completed</span> </div> <div class="project-box white-bg pull-left"> <div class="status-mobile pull-left"> <span class="unactive">Completed</span> </div> <div class="project-tools mobile-tools text-right pull-left"> <a href="#"><i class="fa fa-eye"></i></a> <a href="#"><i class="fa fa-pencil"></i></a> <a href="#"><i class="fa fa-close"></i></a> </div> <div class="project-name pull-left"> <div class="name">Contract with support</div> <div class="created">Created <span>14.08.2014</span></div> </div> <div class="project-progress pull-left"> <span class="task-title">Completion with: <span>100%</span></span> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-info" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"> </div> </div> </div> <div class="pull-left text-center"> <div class="resp-avatars"> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="avatar" class="img-circle"> </div> </div> <div class="project-tools desktop-tools text-right pull-left"> <a href="#"><i class="fa fa-eye"></i></a> <a href="#"><i class="fa fa-pencil"></i></a> <a href="#"><i class="fa fa-close"></i></a> </div> <div class="clearfix"></div> </div> </div> <div class="project-item"> <div class="status-desktop pull-left"> <span class="active">Active</span> </div> <div class="project-box white-bg pull-left"> <div class="status-mobile pull-left"> <span class="active">Active</span> </div> <div class="project-tools mobile-tools text-right pull-left"> <a href="#"><i class="fa fa-eye"></i></a> <a href="#"><i class="fa fa-pencil"></i></a> <a href="#"><i class="fa fa-close"></i></a> </div> <div class="project-name pull-left"> <div class="name">New product line</div> <div class="created">Created <span>14.08.2014</span></div> </div> <div class="project-progress pull-left"> <span class="task-title">Completion with: <span>85%</span></span> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-danger" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;"> </div> </div> </div> <div class="pull-left text-center"> <div class="resp-avatars"> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="avatar" class="img-circle"> <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="avatar" class="img-circle"> <img src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="avatar" class="img-circle"> </div> </div> <div class="project-tools desktop-tools text-right pull-left"> <a href="#"><i class="fa fa-eye"></i></a> <a href="#"><i class="fa fa-pencil"></i></a> <a href="#"><i class="fa fa-close"></i></a> </div> <div class="clearfix"></div> </div> </div> </div> </div> </div> <!--Footer--> <div class="footer">© 2015 Copyright</div> </div>
.content { margin: 0; padding: 20px 30px 66px; position: relative; background: #F1F4F5; -webkit-transition: margin, .4s; transition: margin, .4s; } .email-container, .contacts-search, .projects-search { position: relative; } .inbox-head, .contacts-search, .projects-search { min-height: 80px; padding: 20px 0; } .email-container .search-input, .contacts-search .search-input, .projects-search .search-input { width: -webkit-calc(100% - 60px); width: calc(100% - 60px); } .inbox-head .search-input, .contacts-search .search-input, .projects-search .search-input { border: 1px solid #E7EBEC; -webkit-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; -webkit-box-shadow: none; box-shadow: none; color: #8a8a8a; float: left; height: 40px; padding: 0 10px; } .email-container .search-btn, .contacts-search .search-btn, .projects-search .search-btn { width: 60px; } .inbox-head .search-btn, .contacts-search .search-btn, .projects-search .search-btn { background: #63A8EB; border: none; -webkit-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; color: #fff; height: 40px; padding: 0 20px; -webkit-box-shadow: none; box-shadow: none; } .project-wrapper { background: transparent !important; } .content-box { position: relative; background: #fff; -webkit-border-radius: 3px; border-radius: 3px; margin-bottom: 30px; overflow: hidden; -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05); } .project-item { margin-bottom: 12px; display: inline-block; width: 100%; position: relative; } .project-item .status-desktop, .project-item .status-mobile { margin-top: 20px; font-weight: 400; width: 100px; } .project-box { -webkit-border-radius: 3px; border-radius: 3px; padding: 10px; width: -webkit-calc(100% - 100px); width: calc(100% - 100px); } .white-bg { background: #fff !important; } .project-item .status-desktop .active:before, .project-item .status-mobile .active:before { background: #42b382; } .project-item .status-desktop span:before, .project-item .status-mobile span:before { content: ""; display: inline-block; width: 15px; height: 15px; -webkit-border-radius: 50%; border-radius: 50%; margin-right: 8px; vertical-align: middle; } .project-item .status-desktop .unactive:before, .project-item .status-mobile .unactive:before { background: #E9585B; } .project-item .status-mobile { position: absolute; top: -5px; left: 10px; display: none; background: #fff; -webkit-border-radius: 3px; border-radius: 3px; color: #76828E; padding: 5px; } .project-item .status-desktop, .project-item .status-mobile { margin-top: 20px; font-weight: 400; width: 100px; } .project-box .mobile-tools { display: none; } .project-box .project-tools { margin-top: 5px; } .project-box > div { width: 25%; } .project-box .project-tools a { font-size: 20px; margin-right: 12px; color: #76828E; } .project-box .project-progress { margin-top: 4px; } .project-box > div { width: 25%; } .project-box .project-progress .progress { -webkit-border-radius: 3px; border-radius: 3px; margin-bottom: 0; } .project-box .project-tools { margin-top: 5px; } .project-box .project-tools a { font-size: 20px; margin-right: 12px; color: #76828E; } .resp-avatars img{ width:40px; height:40px; }
Dey-Dey

projects progress

Dey-Dey
  Apr 6th, 07:36
2.3K Views