bootstrap cards

by Tamara Frankel

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<main>
<div class="container-fluid">
<div class="row">
<div class="card-deck-wrapper">
  <div class="card-deck">
<div class="col-sm-6">
<div class="thumbnail">
<div class="card">
  <img class="card-img-top img-responsive" img src="peppers.jpeg" alt="peppers">
  <div class="card-block">
    <h4 class="card-title">$1.00</h4>
    <p></p>
    <select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
<p><button type="button" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>ADD TO CART</button></p>
  </div>
</div>
</div>
<div class="col-sm-6">
<div class="thumbnail">
<div class="card">
  <img class="card-img-top img-responsive" img src="rasp.jpeg" alt="raspberries">
  <div class="card-block">
    <h4 class="card-title">$2.50 <br><small>$5.00 Total</small></h4>
    <p></p>
            <select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
<p><button type="button" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>ADD TO CART</button></p>
  </div>
</div>
</div>

<div class="col-sm-6">
<div class="thumbnail">
<div class="card">
  <img class="card-img-top img-responsive" img src="kiwis.jpg" alt="kiwis">
  <div class="card-block">
    <h4 class="card-title">$.30 <br><small>$2.40 Total</small></h4>
    <p></p>
    <select class="form-control">
  <option>1</option>
 ...

CSS

.card-title { float: left;}

.form-control { text-align: right;
                max-width: 5em;
                float: right;
                padding-bottom: 25px;
                margin-bottom: 20px;
}

JavaScript

/* <img src="peppers.jpeg" alt="peppers" class="img-responsive">
      <div class="caption">
        <h3 class="text-left">$1.00</h3>
        <select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
<br>
        <p><button type="button" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>ADD TO CART</button></p>
       </div>
       
        <div class="col-sm-6 col-md-4">
  <div class="thumbnail">
      <img src="rasp.jpeg" alt="raspberries" class="img-responsive">
      <div class="caption">
        <h3 class="text-left">$2.50 <br><small>$5.00 Total</small></h3>
        <select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
<br>
        <p><button type="button" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>ADD TO CART</button></p>
      </div>
    </div>
  </div>
  
  <div class="col-sm-6 col-md-4">
  <div class="thumbnail">
      <img src="kiwis.jpg" alt="kiwis" class="img-responsive">
      <div class="caption">
        <h3 class="text-left">$.30 <br><small>$2.40 Total</small></h3>
        <select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
<br>
 <p><button type="button" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>ADD TO CART</button></p>
      </div>
    </div>
  </div>
</div>
    ...
  </div>

      */