Shopping Cart

by Derek Anderson

HTML

<div class="container">
  <div class="row">
    <div class="col-xs-8">
      <div class="panel panel-info">
        <div class="panel-heading">
          <div class="panel-title">
            <div class="row">
              <div class="col-xs-6">
                <h5><span class="glyphicon glyphicon-shopping-cart"></span> Shopping Cart</h5>
              </div>
              <div class="col-xs-6">
                <button type="button" class="btn btn-primary btn-sm btn-block">
                  <span class="glyphicon glyphicon-share-alt"></span> Continue shopping
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="panel-body">
          <div class="row">
            <div class="col-xs-2"><img class="img-responsive" src="http://placehold.it/100x70">
            </div>
            <div class="col-xs-4">
              <h4 class="product-name"><strong>Product name</strong></h4>
              <h4><small>Product description</small></h4>
            </div>
            <div class="col-xs-6">
              <div class="col-xs-6 text-right">
                <h6><strong>25.00 <span class="text-muted">x</span></strong></h6>
              </div>
              <div class="col-xs-4">
                <input type="text" class="form-control input-sm" value="1">
              </div>
              <div class="col-xs-2">
                <button type="button" class="btn btn-link btn-xs">
                  <span class="glyphicon glyphicon-trash"> </span>
                </button>
              </div>
            </div>
          </div>
          <hr>
          <div class="row">
            <div class="col-xs-2"><img class="img-responsive" src="http://placehold.it/100x70">
            </div>
            <div class="col-xs-4">
              <h4 class="product-name"><strong>Product name</strong></h4>
              <h4><small>Product description</small></h4>
            </div>
            <div class="col-xs-6">
             ...

CSS

body {
  margin-top: 50px;
}

.glyphicon {
  margin-right: 10px;
}

.panel-body {
  padding: 0px;
}

.panel-body table tr td {
  padding-left: 15px
}

.panel-body .table {
  margin-bottom: 0px;
}