Bootstrap 4.0 -How to remove padding below of an element?

Question

Recently, I experiment around bootstrap (ver 4.0). I got minor issues especially with the off position vertical alignments. When using Google Chrome elements inspections, I found out that there are paddings (highlighted with oranges shown below) below the Total Amount:

The code for this are:

    <div class="input-group w-25 float-right">
        <label for="number">Total Amount: </label> 
        <span class="input-group-addon">$</span>
        <input type="number" class="form-control" aria-label="Amount">
    </div>

and the other one which is this: Where as there are paddings below $12.00 kg and blue button "Buy Me!"

The elements of footer div seems to be off vertical alignment:

When I inspect elements using Google Elements, I found out there are paddings: below $12.00 kg and blue button "Buy Me!

The code for these are

    <div class="card-footer border-success">
          <h6 class="card-subtitle mb-2 text-muted">$12.00/kg </h6> 
            <div class="input-group">
                <input type="text" class="form-control" placeholder="1" aria-label="unit" aria-describedby="basic-addon2">
                <span class="input-group-addon" id="basic-addon2">units</span> 
                <a href="#" class="btn btn-primary">Buy me!</a>
            </div>
    </div>

So , my question is there are any ways to remove the extra paddings in the bottom to make all the elements inside div aligned to each other?

Answer 1

Just use the Bootstrap 4 spacing utils..

pb-0 = padding-bottom: 0;

or

mb-0 = margin-bottom: 0;