AnneKok AnneKok - 6 months ago 19
CSS Question

Padding an image in Bootstrap with background colour

Couldn't find an answer to this so..

It's probably a very simple solution but I've been tunnel visioning for the past 20 minutes and it's frustrating me.

The padding of an image, which I'm trying to give a circle background element, is really annoying.

Margin doesn't work either.

My image is 120 px large, and the padding of 2em just makes it smaller, but I want it to stay the same size, but have a bigger background size.

Here's the code:

<div class="row">
</div class="container-fluid">
<div class="col-md-4 img-icon-pad">
<img src="img/icons/html.png" class="img-responsive img-icons" />
</div>

<div class="col-md-4">
<img src="img/icons/html.png" class="img-responsive img-icons" />
</div>

<div class="col-md-4">
<img src="img/icons/html.png" class="img-responsive img-icons" />
</div>

</div>

/* Boxes */

.img-icons {
height: 120px;
width: auto;
background-color: #f8f8ec;
border: 2px solid #e97117;
padding: 2em;
border-radius: 50%;

}

.img-icon-pad {
}


And a screenshot of what I mean:


Answer

I think it is ok

 <div class="row">
    <div class="container-fluid">
        <div class="col-md-4 ">
            <div class="thumbnail">
               <img src="img/icons/html.png" class="img-responsive img-icons" />
            </div>
        </div>

        <div class="col-md-4">
            <img src="img/icons/html.png" class="img-responsive img-icons" />
        </div>

        <div class="col-md-4">
            <img src="img/icons/html.png" class="img-responsive img-icons" />
        </div>

    </div>

    <style>
.thumbnail {
    height: 150px;
    width: 150px;
    border: 2px solid #e97117;
    background-color: #f8f8ec;
     padding: 2em;
}

</style>