A good way to solve this problem is use flexbox.

Bootstrap 4 have a class d-flex to do that. By default, the flex-direction is row, so you will have your i h3 and p in the same row. And to make sure that the elements will fill all the width available, add flex-fill class in each element. The align-items-center class will try to center the vertical axis (but the margin top/bottom of elements can override this behavior).

    <div class="card m-b-30 card-body">
            <div class="d-flex align-items-center">
                <div class="card-icon flex-fill"><i class="mdi mdi-database">a</i></div>
                <h3 class="card-title font-24 flex-fill">Available Credits: 2</h3>
                <p class="card-text flex-fill">2 Email Verification Credits Left</p>
            </div>
            <div class="d-flex">
              <a href="#" class="btn btn-primary waves-effect waves-light">Buy More Credits</a>
              <a href="#" class="btn btn-light waves-effect waves-light ml-3">Track Your Credits</a>
            </div>
    </div>

Add your h3 and p elements to the inside of your div element. If this doesn’t work make the widths of the elements percentages of the page, making sure they add up to 100% or less.

Edit:

In your css add

display: inline-block;

To ALL those elements.

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 🙂

.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;
}

<div class="card m-b-30 card-body">
  <div class="card-icon"><i class="mdi mdi-database"></i></div>
  <h3 class="card-title font-24">Available Credits: 2</h3>
  <p class="card-text">2 Email Verification Credits Left</p>
  <div class="d-flex">
    <a href="#" class="btn btn-primary waves-effect waves-light">Buy More Credits</a>
    <a href="#" class="btn btn-light waves-effect waves-light ml-3">Track Your Credits</a>
  </div>
</div>