Tribute Page Question: How do i put the caption of the image inside white image background?

How do i put the caption of the image inside the image border?

In the image there is a white background and the caption “Dr. Norman Borlaug, third from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.”" is inside the white background.

I am trying to do this using Bootstrap class only and as a result struggling. Any one here knows basically how to recreate the image with caption similar to the example using Bootstrap class only.

Thank you.

Either a negative margin or some other form of position-ing change (harder). There’s no class for that.

But if the image doesn’t have the area for the caption pre-reserved (would be odd if it did), just make your caption element have a white background.

1 Like

There are a couple of ways you could do that.

Easiest way would be to make the white box one div that either simply includes two elements (image and caption). Depending on how you style the first div they may retain the box styling or otherwise you could have the box div and two child divs embedded within it-- One div for the image and one with the caption. So ‘nesting’ divs in this way is also a possibility.

It is important to look closely though and notice the white box goes around all of the image in the example and not just at the bottom of the image. This would require something different (CSS Grid or similar).

Thank you for the response. I used the other person’s technique and it worked out fine.

Thank you so much. I completely forgot that Div is like a box itself. It worked out fine. Last thing I am stuck in at the moment is when I am decreasing the size of the window the text keeps getting smaller. But in the sample there is limit to which the responsiveness occurs. After certain point the image don’t get smaller.

I am trying to figure that out. Going through tutorials.

But thank you so much.

I would take a look at the ‘min-width’ property that allows an area to shrink, or be ‘responsive’, but only up to a certain point.

I almost finished the page and everything was good and similar except one issue.

When I reduce the size, the image becomes too small and the text almost becomes unreadable because it keeps decreasing. I even copied the their original markeup and pasted it in my pen to check. And it gives the same problem where as the same markeup has no problem while viewing from the original codepen.

Maybe there is some problem in the setting. Anyways i did many things correctly from what i observed but I need study boostrap some more.

Thank you for all the help so far.

Can you post the ‘CodePen’ so we can have a look ?

Kind of figured out the issue. I think it’s just some issue with codepen and selecting bootstrap option in settings. I just opened a new pen, copied and pasted my code and adjusted the settings again and solved.

But thank you so much for replying. Now that I have understand how they created the sample page. Now I will make my own design :).

Well kind of finished the tribute page : Finally finished the Tribute Page and here is my experience!

Thank you guys for all the help.

1 Like