title: Bootstrap 3 cards with same height and width CSS HTML
body: <p>I have bootstrap 3 cards in my shop, however my problem is that it is not with the same height and width if its in mobile view.</p>
  
  <p><img src="https://i.stack.imgur.com/gTthS.png" /></p>
  
  <p><img src="https://i.stack.imgur.com/pQY7y.png" /></p>
  
  <p>What I need is IT to be aligned and have the exact same width and height when viewed in a mobile.</p>
  
  <p><strong>This is my css code for the cards:</strong> </p>
  
  <pre><code>/* EXAMPLE 1 - BOOTSTRAP FLEXBOX
     - Equal Height Columns in Rows
     - Equal Height Thumbnails
     - Flex Grow to Fill Paragraph Height
  */
  
  /* Flexbox Equal Height Bootstrap Columns (fully responsive) */
  @media only screen and (min-width : 500px) {
    .flex-row.row {
      display: flex;
     flex-wrap: wrap;
    }
    .flex-row.row &gt; [class*='col-'] {
      display: flex;
      flex-direction: column;
    }
    .flex-row.row:after, 
    .flex-row.row:before {
     display: flex;
    }
    .flex-row.row &gt; [class*='col-'] &gt; .box {
     display: flex;
     flex: 1;
    }
  }
  
  /* Grow thumbnails to fill columns height */
  .flex-row .thumb,
  .flex-row .caption {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
  }
  
  /* Flex Grow Text Container */
  .flex-row .caption p.flex-text {
    flex-grow: 1;
  }
  
  /* Flex Responsive Image */
  .flex-row img {
    width: 100%;
    height: auto;
  }
  
  .thumb{
    padding-bottom: 10px;
  }
  
  .caption{
  
  }
  /* EXAMPLE 2 - CSS TABLES EQUAL HEIGHT
     - ie9 support 
     - not responsive (mobile fallback)
  */
  
  .table-row.row,
  .table-row-equal {
    display: table;
    width: 100%;
    table-layout: fixed;
    word-wrap: break-word;
  }
  .table-row.row [class*="col-"] {
    width: 25%;
  }
  .table-row.row [class*="col-"],
  .table-row-equal .thumb {
    float: none;
    display: table-cell;
    vertical-align: top;
  }
  .table-row-equal {
    border-spacing: 30px 0px;
  }
  .table-row-equal .thumb {
    width: 1%;
  }
  /* mobile fallback to support partial responsiveness */
  @media only screen and (max-width: 500px) {
    .table-row-equal .thumb {
      display: block;
      width: 100%;
    }
  }
  
  /* MASONARY BOOTSTRAP 3 GRID
     - Who needs V4?
  */
  .masonary-row.row {
    -webkit-column-gap: 30px;
    column-gap: 30px;
    padding-left: 15px;
    padding-right: 15px;
    word-wrap: break-word;
    -webkit-column-fill: balance;
            column-fill: balance;
  }
  .masonary-row [class*="col-"] {
    display: inline-block;
    width: 100%;
    height: 100%;
    float: none;
    padding: 0px;
    -webkit-column-fill: balance;
            column-fill: balance;
  }
  
  @media (min-width: 480px) {
    .masonary-row.row {
      -webkit-column-count: 2;
      column-count: 2;
    }
  }
  @media (min-width: 768px) {
    .masonary-row.row {
      -webkit-column-count: 3;
      column-count: 3;
    }
  }
  /* demo */
  .bootflex .well {
        flex-grow: 1;
    }
  
  /* pre hack for small devices */
  pre {
    display: flex;
    flex: 1;
  }
  .flex-row.flex-code.row &gt; [class*='col-'] .flex-text {
    flex-grow: 1;
    display: flex;
  }
  .overview {
    display: flex;
    padding-right: 10px;
  }
  
  .card-default {
    display: flex;
    flex-wrap: wrap;
  }
  
  .card-default&gt;* {
    width: 100%;
  }
  
  .excludingImage {
    align-self: flex-end;
    text-align: center;
  }
  
  /* End Added */
  
  .card {
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 6px;
  
  }
  
  .card&gt;.card-link {
    color: #333;
  }
  
  .card&gt;.card-link:hover {
    text-decoration: none;
  }
  
  .card&gt;.card-link .card-img img {
    border-radius: 6px 6px 0 0;
  }
  .card .card-body {
    /* display: table;
    width: 100%; */
    padding: 12px;
  }
  
  .card .card-header {
    border-radius: 6px 6px 0 0;
    padding: 8px;
  }
  .card .card-footer {
    border-radius: 0 0 6px 6px;
    padding: 8px;
  }
  </code></pre>
  
  <p><strong>and this is code for my HTML card:</strong></p>
  
  <pre><code>&lt;div class="col-xs-6 col-sm-4 col-lg-3"&gt;
      &lt;div class="thumb"&gt;
          &lt;div class="caption card card-default"&gt;
              &lt;div class="card-img"&gt;
                  &lt;img src="user_images/&lt;?php echo $row['userPic'] ?&gt;" alt="Card image" class="img-thumbnail" height="100"&gt;
              &lt;/div&gt;
              &lt;div class="excludingImage"&gt;
                  &lt;div class="card-body"&gt;
                      &lt;p class="card-text" style="color:#00873a"&gt;&lt;b&gt;&lt;?php echo $cartname ?&gt;&lt;/b&gt;&lt;/p&gt;
                      &lt;p class="card-text" style="color:#e81b30"&gt;
                          &lt;strike style="color:#aaa"&gt;₱&lt;?php echo $orig ?&gt;.00&lt;/strike&gt; ₱&lt;?php echo $cartprice ?&gt;.00
                      &lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="card-footer text-center"&gt;
                      &lt;a href="shopview.php?prod=&lt;?php echo $cartname ?&gt;"&gt;
                          &lt;button type="button" class="btn btn-pink btn-sm"&gt;
                              &lt;i class="fa fa-shopping-cart"&gt;&lt;/i&gt; View Product 
                          &lt;/button&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>