How to justify the text in Figure caption in Bootstrap 5

Question

I want to justify the text in Figure caption Bootstrap 5. As an example:

<figure class="figure">
  <img class="figure-img img-fluid rounded" src="fig.png" alt="" />
  <figcaption class="figure-caption text-start">my caption... long text...</figcaption>
</figure>

Here I use text-start to align left. I want something like text-justify but it doesn't work. How can I justify the text?

Answer 1

It is kind of strange and I did have to go have a look but on appearances Bootstrap does not have a class for justifying text. It would seem the best option is to use class="text-wrap" and I suppose this may work better or worse if you also include text-center.

Alternatively, you could justify the text manually in your CSS using text-align: justify;

Answer 2

Yes indeed, the solution is

<figure class="figure">
  <img class="figure-img img-fluid rounded" src="fig.png" alt="" />
  <figcaption class="figure-caption">my caption... long text...</figcaption>
</figure>

and in css:

.figure-caption {display: table-caption; caption-side: bottom; text-align: justify;}