Bootstrap unwanted space between image buttons

Question

Relatively new to Bootstrap and in need of some help. I have attached an img url to aid with my explanation.

I have unwanted space inbetween image buttons, I want it to be a quarter of the size it currently is.

    <div class="col-sm-3">
    <asp:ImageButton src="Content/MPGCalc.png" id="Mpg" runat="server" class ="img-responsive" />
        <br />
        <p>Miles Per Gallon and Journey Cost Calculator</p>
    </div>

I have done the above for each of the 8 images. I feel that the problem may be to do with that col-sm-3 is meant to only add upto 12.

Any advice would be appreciated!

http://imgur.com/wzVKSx5

Answer 1

Thanks to Andrew Peterson for the link, I ended up adding a new class .nopadding but then editing the margin to remove the space inbetween, as shown below. Thanks for the input

.nopadding {
   padding: 0 !important;
   margin-bottom: -70px !important;
}