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

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

<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>

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 {
    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;
  }
}


                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Apr 3rd 2016, 22:34

Views: 3.2K

Rated 5/5 based on 1 reviews