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

I dont think that padding is the answer, if anything it would be the margin — Frog82, Jul 25 '14 at 21:42
Ok so try margin...either `padding` or `margin`. Best bet is to inspect element in Chrome/Firefox and play around with the styles. Explained here: https://developer.chrome.com/devtools/docs/elements-styles — Dan, Jul 25 '14 at 21:44

score 0 · Answer 1 · answered Jul 25 '14 at 22:25

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

Bootstrap unwanted space between image buttons

1 Answers1