Project Detail

This bootstrap snippet called "Project Detail" 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

HTML code

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container-fluid primary-content">
	<!-- PRIMARY CONTENT HEADING -->
	<div class="primary-content-heading clearfix">
		<h2>PROJECT TITLE</h2>
        <hr style="border:1px solid #fff">
		<div class="sticky-content pull-right">
			<div class="btn-group btn-dropdown">
				<button type="button" class="btn btn-default btn-sm btn-favorites" data-toggle="dropdown"><i class="fa fa-android-star"></i> Favorites</button>
				<ul class="dropdown-menu dropdown-menu-right list-inline">
					<li><a href="#"><i class="fa fa-pie-graph"></i> <span>Statistics</span></a></li>
					<li><a href="#"><i class="fa fa-email"></i> <span>Inbox</span></a></li>
					<li><a href="#"><i class="fa fa-chatboxes"></i> <span>Chat</span></a></li>
					<li><a href="#"><i class="fa fa-help-circled"></i> <span>Help</span></a></li>
					<li><a href="#"><i class="fa fa-gear-a"></i> <span>Settings</span></a></li>
					<li><a href="#"><i class="fa fa-help-buoy"></i> <span>Support</span></a></li>
				</ul>
			</div>
			<button type="button" class="btn btn-default btn-sm btn-quick-task" data-toggle="modal" data-target="#quick-task-modal"><i class="fa fa-edit"></i> Quick Task</button>
		    <br>
            <br>
		</div>
		<!-- quick task modal -->
		<div class="modal fade" id="quick-task-modal" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
						<h4 class="modal-title" id="myModalLabel">Quick Task</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" role="form">
							<div class="form-group">
								<label for="task-title" class="control-label sr-only">Title</label>
								<div class="col-sm-12">
									<input type="text" class="form-control" id="task-title" placeholder="Title">
								</div>
							</div>
							<div class="form-group">
								<label class="control-label sr-only">Description</label>
								<div class="col-sm-12">
									<textarea class="form-control" name="task-description" rows="5" cols="30" placeholder="Description"></textarea>
								</div>
							</div>
							<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
							<button type="button" class="btn btn-primary">Save Task</button>
						</form>
					</div>
				</div>
			</div>
		</div>
		<!-- end quick task modal -->
	</div>
	<!-- END PRIMARY CONTENT HEADING -->
	<div class="row">
		<div class="col-md-8">
			<div class="project-section general-info">
				<h3>General Info</h3>
				<button type="button" class="btn btn-sm btn-default pull-right"><i class="fa fa-compose"></i> Edit Project</button>
				<p>Rapidiously monetize orthogonal platforms with 24/7 convergence. Uniquely create error-free alignments for customized users. Credibly facilitate just in time benefits rather than user friendly imperatives. Continually promote extensible process improvements whereas virtual. Enthusiastically pontificate proactive infrastructures vis-a-vis value-added products. Enthusiastically coordinate pandemic platforms rather than team building best practices. Globally facilitate plug-and-play materials and interoperable interfaces. Enthusiastically.</p>
				<div class="row">
					<div class="col-sm-9">
						<dl class="dl-horizontal">
							<dt>Date:</dt>
							<dd>20-09-2014 - 20-12-2014</dd>
							<dt>Duration:</dt>
							<dd>90 days <span class="text-muted"><small>(50 days remaining)</small></span></dd>
							<dt>Client:</dt>
							<dd><a href="#">ZenArt</a></dd>
							<dt>Priority:</dt>
							<dd><span class="label label-danger">HIGH</span></dd>
							<dt>Status:</dt>
							<dd><span class="label label-success">ACTIVE</span></dd>
							<dt>Team:</dt>
							<dd>
								<ul class="list-inline team-list">
									<li>
										<img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="img-circle" alt="Avatar">
										<p><a href="#"><strong>Antonius</strong></a></p>
										<span class="text-muted">Project Leader</span>
									</li>
									<li>
										<img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="img-circle" alt="Avatar">
										<p><a href="#"><strong>Michael</strong></a></p>
										<span class="text-muted">Art Director</span>
									</li>
									<li>
										<img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="img-circle" alt="Avatar">
										<p><a href="#"><strong>Stella Ray</strong></a></p>
										<span class="text-muted">Account Executive</span>
									</li>
									<li>
										<img src="https://bootdey.com/img/Content/avatar/avatar4.png" class="img-circle" alt="Avatar">
										<p><a href="#"><strong>Jane Doe</strong></a></p>
										<span class="text-muted">Marketing</span>
									</li>
									<li>
										<img src="https://bootdey.com/img/Content/avatar/avatar5.png" class="img-circle" alt="Avatar">
										<p><a href="#"><strong>Jason</strong></a></p>
										<span class="text-muted">Operational</span>
									</li>
									<li class="team-add">
										<i class="fa fa-person"></i>
										<button type="button" class="btn btn-sm btn-default"><i class="fa fa-plus-circled"></i> Add</button>
									</li>
								</ul>
							</dd>
						</dl>
					</div>
					<div class="col-sm-3">
						<div class="status-chart project-progress bottom-30px">
							<div class="pie-chart" data-percent="60"><span class="percent">60%</span><canvas height="100" width="100"></canvas></div>
							<span class="chart-title">OVERALL PROGRESS</span>
						</div>
					</div>
				</div>
			</div>
			<div class="project-section activity">
				<h3>Activity</h3>
				<ul class="list-unstyled project-activity-list">
					<li>
						<div class="media activity-item">
							<i class="fa fa-checkmark-circled pull-left text-success"></i>
							<div class="media-body">
								<p class="activity-title">All project tasks are on schedule</p>
								<small class="text-muted">2m ago</small>
							</div>
						</div>
					</li>
					<li>
						<div class="media activity-item">
							<a href="#" class="pull-left">
								<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Avatar" class="media-object avatar">
							</a>
							<div class="media-body">
								<p class="activity-title"><a href="#">Michael</a> has achieved 80% of his completed tasks</p>
								<small class="text-muted">36m ago</small>
							</div>
							<div class="btn-group pull-right activity-actions">
								<button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
									<i class="fa fa-ios-arrow-down"></i>
									<span class="sr-only">Toggle Dropdown</span>
								</button>
								<ul class="dropdown-menu dropdown-menu-right" role="menu">
									<li><a href="#">Message Michael</a></li>
									<li><a href="#">Assign Task</a></li>
								</ul>
							</div>
						</div>
					</li>
					<li>
						<div class="media activity-item">
							<i class="fa fa-unlocked pull-left text-danger"></i>
							<div class="media-body">
								<p class="activity-title">You have unsecure file permission on this project. Go to <a href="">File Manager</a> to fix it</p>
								<small class="text-muted">1h ago</small>
							</div>
						</div>
					</li>
					<li>
						<div class="media activity-item">
							<a href="#" class="pull-left">
								<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="Avatar" class="media-object avatar">
							</a>
							<div class="media-body">
								<p class="activity-title"><a href="#">Jason</a> has been added to the team</p>
								<small class="text-muted">2h ago</small>
							</div>
							<div class="btn-group pull-right activity-actions">
								<button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
									<i class="fa fa-ios-arrow-down"></i>
									<span class="sr-only">Toggle Dropdown</span>
								</button>
								<ul class="dropdown-menu dropdown-menu-right" role="menu">
									<li><a href="#">Message Jason</a></li>
									<li><a href="#">Assign Task</a></li>
								</ul>
							</div>
						</div>
					</li>
					<li>
						<div class="media activity-item">
							<i class="fa fa-file-word-o pull-left"></i>
							<div class="media-body">
								<p class="activity-title">New file <a href="#">Project Proposalv2.docx</a> has been uploaded by <a href="#">Antonius</a></p>
								<small class="text-muted">3h ago</small>
							</div>
						</div>
					</li>
					<li>
						<div class="media activity-item">
							<i class="fa fa-printer pull-left text-warning"></i>
							<div class="media-body">
								<p class="activity-title">You have <a href="#">pending documents</a> on the printer server</p>
								<small class="text-muted">23h ago</small>
							</div>
						</div>
					</li>
					<li>
						<div class="media activity-item">
							<i class="fa fa-flag pull-left text-success"></i>
							<div class="media-body">
								<p class="activity-title">Project: <a href="#">Phase 1</a> has been flagged as completed by <a href="#">Antonius</a></p>
								<small class="text-muted">Yesterday</small>
							</div>
						</div>
					</li>
					<li>
						<div class="media activity-item">
							<a href="#" class="pull-left">
								<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="Avatar" class="media-object avatar">
							</a>
							<div class="media-body">
								<p class="activity-title"><a href="#">Jane Doe</a> has updated file <a href="#">Marketing Campaign.docx</a></p>
								<small class="text-muted">Yesterday</small>
								<div class="activity-attachment">
									<div class="well well-sm">
										<strong>Revision Note:</strong>
										<p>Professionally evolve corporate services without ethical leadership. Proactively re-engineer client-focused infrastructures before alternative potentialities. Competently predominate just in time e-tailers for leveraged solutions.</p>
									</div>
								</div>
							</div>
							<div class="btn-group pull-right activity-actions">
								<button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
									<i class="fa fa-ios-arrow-down"></i>
									<span class="sr-only">Toggle Dropdown</span>
								</button>
								<ul class="dropdown-menu dropdown-menu-right" role="menu">
									<li><a href="#">Message Jane Doe</a></li>
									<li><a href="#">Assign Task</a></li>
								</ul>
							</div>
						</div>
					</li>
				</ul>
				<button type="button" class="btn btn-default center-block"><i class="fa fa-ios-refresh"></i> Load more</button>
			</div>
		</div>
		<div class="col-md-4">
			<!-- MY TODO LIST -->
			<div class="widget">
				<div class="widget-header clearfix">
					<h3><i class="fa fa-calendar"></i> <span>MY TODO LIST</span></h3>
					<div class="btn-group widget-header-toolbar">
						<a href="#" title="Expand/Collapse" class="btn btn-link btn-toggle-expand"><i class="fa fa-ios-arrow-up"></i></a>
						<a href="#" title="Remove" class="btn btn-link btn-remove"><i class="fa fa-ios-close-empty"></i></a>
					</div>
				</div>
				<div class="widget-content">
					<ul class="list-unstyled simple-todo-list">
						<li>
							<label class="fancy-checkbox">
								<input type="checkbox" checked="checked">
								<span class="todo-text">Upload new revision</span>
							</label>
						</li>
						<li>
							<label class="fancy-checkbox">
								<input type="checkbox">
								<span class="todo-text">Responsive test</span>
							</label>
						</li>
						<li>
							<label class="fancy-checkbox">
								<input type="checkbox" checked="checked">
								<span class="todo-text">Cross-browser check</span>
							</label>
						</li>
						<li>
							<label class="fancy-checkbox">
								<input type="checkbox">
								<span class="todo-text">Social media research</span>
							</label>
						</li>
						<li>
							<label class="fancy-checkbox">
								<input type="checkbox">
								<span class="todo-text">Conduct A/B test</span>
							</label>
						</li>
					</ul>
				</div>
			</div>
			<!-- END MY TODO LIST -->
			<!-- RECENT FILES -->
			<div class="widget">
				<div class="widget-header clearfix">
					<h3><i class="fa fa-document"></i> <span>RECENT FILES</span></h3>
					<div class="btn-group widget-header-toolbar">
						<a href="#" title="Expand/Collapse" class="btn btn-link btn-toggle-expand"><i class="fa fa-ios-arrow-up"></i></a>
						<a href="#" title="Remove" class="btn btn-link btn-remove"><i class="fa fa-ios-close-empty"></i></a>
					</div>
				</div>
				<div class="widget-content">
					<ul class="fa-ul recent-file-list bottom-30px">
						<li><i class="fa-li fa fa-file-pdf-o"></i><a href="#">Project Requirements.pdf</a></li>
						<li><i class="fa-li fa fa-file-word-o"></i><a href="#">[DRAFT] System Specifications.docx</a></li>
						<li><i class="fa-li fa fa-file-picture-o"></i><a href="#">Marketing Content-v2.jpg</a></li>
						<li><i class="fa-li fa fa-file-zip-o"></i><a href="#">All-files-backup.zip</a></li>
					</ul>
					<button type="button" class="btn btn-sm btn-primary"><i class="fa fa-upload"></i> Upload</button> <a href="#" class="btn btn-sm btn-default"><i class="fa fa-folder"></i> See all files</a>
				</div>
			</div>
			<!-- END RECENT FILES -->
		</div>
	</div>
</div>

CSS code

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


body {
    background-image: url('http://demo.thedevelovers.com/dashboard/queenadmin-1.2/assets/img/gray_jean.png?1353438653');
    background-repeat: repeat;
    min-height: 1585px;
}

/*------------------------------------------------*/
/*    Page: Project details
/*------------------------------------------------*/
.project-section {
  margin-bottom: 30px;
}
.project-section h3 {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  margin-top: 0;
}
.project-section.activity h3 {
  margin-bottom: 0;
}
.project-section dl {
  margin-top: 20px;
  margin-bottom: 0;
}
.project-section dl dd {
  margin-bottom: 10px;
}
@media screen and (min-width: 768px) {
  .project-section dl.dl-horizontal dt {
    width: 95px;
    margin-bottom: 10px;
  }
  .project-section dl.dl-horizontal dd {
    margin-left: 105px;
    margin-bottom: 0;
  }
}
.project-section ul.team-list {
  margin-top: 10px;
}
.project-section ul.team-list > li {
  text-align: center;
  margin-bottom: 15px;
  padding: 0 10px;
}
.project-section ul.team-list > li img {
  width: 40px;
  margin-bottom: 8px;
}
.project-section ul.team-list > li p {
  margin-bottom: 0;
  line-height: 1;
}
.project-section ul.team-list > li span {
  font-size: 10px;
}
.project-section ul.team-list > li.team-add > i {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
  margin-bottom: 17px;
  width: 40px;
  height: 40px;
  font-size: 28px;
  background-color: #ccc;
  color: inherit;
}
.project-section ul.team-list > li.team-add .btn {
  position: relative;
  top: -7px;
}

ul.project-activity-list > li {
  border-top: 1px dashed #CCC;
}
ul.project-activity-list > li:first-child {
  border-top: none;
}
ul.project-activity-list > li .activity-item .avatar, ul.project-activity-list > li .activity-item > i {
  width: 24px;
}
ul.project-activity-list > li .activity-item > i {
  font-size: 24px;
}

.project-progress {
  margin-top: 20px;
}
.project-progress .pie-chart {
  width: 100px;
}
.project-progress .pie-chart .percent {
  line-height: 100px;
}
.project-progress .percent, .project-progress .chart-title {
  color: inherit;
}


/* widgets */
.widget {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border-width: 1px;
  border-style: solid;
  margin-bottom: 20px;
  background-color: #fff;
  border-color: #d0d0d0;
}
.widget .widget-header h3, .widget.widget-no-header h3 {
  margin-top: 0;
  font-size: 14px;
  color: #6a6a6a;
}
.widget.widget-transparent {
  border: none;
  background: transparent;
}
.widget .widget-header {
  padding: 0 10px;
  border-bottom: 1px solid #fff;
  background-color: #e9e9e9;
}
.widget .widget-header h3 {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  margin-bottom: 0;
  line-height: 40px;
  float: left;
}
@media screen and (max-width: 480px) {
  .widget .widget-header h3 {
    display: block;
    float: none;
  }
}
.widget .widget-header h3 i {
  width: 18px;
  padding: 10px 0;
  font-size: 16px;
  color: #6A6A6A;
}
.widget .widget-header .btn-group > a,
.widget .widget-header .btn-group .dropdown-toggle .icon {
  color: #838383;
}
.widget .widget-header .btn-group > a:hover, .widget .widget-header .btn-group > a:focus,
.widget .widget-header .btn-group .dropdown-toggle .icon:hover,
.widget .widget-header .btn-group .dropdown-toggle .icon:focus {
  color: #505050;
}
.widget .widget-header .widget-header-toolbar {
  float: right;
  width: auto;
  margin-left: 15px;
}
@media screen and (max-width: 480px) {
  .widget .widget-header .widget-header-toolbar {
    display: block;
    position: initial;
  }
}
.widget .widget-header .widget-header-toolbar.btn-group {
  top: 5px;
}
@media screen and (max-width: 480px) {
  .widget .widget-header .widget-header-toolbar.btn-group > .btn {
    top: -5px;
  }
}
.widget .widget-header .widget-header-toolbar .label {
  position: relative;
  top: 11px;
  padding: 5px;
  font-size: 85%;
}
@media screen and (max-width: 480px) {
  .widget .widget-header .widget-header-toolbar .label {
    top: 0;
  }
}
.widget .widget-header .widget-header-toolbar .label i {
  font-size: 14px;
}
.widget .widget-header .widget-header-toolbar .btn-xs {
  top: 5px;
}
.widget .widget-header .widget-header-toolbar .btn-link {
  padding: 0 0 0 15px;
}
.widget .widget-header .widget-header-toolbar .btn-link i {
  font-size: 28px;
  line-height: 1;
}
.widget .widget-header .widget-header-toolbar .btn-link:first-child {
  padding-left: 0;
}
.widget .widget-header .widget-header-toolbar .progress {
  width: 150px;
  position: relative;
  top: 19px;
}
@media screen and (max-width: 480px) {
  .widget .widget-header .widget-header-toolbar .progress {
    top: 0;
  }
}
.widget .widget-header .widget-header-toolbar .progress .progress-bar {
  font-size: 10px;
  line-height: 1.5;
}
.widget .widget-header .nav-tabs {
  border-bottom: none;
}
.widget .widget-header .nav-tabs > li > a {
  height: 41px;
}
.widget .widget-header .nav-tabs > li > a, .widget .widget-header .nav-tabs > li > a:hover, .widget .widget-header .nav-tabs > li > a:focus {
  border-top: none;
  border-bottom: none;
}
.widget .widget-header .nav-justified > li > a {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}
.widget .widget-header .nav-justified > li:first-child > a {
  -moz-border-radius-topleft: 2px;
  -webkit-border-top-left-radius: 2px;
  border-top-left-radius: 2px;
}
.widget .widget-header .nav-justified > li:last-child > a {
  -moz-border-radius-topright: 2px;
  -webkit-border-top-right-radius: 2px;
  border-top-right-radius: 2px;
  margin-right: -1px;
}
.widget .widget-content {
  padding: 20px;
}
.widget .widget-footer {
  padding: 7px 10px;
  background-color: #e9e9e9;
}
.widget .widget-footer .progress {
  margin-bottom: 0;
}

.widget-header-toolbar .pagination-sm {
  margin-bottom: 0;
  margin-top: 5px;
}
.widget-header-toolbar .onoffswitch > label:first-child {
  margin-bottom: 0;
  top: 3px;
}
.widget-header-toolbar .fancy-checkbox {
  margin-bottom: 0;
  position: relative;
  top: 4px;
}
.widget-header-toolbar .fancy-checkbox input[type="checkbox"] + span {
  margin-right: 0;
}
.widget-header-toolbar .badge {
  margin-top: 10px;
}
@media screen and (max-width: 480px) {
  .widget-header-toolbar .badge {
    margin-top: 0;
  }
}


                                    

Similar snippets

Bootstrap snippet Project view details page

Project view details page

View

Bootstrap snippet project list

project list

View

Bootstrap snippet list projects

list projects

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Apr 3rd 2016, 22:34

Views: 3.4K

Rated 5/5 based on 1 reviews