Text caption won't wrap (Bootstrap)

Text caption won't wrap (Bootstrap)
0

#1

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>

The CSS is:

.picture {background-color: #f9f9f9;border: 1px solid #cccccc;padding: 3px;font: 11px/1.4em arial, sans-serif;}
.rightPicture {margin: 0.5em 0 0.5em 0.8em;float:right;text-align:right;}

figcaption, figure {
  display: block;
}

figure {
  margin: 0;
}

.figure {
  display: inline-block;
}

.figure-caption {
  font-size: 90%;
  color: #6c757d;
}

figure-img {
  margin-bottom: 0.5rem;
  line-height: 1;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.rounded {
  border-radius: 0.25rem !important;
}

text-right {
  text-align: right !important;
}

I have been working on this for some time and appreciate any help.


#2

Can you post a link on codepen so that people can tinker and play with it?


#3

Thanks. I didn’t think of that. Here it is.

I couldn’t embed the post here as a new user can’t post more than two thinks (and there were 2+ in the embed code).


#4

Hi @LeeU

Give the class ".figure" a "width of 250px" (which is the width of the image)


#6

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?


#7

I don’t get you, you needed your text to be wrapped along with the image right.?


#8

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:

.picture {
  width: 60%;
  padding: 0 1em;
}

figure.figcaption {
  position: relative;
  padding: 1em 0;
  width:40%;
  height: 0;
}

But I am working to tighten it up. Any suggestions?


#9

Actually, i did not mean like that, you can try this,

Have an outer container for the image and set its width as a default one,

<div class="outer-container">
  <img src="" class="image">
</div>
.outer-container {
  width: 300px;
}
.image {
  width: 100%;
}

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.

In your code, it will be like this

.figure {
  width: 300px
}
.img-fluid {
  width: 100%;
}

#10

Do you want text and image to be side by side? If , then you need css property called float.


#11

It wraps the text as it should but the image gets bigger (am I missing something?). See the updated code.


#12

What do you mean by it gets bigger? When I view your pen, the image never changes size, regardless of the browser width. What size do you want the image to be?


#13

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.


#14

What size do you want the image to be?


#15

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.


#16

Review the previous lesson on how to make images responsive.


#17

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.


#18

When I view the pen you posted earlier, I do not see Bootstrap 4 added to your project, but the pen may not be updated since you added it.

I guess I am not understanding what problem you are currently experiencing with the pen I see. Here is what I see (an image with text underneath all surround by a border). The box is shifted to the far right of the page. I guess you need to explain what you are expecting the Codepen code to do. At this point, I am not sure what advice to give you, because I do not understand the problem you are trying to resolve.


#19

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

(The Bootstrap code doesn’t apply here.)


#20

Maybe this can help you out.


#21

Thanks but the positioning is not the problem. It’s getting the text to wrap to the size of the image.