Bootstrap Snippet mobile card using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="product-card concise">
  <div class="product-image-wrapper">
    <img src="https://d39hcmrh8xztgk.cloudfront.net/product_product-large_php2QDejN.jpg" alt="Avocado" class="product-image" />
  </div>
  <div class="product-price">$2.99</div>
  <p class="product-info">
    <span class="product-source">VENDOR NAME</span>
    <span class="product-organic">Organic</span>
    <span class="product-name">Avocado Product Name Here Very Long</span>
  </p>
  <div>
    <button class="add-to-cart"><i class="fa fa-shopping-cart fa-lg"></i>Add to Cart</button>
    <button class="add-to-recurring-order"><i class="fa fa-cart-plus"></i>Get this item every week</button>
    <button class="expand-view"><i class="fa fa-ellipsis-h"></i>Expand View</button>
  </div>
</div>
<div class="product-card">
  <div class="product-image-wrapper">
    <img src="https://d39hcmrh8xztgk.cloudfront.net/product_product-large_php2QDejN.jpg" alt="Avocado" class="product-image" />
  </div>
  <div class="product-price">$2.99</div>
  <p class="product-info">
    <span class="product-source">VENDOR NAME</span>
    <span class="product-organic">Organic</span>
    <span class="product-name">Avocado Product Name Here Very Long</span>
  </p>
  <div>
    <button class="add-to-cart"><i class="fa fa-shopping-cart fa-lg"></i>Add to Cart</button>
    <button class="add-to-recurring-order"><i class="fa fa-cart-plus"></i>Get this item every week</button>
    <button class="expand-view"><i class="fa fa-ellipsis-h"></i>Expand View</button>
  </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.product-card {
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
  position: relative;
  margin: 20px auto;
  height: 300px;
  width: 260px;
}
.product-card .product-image-wrapper {
  border-bottom: 1px solid whitesmoke;
  position: absolute;
  width: 260px;
}
.product-card .product-image {
  display: block;
  height: auto;
  margin: 0 auto;
  width: 160px;
}
.product-card .product-price {
  background-color: white;
  border: 1px solid silver;
  color: dimgray;
  font-size: 16px;
  padding: 4px 8px;
  position: absolute;
  left: -4px;
  top: 150px;
}
.product-card .product-info {
  position: absolute;
  left: 10px;
  top: 172px;
  width: 250px;
}
.product-card .product-source {
  color: darkgray;
  font-size: 12px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"mobile card"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"mobile card" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"mobile card"
Bootstrap 3.0.0 Snippet by evarevirus