I have a row of three columns with images and figcaptions inside each column.It works “okay” i guess. Now i need to change each image to have equal width and height. Also i will have to set each div column to have equal distance between the borders and each other but i’m not sure how… I do it with padding right?
Here’s my code.
<div class="row">
<div class="col-xs-3 col-md-3">
<figure class="figure">
<img src="https://t1.gstatic.com/images?q=tbn:ANd9GcTgmbEGd2rRDg7_yQCzwC7j6MZWZSwp_PkwNYTvepo6eHcm56Gh" alt="first book" class="figure-img img-fluid rounded">
<figcaption class="figure-caption"> “Dark Matter and the Dinosaurs: The Astounding Interconnectedness of the Universe.” </figcaption>
</figure>
</div>
<div class="col-xs-3 col-md-3">
<figure class="figure">
<img src="https://t0.gstatic.com/images?q=tbn:ANd9GcS0pc3MeOk0mn7NwydTRK4F-JZ48y8k2-JcV0l-WS4nzv7-sMUw" alt="first book" class="figure-img img-fluid rounded">
<figcaption class="figure-caption">“
”Higgs Discovery: The Power of Empty Space.“
”</figcaption>
</figure>
</div>
<div class="col-xs-3 col-md-3">
<figure class="figure">
<img src="https://t0.gstatic.com/images?q=tbn:ANd9GcQh3zJ8FQqqQcKQH5TfmBrcMLSvpMrIP7FR2m6u43yEWh0mbGDe" alt="first book" class="figure-img img-responsive thumbnail center-block rounded">
<figcaption class="figure-caption">“Eventing explained.”</figcaption>
</figure>
</div>
<div class="col-xs-3 col-md-3">
<figure class="figure">
<img src="https://t1.gstatic.com/images?q=tbn:ANd9GcT_llmuuLoDbzXEwb9w2doR8WmA3UQ8yNCC2loKsLOtle_fPoGT" class="figure-img img-responsive">
<figure class="figure-caption">“Knocking on Heaven's Door: How Physics and Scientific Thinking Illuminate the Universe and the Modern World.”
</figcaption>
</figure>
</div>
</div>
Put a class img-responsive on your imgs If you’re manually adding height/width to the images, get rid of it.
Done that, i’ve already put the img-responsive class in each of the images but still…
Also, how do i center the image inside the column div?
You are using img-fluid in 2 of those images. Img-fluid is a Bootstrap 4 class. Use just img-responsive.
In plain CSS, you can use the property max-width and set it to 100%
Okay, i’ve used the img-responsive and center-block classes and they did the work but still the padding between each image is not the same. Also how do i manage to center the text inside the figcaption and the size of each image? I’ve tried reducing the width but it only didnt work out that well.
Bootstrap columns should have gutters between them
do you need spacing between the image and its container?
Ahm, no. I only need the spacing between every column to be the same. At the moment, every img has a different width and the spacing between each column div is different.
Hey @Lumiluminous I took a look at the images you are using and wondered if maybe the reason you might not be getting the desired look you want is due to the aspect ratios of the images being different. For example, two of the images have original heights of 1080px but they have different widths(811px & 714px). When bootstrap is resizing your images the heights will probably match but the widths will be different, potentially making them look misaligned etc.
Honestly, not sure if that’s the full reason why but maybe something to check out. 
Yes, they’re of different size. Does it matter? Should i replace them with other of smaller size or keep them and modify the width and height in the css? But wouldn’t that affect the whole column block? At least i’m getting close now 
your first image is smaller than your column size, therefore img-responsive doesn’t work. img-responsive is essentially max-width:100% and that only prevents your img from getting bigger than the max-width. If your image is already smaller than max-width, it doesn’t care. simplest way is to fix it is to apply width:100%; to figure>img
This is what it looks like after I modified your code here
the grid works just fine, that first image just smaller, which is why you have a bigger white space. Also figure, figure-img, figure-caption are Bootstrap 4 classes. I do not see them bootstrap 3 documentation
1 Like
Uh-huh, i see… Thank you, do you know i can make every image have the same width and height without breaking the alignment and the spacing between the divs?
The first thing you should check is if it actually breaks the alignment and spacing. Go into the developer console and inspect the elements in question
Chrome has a handy feature that highlights the element if you mouse over the element tag in the development tool, and the highlight shows you not only the elements but its margins. You can also inspect all its style attributes to gain a better sense of how the element is styled
Like in your previous question, you assume the spacing between the divs is off, but when I checked the development tool, the divs are all the correct size with equal paddings. That tells me something else is off, so I checked your images sizes, and the first image had a different width than the others.That’s how I found the problem.
I don’t recommend setting a static width on your images in bootstrap because that breaks the responsive nature of the layout. I’d, however, recommend you read the CSS guides on MDN. A better understanding of CSS fundamentals would better aid you to solve future problems. It’d not hurt to look into the Bootstrap source codes to know exactly how they are writing the styles of the classes you’re using.
Bootstrap is a really useful and nice thing, but you really have to follow its rule if you want to use it as painless as possible. If you just pick and chose what you need without knowing what’s going on, it can break and break in strange ways
You’re not going to remember everything, and that’s fine, Thes guides aren’t going anywhere, learn enough to know what to look for and the rest will fill in with repetition
Uh-huh. Thank you for the link, i’ll read it. I guess i’ll leave the images as they are now until i learn how i can manage to do this without breaking the ready-made code of bootstrap. Thank you for all the support and info.