title: How to add icon in bootstrap card with title and text in the same row
body: <p>I'm trying to add an icon to the bootstrap card. I want the icon, title, and text in the same row. for that, I used float left on the card icon but it didn't work. can someone advise how to do this? 
   thank you :)</p>
  
  <pre><code>.card-icon {
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    float: left;
    margin-right: 15px;
    text-align: center;
  }
  
  .card-icon i {
    font-size: 48px;
  }
  
  &lt;div class="card m-b-30 card-body"&gt;
    &lt;div class="card-icon"&gt;&lt;i class="mdi mdi-database"&gt;&lt;/i&gt;&lt;/div&gt;
    &lt;h3 class="card-title font-24"&gt;Available Credits: 2&lt;/h3&gt;
    &lt;p class="card-text"&gt;2 Email Verification Credits Left&lt;/p&gt;
    &lt;div class="d-flex"&gt;
      &lt;a href="#" class="btn btn-primary waves-effect waves-light"&gt;Buy More Credits&lt;/a&gt;
      &lt;a href="#" class="btn btn-light waves-effect waves-light ml-3"&gt;Track Your Credits&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>