Bootstrap Grid

rough

by pandigity

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="col-sm-6 col-md-4">
  <div class="thumbnail">
      <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>
  </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>
 ...

CSS

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

 <div class="col-xs-6 col-sm-3">
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }


@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

.form-control { text-align: right;
}


class="pull-left"
.pull-left {
  float: left;
}
class="pull-right"
.pull-right {
  float: right;
}

JavaScript

///<div class="col-xs-6 col-sm-3">
/// <div class="col-sm-6 col-md-4">