title: Making bootstrap Card display horizontal
body: <p>I have made a bootstrap card in my website, and i want to make it horizontal.
  <a href="https://i.stack.imgur.com/A7Itg.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A7Itg.jpg" alt="This is the default vertical card" /></a>
  and i want to convert it to <a href="https://i.stack.imgur.com/X47Ms.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X47Ms.jpg" alt="this horizontal view" /></a>.</p>
  <p>Please provide solution by inspecting my code!</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>.blue-bg{
      background-image: linear-gradient(#1385de,#045f9b);
      color: white;
      
  }
  .brown-bg{
      
      background-image: linear-gradient(#f8b949,#f7951f);
  }
  .order-btn2{
      background-image: linear-gradient(#ffde5e,#fdd215);
      color: black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;li class="card col-sm-3"&gt;
                              &lt;img class="card-img-top" src="https://i.ibb.co/Tcn9qV7/phoneSms.png" alt="Card image"&gt;
                              &lt;div class="card-header brown-bg"&gt;
                                  SMS Order
                              &lt;/div&gt;
                              &lt;div class="card-body blue-bg p-0 mt-1"&gt;
                                  &lt;p class="card-text"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit.&lt;/p&gt;
                                  &lt;a href="#" class="btn btn-primary order-btn2"&gt;Place Order&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Thanks.</p>