title: Creating a responsive horizontal content thumbnail with Bootstrap
body: <p>I'm having a problem creating a responsive "card" similar to the <a href="http://getbootstrap.com/components/#thumbnails-custom-content" rel="nofollow noreferrer">Custom Content Thumbnail</a> in Bootstrap but horizontal. The main problem is that I want the image to be a square and 100% of the height of the card. Also, I want all the cards to have the same width and height.</p>
  
  <p>This is my work so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
   background-color:#ededed;
   font-family:"Segoe UI";
  }
  
  /*----------2.Headings &amp; Buttons----------*/
  h3 {
   font-size:1.2em;
   font-weight:600;
   text-transform:capitalize;
   margin:0 0 10px 0;
   padding:0;
   color:#555555;
  }
  .btn-styled {
   background-color:transparent;
   border:#666666 1.9px solid;
   color:#666666;
   font-size:0.85em;
   border-radius:30px;
   padding:5px 13px 4px 13px;
   margin:10px 0 10px 0;
  }
  .btn-styled:hover, .btn-styled:active  {
   background-color:#ededed;
   border-color:#ededed;
   color:#555555;
  }
  .btn-styled:focus {
   outline:0 !important;
  }
  /*----------3.Cards----------*/
  .card {
   position: relative;
     margin:2% 5px 2% 5px;
     background-color: #fff;
     transition: box-shadow .25s;
     border-radius: 2px;
      box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
   padding:0;
   min-width:400px;
   max-width:500px;
  }
  .card .card-image img {
    display: block;
    border-radius: 2px 2px 0 0;
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
  }
  .card .card-content {
    padding: 15px 10px 0 0;
    border-radius: 0 0 2px 2px;
  }
  
  .card .card-content p {
    margin:0;
    font-size:1.45rem;
    color: #555555;
  }
  /*----3.a.Horizontal----*/
  .card.horizontal .card-image img {
   height:100px;
   width:100px;
  }
  
  .card.horizontal {
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
  }
  .card.horizontal.small .card-image,
   .card.horizontal.medium .card-image,
    .card.horizontal.large .card-image {
     height: 100%;
     max-height: none;
     overflow: visible;
  }
  .card.horizontal .card-image img {
     width:150px;
   height:150px;
   margin-right:20px;
  }
  .card.horizontal .card-stacked {
     -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
     -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
     position: relative;
  }
  .card.horizontal .card-stacked .card-content {
     -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
   flex-grow: 1;
  }
  .card .card-image {
    position: relative;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-5 col-md-offset-1"&gt;
          &lt;h3&gt;MAIN TITLE&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-offset-1 col-md-5 col-xs-12"&gt;
          &lt;div class="card horizontal"&gt;
            &lt;div class="card-image"&gt;
              &lt;img src="https://upload.wikimedia.org/wikipedia/en/thumb/f/ff/Morning_Glory_Flower_square.jpg/1024px-Morning_Glory_Flower_square.jpg"&gt;
            &lt;/div&gt;
            &lt;div class="card-stacked"&gt;
              &lt;div class="card-content"&gt;
                &lt;h3&gt;Title Goes Here&lt;/h3&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit,  sed doeiusmod tempor incididunt.&lt;/p&gt;
                &lt;button class="btn btn-styled"&gt;START COPY&lt;/button&gt;
               &lt;/div&gt;
             &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="col-md-offset-1 col-md-5 col-xs-12"&gt;
          &lt;div class="card horizontal"&gt;
            &lt;div class="card-image"&gt;
              &lt;img src="https://upload.wikimedia.org/wikipedia/en/thumb/f/ff/Morning_Glory_Flower_square.jpg/1024px-Morning_Glory_Flower_square.jpg"&gt;
            &lt;/div&gt;
            &lt;div class="card-stacked"&gt;
              &lt;div class="card-content"&gt;
                &lt;h3&gt;Title Goes Here&lt;/h3&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit,  sed doeiusmod tempor incididunt.&lt;/p&gt;
                &lt;button class="btn btn-styled"&gt;START COPY&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also, I made an example of how the cards should look in a grid:</p>
  
  <p><a href="https://i.stack.imgur.com/ESbdY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ESbdY.png" alt="enter image description here"></a></p>
  
  <p>When I tried to create this cards they were not responsive. On different screen widths the left-right-margin was too big or they were on top of each other.</p>
  
  <p>Can someone help get started or give me some ideas how I should do it? 
  Thanks in advance.</p>