Categories
css html twitter-bootstrap twitter-bootstrap-3

How to handle an image inside bootstrap column?

I got bootstrap col-md-1 that contains an image inside. Moreover, that column is wrapped by content div with paddings.

The problem I’m not okay with is that this image is pretty small. I would like it to be with the size at least as the original one has,

enter image description here

yet it should be responsive.

How can I do this? Thanks in advance!

My Codepen

HTML

<div class="content">
<div class="row">
<div class="col-md-11 first-column"></div>
<div class="col-md-1 back-to-blog">
<a href="https://www.faqcode4u.com/">
<img class="img-responsive" src="https://api.asm.skype.com/v1/objects/0-neu-d1-6d077751650ba9cb23f065b16e4d4581/views/imgpsh_fullsize">
</a>
</div>
</div>
</div>
</div>

CSS

.content {
padding: 0 35px;
}
.first-column {
border: 1px solid;
height: 100px;
}

One of the ‘blanket’ styles that BootStrap ships with is this:

img {
max-width: 100%;
}

This essentially means that images won’t go wider than their parent containers / elements. So if your col-md-1 has a width of 97.5px (assuming you’re using a normal 1170px container?), your image won’t be bigger than 97.5px on viewports > 992px.

Try experimenting with different sized columns:

<div class="col-md-10 first-column"></div>
<div class="col-md-2 back-to-blog">
<a href="https://www.faqcode4u.com/">
<img class="img-responsive" src="https://api.asm.skype.com/v1/objects/0-neu-d1-6d077751650ba9cb23f065b16e4d4581/views/imgpsh_fullsize">
</a>
</div>

Or, for larger viewports, try appending another class to your wrapping container and overrides BootStrap’s native container class:

<div class="container container-custom">

Then style is as follows:

@media (min-width: 1420px) {
.container.container-custom {
width: 1390px
}
}

Doing this will ensure your column widths remain proportionate to your container size (they are percentage based after all) and most importantly, you’re not overwriting BootStrap!

You’ll also notice I’ve wrapped the above class in a media query. This is so viewports > 1420px have the 1390px container with spacing either side (due to container’s margin-left: auto and margin-right: auto which center it in the viewport).