Order history

This bootstrap snippet called "Order history" 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: list,user,detail

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 rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<div class="panel panel-default panel-order">
  <div class="panel-heading">
      <strong>Order history</strong>
      <div class="btn-group pull-right">
          <div class="btn-group">
			<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
			  Filter history <i class="fa fa-filter"></i>
			</button>
			<ul class="dropdown-menu dropdown-menu-right">
			  <li><a href="#">Approved orders</a></li>
			  <li><a href="#">Pending orders</a></li>
			</ul>
		  </div>
		</div>
  </div>

<div class="panel-body">
  	<div class="row">
	  <div class="col-md-1"><img src="https://bootdey.com/img/Content/user_3.jpg" class="media-object img-thumbnail"></div>
	  <div class="col-md-11">
		<div class="row">
		  <div class="col-md-12">
			<div class="pull-right"><label class="label label-danger">rejected</label> </div>
			<span><strong>Order name</strong></span> <span class="label label-info">group name</span><br>
			Quantity : 2, cost: $323.13 <br>
			<a data-placement="top" class="btn btn-success btn-xs glyphicon glyphicon-ok" href="#" title="View"></a>
			<a data-placement="top" class="btn btn-danger  btn-xs glyphicon glyphicon-trash" href="#" title="Danger"></a>
			<a data-placement="top" class="btn btn-info  btn-xs glyphicon glyphicon-usd" href="#" title="Danger"></a>
		  </div>
		  <div class="col-md-12">
			order made on: 05/31/2014 by <a href="#">Jane Doe </a>
		  </div>
		</div>
	  </div>
	</div>

    <div class="row">
	  <div class="col-md-1"><img src="https://bootdey.com/img/Content/user_1.jpg" class="media-object img-thumbnail"></div>
	  <div class="col-md-11">
		<div class="row">
		  <div class="col-md-12">
			<div class="pull-right"><label class="label label-info">pending</label> </div>
			<span><strong>Order name</strong></span> <span class="label label-info">group name</span><br>
			Quantity : 12, cost: $12623.13<br>
			<a data-placement="top" class="btn btn-success btn-xs glyphicon glyphicon-ok" href="#" title="View"></a>
			<a data-placement="top" class="btn btn-danger  btn-xs glyphicon glyphicon-trash" href="#" title="Danger"></a>
			<a data-placement="top" class="btn btn-info  btn-xs glyphicon glyphicon-usd" href="#" title="Danger"></a>
		  </div>
		  <div class="col-md-12">
			order made on: 06/12/2014 by <a href="#">Jane Doe </a>
		  </div>
		</div>
	  </div>
	</div>

    <div class="row">
	  <div class="col-md-1"><img src="https://bootdey.com/img/Content/user_3.jpg" class="media-object img-thumbnail"></div>
	  <div class="col-md-11">
		<div class="row">
		  <div class="col-md-12">
			<div class="pull-right"><label class="label label-success">Approved</label> </div>
			<span><strong>Order name</strong></span> <span class="label label-info">group name</span><br>
			Quantity : 4, cost: $523.13<br>
			<a data-placement="top" class="btn btn-success btn-xs glyphicon glyphicon-ok" href="#" title="View"></a>
			<a data-placement="top" class="btn btn-danger  btn-xs glyphicon glyphicon-trash" href="#" title="Danger"></a>
			<a data-placement="top" class="btn btn-info  btn-xs glyphicon glyphicon-usd" href="#" title="Danger"></a>
		  </div>
		  <div class="col-md-12">
			order made on: 06/20/2014 by <a href="#">Jane Doe</a>
		  </div>
		</div>
	  </div>
	</div>

    <div class="row">
	  <div class="col-md-1"><img src="https://bootdey.com/img/Content/user_2.jpg" class="media-object img-thumbnail"></div>
	  <div class="col-md-11">
		<div class="row">
		  <div class="col-md-12">
			<div class="pull-right"><label class="label label-info">pending</label> </div>
			<span><strong>Order name</strong></span> <span class="label label-info">group name</span><br>
			Quantity : 4, cost: $523.13<br>
			<a data-placement="top" class="btn btn-success btn-xs glyphicon glyphicon-ok" href="#" title="View"></a>
			<a data-placement="top" class="btn btn-danger  btn-xs glyphicon glyphicon-trash" href="#" title="Danger"></a>
			<a data-placement="top" class="btn btn-info  btn-xs glyphicon glyphicon-usd" href="#" title="Danger"></a>
		  </div>
		  <div class="col-md-12">
			order made on: 06/20/2014 by <a href="#">Jane Doe</a>
		  </div>
		</div>
	  </div>
	</div>

</div>
<div class="panel-footer">Put here some note for example: bootdey si a gallery of free bootstrap snippets</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


.panel-order .row {
	border-bottom: 1px solid #ccc;
}
.panel-order .row:last-child {
	border: 0px;
}
.panel-order .row .col-md-1  {
	text-align: center;
	padding-top: 15px;
}
.panel-order .row .col-md-1 img {
	width: 50px;
	max-height: 50px;
}
.panel-order .row .row {
	border-bottom: 0;
}
.panel-order .row .col-md-11 {
	border-left: 1px solid #ccc;
}
.panel-order .row .row .col-md-12 {
	padding-top: 7px;
	padding-bottom: 7px; 
}
.panel-order .row .row .col-md-12:last-child {
	font-size: 11px; 
	color: #555;  
	background: #efefef;
}
.panel-order .btn-group {
	margin: 0px;
	padding: 0px;
}
.panel-order .panel-body {
	padding-top: 0px;
	padding-bottom: 0px;
}
.panel-order .panel-deading {
	margin-bottom: 0;
}                    
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.2.0

Created: Jul 20th 2014, 16:48

Views: 5.7K

Rated 4/5 based on 3 reviews