Bootstrap/CSSでdivの横幅をinnerText幅分のautoにしたい

Question

実現したいこと

このように、divの幅を、インナー要素の文字数分だけにしたい。

例えば、Teratailでいう、こういったタグを表現したいのです。

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

https://getbootstrap.jp/docs/5.3/utilities/sizing/
この公式サイトに書かれていたソースを基に実装しましたが
なぜか横幅いっぱいに広がってしまいます。

どうすれば、divの横幅を文字数分だけのautoになりますか？

該当のソースコード

<div class="w-auto p-3">Width auto</div>

試したこと・調べたこと

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

上記の詳細・結果

https://getbootstrap.jp/docs/5.3/utilities/sizing/
この公式サイトに書かれていたソースを基に実装しましたが
なぜか横幅いっぱいに広がってしまいます。

補足

バージョンは4.0.3を使っています

Answer 1

Bootstrapのw-autoクラスはCSSのwidth: auto;という設定になります。

divは、ブロックレベル要素なので、横幅の初期値は親要素の横幅と同じになります。Autoと設定したときも同様です。

中身の文字幅にしたい場合は、CSSではdisplay: inline-block;と設定してインラインブロック要素にします。
Bootstrapではd-inline-blockクラスを付与します。

ディスプレイ · Bootstrap v5.3

<div class="d-inline-block p-3">Width auto</div>

Comments

[meex]

回答ありがとうございます。
試したところ問題が解決しました！
大変詳しくありがとうございます。勉強になりました。