I am using Bootstrap v4.0.0-beta. I am having a problem with text not wrapping in image captions. I don’t want the text to wrap around the image (which is all I could find in searching). I want the text to wrap to the size (width) of the image. The format I am using is:
<div class="picture rightPicture"><figure class="figure">
<img src="/img/byzantine-era-gold-menorah-medallion.jpg" class="figure-img img-fluid rounded" alt="Close up of a Byzantine-era solid gold menorah medallion found near the Southern Wall of the Temple Mount">
<figcaption class="figure-caption text-right">Close up of a Byzantine-era solid gold menorah medallion found near the Southern Wall of the Temple Mount (<em>Photo credit: courtesy of Ouria Tadmor/Hebrew University</em>)</figcaption>
</figure>
</div>
I have been trying to somehow cascade off the figure so the text will just be a percentage of the width of the image so I would not have to either set the image width in the CSS or have two (or more?) classes to deal with it. I’ve been playing around with it but the best I can do is the image of the right side of the column, at the top, and the text on the left, at the bottom. Each one being a separate entity.
Any ideas or suggestions? Or perhaps it won’t work?
Exactly. And your technique works just fine … as long as all the images are 250px, which they aren’t. So, instead of having codes for different sizes, I am looking for a way it automatically adjusts. So far I have something like this:
The container will hold the image within it’s width, so any sized image will occupy the space within the .outer-container and you need not worry about image width, all you need is to set a default width for the container holding the image.
The image is actually 226px x 237px. It does solve the text-wrap problem. However, using the method given by @Sujith3021 the size becomes whatever the default size is in the CSS file. The idea was to not have to create different styles for different sizes. That’s why I had begun working with the code above.
I want to allow for different sizes w/o having several styles. If I wanted a set size, I would just set it for good. While images at that location will generally stay the same, I need to be able to allow for others and different pages.
I understand about making images responsive. I already have the code for that (I am using BootStrap 4). The image I am working with here is the original-sized image. I just want to be able to post it w/o having to use different styles. Without the text I have no problem as the image is sized properly, using the BS code. It’s the text that I am trying to make fit here.
I have updated the pen as it was originally. My problem lies with the code for .figure , specifically the width: 350px; portion.
I am only trying to figure out a way for the text to wrap underneath. I guess I will just set the image size in the page itself. But I am still left with my original problem, the text is longer than the image. See the code