Bootstrapで疑似吹き出し(チャット)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

うるせぇ●ね

吹き出し機能が欲しい？

まぁ色々なものが公開されていますが、MDBootstrap の Basic example から必要なところだけ

Bootstrap Chat - free examples, templates & tutorial
https://mdbootstrap.com/docs/standard/extended/chat/

CODE

<section>
  <div class="container py-5">

    <div class="row d-flex justify-content-center">
      <div class="col-md-12 col-lg-12 col-xl-12">

            <div class="d-flex flex-row justify-content-start mb-4">
              <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOgR6LJyMvSBsVNMr_PHUcOX-7qU6LQYRo4gY4fikn7IW62LTdsrpHiWIhY1ZGuqbcLEC0tMfb_p0XaNZf3fA3MQ-Y7fr8kaxCVQYKICi3YHS4YV6zMcLMQsNGSmQgVj1rGgbJqcsh69n7/s61/B_5V9vvVAAE6qBC_11.png"
                alt="avatar 1" style="width: 61px; height: 100%;">
              <div class="p-3 ms-3" style="border-radius: 15px; background-color: rgba(57, 192, 237,.2);">
                <p class="small mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              </div>
            </div>

            <div class="d-flex flex-row justify-content-end mb-4">
              <div class="p-3 me-3 border bg-body-tertiary" style="border-radius: 15px;">
                <p class="small mb-0">うるせぇ●ね</p>
              </div>
              <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqG0SSl312aKEIL6ylQpRv9KiwoS4IxUauY84GjinMW2sSV1PJaK_AayO4flJwC8f1bDEG1EznwcALw6ZqzvM1NMkuTJjoKrn13EmqjDoQ4sXzRJSI6aw_QVZLn-E1G8y87RxizBGzBPVmYMi5MhgkMq8bo_bWBdbIek1R6ii2rTeE2xfkGZthCpkLwlo/s61/magicstudio-art%20-%202025-04-12T172145.574.jpg"
                alt="avatar 1" style="width: 61px; height: 100%;">
            </div>

      </div>
    </div>

  </div>
</section>

JetThemeやアヒルで試してどうぞ

一から組むならアラート使ったやつで組むかな