Bootstrapでdiv内にある画像の幅分に文字列を折り返したい

Question

実現したいこと

↑図のようにこういうようにしたいです。

発生している問題・分からないこと

このように、divの幅分だけ文字列が横に広がってしまいます。
どうやったら画像の幅分だけ、文字列を折り返すことができますか？

該当のソースコード

            <div class=" p-0 m-0 text-center small w-auto p-2">
                <a href="ssss"><img class="" src="{{$data->imgPath}}" alt="{{$data->imgAlt}}" style="width: 130px;"></a>
                <br>
                <div >
                    <span>あああああああああああああああああああああああああああああ</span>
                </div>
            </div>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

Googleで「bootstrap div 幅 文字 調整」などで調べましたが、うまくヒットしませんでした。

補足

Bootstrap 4.3.1バージョンを使っています。

Comments

[m.ts10806]

本件と直接関係ないですが、きちんとブロックを遣えば<br>は不要になりますし、
<br>が変な影響を及ぼさないとも限らないので、<br>を利用しない組み方を一度考えられた方が
問題切り分けや適切な機能の使い方にも繋がると思います。

[meex]

ご指摘ありがとうございます。そのような考え方も併せて学習に活かして参ります。

Answer 1

Bootstrap ならカードのコンポーネントを使うのがお作法だと思います。
カード · Bootstrap v5.3

逆にコンポーネントを使いたくない、というようなことであれば、Bootstrap を使うのをやめて普通にCSSで書いた方がいいです。

Comments

[meex]

回答ありがとうございます。
試したところ問題が解決しました！
ベストアンサーに選ばせていただきました。

[meex]

まさにやりたいことを再現できました。ありがとうございます。