<div class="container my-5">

​

  <!-- Section: Introduction -->

  <section class="">

​

    <p>

      Detailed documentation and more examples you can find in our

      <a href="https://mdbootstrap.com/docs/standard/extended/textarea/" target="_blank"><strong>Textarea Docs</strong></a>.

    </p>

​

    <hr class="mt-5">

​

    <p>Built with <a target="_blank" href="https://mdbootstrap.com/">Material Design for Bootstrap</a> - <strong>free</strong> and powerful Bootstrap UI KIT</p>

​

    <a class="btn btn-danger me-2" href="https://mdbootstrap.com/" target="_blank" role="button">Download MDB UI KIT</a>

    <a class="btn btn-dark me-2 px-3" target="_blank" href="https://github.com/mdbootstrap/mdb-ui-kit" role="button"><i class="fab fa-github"></i></a>

​

    <hr class="mb-5"/>

​

  </section>

  <!-- Section: Introduction -->

</div>

​

<div class="container my-4">

​

  <p class="font-weight-bold">Bootstrap message is a component dedicated for text-based communication between two or

    more users in real time.</p>

​

  <hr class="my-5">

​

  <div class="border border-light p-5">

​

    <ul id="some-ul" class="list-unstyled">

      <li class="d-flex justify-content-start mb-4">

        <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-7.jpg" alt="avatar" class="avatar rounded-circle mr-2 ml-lg-3 ml-0 z-depth-1">

        <div class="chat-body white p-3 ml-2 z-depth-1">

          <div class="header">

            <strong class="primary-font">Brad Pitt</strong>

            <small class="pull-right text-muted"><i class="fa fa-clock-o"></i> 12 mins ago</small>

          </div>

          <hr class="w-100">

          <p class="mb-0">

            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut

            labore et dolore magna aliqua.

          </p>

        </div>

      </li>

      <li class="d-flex justify-content-end mb-4">

        <div class="chat-body white p-3 z-depth-1">

          <div class="header">

            <strong class="primary-font">Lara Croft</strong>

            <small class="pull-right text-muted"><i class="fa fa-clock-o"></i> 13 mins ago</small>

          </div>

          <hr class="w-100">

          <p class="mb-0">

            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

          </p>

        </div>

        <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" alt="avatar" class="avatar rounded-circle mr-0 ml-3 z-depth-1">

      </li>

      <li class="d-flex justify-content-start mb-4 pb-3">

        <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-7.jpg" alt="avatar" class="avatar rounded-circle mr-2 ml-lg-3 ml-0 z-depth-1">

        <div class="chat-body white p-3 ml-2 z-depth-1">

          <div class="header">

            <strong class="primary-font">Brad Pitt</strong>

            <small class="pull-right text-muted"><i class="fa fa-clock-o"></i> 12 mins ago</small>

          </div>

          <hr class="w-100">

          <p class="mb-0">

            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut

            labore et dolore magna aliqua.

          </p>

        </div>

      </li>

      <li id="give-me-msg" class="white">

        <div class="form-group basic-textarea">

          <textarea class="form-control pl-2 my-0" id="exampleFormControlTextarea2" rows="3" placeholder="Type your message here..."></textarea>

        </div>

      </li>

      <button id="send-msg" type="button" class="btn btn-info btn-rounded btn-sm waves-effect waves-light float-right">Send</button>

    </ul>

​

  </div>

​

</div>