Edit these docs Rate these docs

Chat

Bootstrap Chat

Bootstrap chat is a component dedicated for text-based communication between two or more users in real time. Build with conversations list sidebar.

To use chat you need to include CSS code. You can find it in addons-pro in CSS folder.



      <!-- Chat CSS -->
      <link href="css/addons-pro/chat.css" rel="stylesheet">
      <!-- Chat CSS - minified-->
      <link href="css/addons-pro/chat.min.css" rel="stylesheet">

    

Basic chat MDB Pro component

  • avatar
    Brad Pitt 12 mins ago

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Lara Croft 13 mins ago

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

    avatar
  • avatar
    Brad Pitt 12 mins ago

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.



        <div class="card grey lighten-3 chat-room">
          <div class="card-body">

            <!-- Grid row -->
            <div class="row px-lg-2 px-2">

              <!-- Grid column -->
              <div class="col-md-6 col-xl-4 px-0">

                <h6 class="font-weight-bold mb-3 text-center text-lg-left">Member</h6>
                <div class="white z-depth-1 px-3 pt-3 pb-0">
                  <ul class="list-unstyled friend-list">
                    <li class="active grey lighten-3 p-2">
                      <a href="#" class="d-flex justify-content-between">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-8.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                        <div class="text-small">
                          <strong>John Doe</strong>
                          <p class="last-message text-muted">Hello, Are you there?</p>
                        </div>
                        <div class="chat-footer">
                          <p class="text-smaller text-muted mb-0">Just now</p>
                          <span class="badge badge-danger float-right">1</span>
                        </div>
                      </a>
                    </li>
                    <li class="p-2">
                      <a href="#" class="d-flex justify-content-between">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                        <div class="text-small">
                          <strong>Danny Smith</strong>
                          <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                        </div>
                        <div class="chat-footer">
                          <p class="text-smaller text-muted mb-0">5 min ago</p>
                          <span class="text-muted float-right"><i class="fas fa-mail-reply" aria-hidden="true"></i></span>
                        </div>
                      </a>
                    </li>
                    <li class="p-2">
                      <a href="#" class="d-flex justify-content-between">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                        <div class="text-small">
                          <strong>Alex Steward</strong>
                          <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                        </div>
                        <div class="chat-footer">
                          <p class="text-smaller text-muted mb-0">Yesterday</p>
                          <span class="text-muted float-right"><i class="fas fa-mail-reply" aria-hidden="true"></i></span>
                        </div>
                      </a>
                    </li>
                    <li class="p-2">
                      <a href="#" class="d-flex justify-content-between">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                        <div class="text-small">
                          <strong>Ashley Olsen</strong>
                          <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                        </div>
                        <div class="chat-footer">
                          <p class="text-smaller text-muted mb-0">Yesterday</p>
                          <span class="text-muted float-right"><i class="fas fa-mail-reply" aria-hidden="true"></i></span>
                        </div>
                      </a>
                    </li>
                    <li class="p-2">
                      <a href="#" class="d-flex justify-content-between">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-4.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                        <div class="text-small">
                          <strong>Kate Moss</strong>
                          <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                        </div>
                        <div class="chat-footer">
                          <p class="text-smaller text-muted mb-0">Yesterday</p>
                          <span class="text-muted float-right"><i class="fas fa-mail-reply" aria-hidden="true"></i></span>
                        </div>
                      </a>
                    </li>
                    <li class="p-2">
                      <a href="#" class="d-flex justify-content-between">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                        <div class="text-small">
                          <strong>Lara Croft</strong>
                          <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                        </div>
                        <div class="chat-footer">
                          <p class="text-smaller text-muted mb-0">Yesterday</p>
                          <span class="text-muted float-right"><i class="fas fa-mail-reply" aria-hidden="true"></i></span>
                        </div>
                      </a>
                    </li>
                    <li class="p-2">
                      <a href="#" class="d-flex justify-content-between">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                        <div class="text-small">
                          <strong>Brad Pitt</strong>
                          <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                        </div>
                        <div class="chat-footer">
                          <p class="text-smaller text-muted mb-0">5 min ago</p>
                          <span class="text-muted float-right"><i class="fas fa-check" aria-hidden="true"></i></span>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>

              </div>
              <!-- Grid column -->

              <!-- Grid column -->
              <div class="col-md-6 col-xl-8 pl-md-3 px-lg-auto px-0">

                <div class="chat-message">

                  <ul class="list-unstyled chat">
                    <li class="d-flex justify-content-between mb-4">
                      <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.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="far fa-clock"></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-between 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="far fa-clock"></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-between mb-4 pb-3">
                      <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.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="far fa-clock"></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="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 type="button" class="btn btn-info btn-rounded btn-sm waves-effect waves-light float-right">Send</button>
                  </ul>

                </div>

              </div>
              <!-- Grid column -->

            </div>
            <!-- Grid row -->

          </div>
        </div>

      

Colorful background chat MDB Pro component

  • avatar
    Brad Pitt 12 mins ago

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Lara Croft 13 mins ago

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

    avatar
  • avatar
    Brad Pitt 12 mins ago

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.



        <div class="card purple lighten-4 chat-room">
          <div class="card-body">

            <!-- Grid row -->
            <div class="row px-2">

              <!-- Grid column -->
              <div class="col-md-6 col-xl-8 pr-md-4 px-lg-auto px-0">

                <div class="chat-message">

                  <ul class="list-unstyled chat">
                    <li class="d-flex justify-content-between mb-4">
                      <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="avatar" class="avatar rounded-circle mr-2 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="far fa-clock"></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-between 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="far fa-clock"></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-between mb-4 pb-3">
                      <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="avatar" class="avatar rounded-circle mr-2 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="far fa-clock"></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="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 type="button" class="btn btn-deep-purple btn-rounded btn-sm waves-effect waves-light float-right">Send</button>
                  </ul>

                </div>

              </div>
              <!-- Grid column -->

              <!-- Grid column -->
              <div class="col-md-6 col-xl-4 px-0">

                <h6 class="font-weight-bold mb-3 text-center text-lg-left">Member</h6>
                <div class="white z-depth-1 px-3 pt-3 pb-0">
                  <ul class="list-unstyled friend-list">
                    <li class="active grey lighten-3 p-2">
                      <a href="#" class="d-flex justify-content-between">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-8.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                        <div class="text-small">
                          <strong>John Doe</strong>
                          <p class="last-message text-muted">Hello, Are you there?</p>
                        </div>
                        <div class="chat-footer">
                          <p class="text-smaller text-muted mb-0">Just now</p>
                          <span class="badge badge-danger float-right">1</span>
                        </div>
                      </a>
                    </li>
                    <li class="p-2">
                      <a href="#" class="d-flex justify-content-between">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                        <div class="text-small">
                          <strong>Danny Smith</strong>
                          <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                        </div>
                        <div class="chat-footer">
                          <p class="text-smaller text-muted mb-0">5 min ago</p>
                          <span class="text-muted float-right"><i class="fas fa-mail-reply" aria-hidden="true"></i></span>
                        </div>
                      </a>
                    </li>
                    <li class="p-2">
                      <a href="#" class="d-flex justify-content-between">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                        <div class="text-small">
                          <strong>Alex Steward</strong>
                          <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                        </div>
                        <div class="chat-footer">
                          <p class="text-smaller text-muted mb-0">Yesterday</p>
                          <span class="text-muted float-right"><i class="fas fa-mail-reply" aria-hidden="true"></i></span>
                        </div>
                      </a>
                    </li>
                    <li class="p-2">
                      <a href="#" class="d-flex justify-content-between">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                        <div class="text-small">
                          <strong>Ashley Olsen</strong>
                          <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                        </div>
                        <div class="chat-footer">
                          <p class="text-smaller text-muted mb-0">Yesterday</p>
                          <span class="text-muted float-right"><i class="fas fa-mail-reply" aria-hidden="true"></i></span>
                        </div>
                      </a>
                    </li>
                    <li class="p-2">
                      <a href="#" class="d-flex justify-content-between">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-4.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                        <div class="text-small">
                          <strong>Kate Moss</strong>
                          <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                        </div>
                        <div class="chat-footer">
                          <p class="text-smaller text-muted mb-0">Yesterday</p>
                          <span class="text-muted float-right"><i class="fas fa-mail-reply" aria-hidden="true"></i></span>
                        </div>
                      </a>
                    </li>
                    <li class="p-2">
                      <a href="#" class="d-flex justify-content-between">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                        <div class="text-small">
                          <strong>Lara Croft</strong>
                          <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                        </div>
                        <div class="chat-footer">
                          <p class="text-smaller text-muted mb-0">Yesterday</p>
                          <span class="text-muted float-right"><i class="fas fa-mail-reply" aria-hidden="true"></i></span>
                        </div>
                      </a>
                    </li>
                    <li class="p-2">
                      <a href="#" class="d-flex justify-content-between">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                        <div class="text-small">
                          <strong>Brad Pitt</strong>
                          <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                        </div>
                        <div class="chat-footer">
                          <p class="text-smaller text-muted mb-0">5 min ago</p>
                          <span class="text-muted float-right"><i class="fas fa-check" aria-hidden="true"></i></span>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>

              </div>
              <!-- Grid column -->

            </div>
            <!-- Grid row -->

          </div>
        </div>

      

Gradient chat with scrollbar MDB Pro component

  • avatar
    Brad Pitt 12 mins ago

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Lara Croft 13 mins ago

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

    avatar
  • avatar
    Brad Pitt 12 mins ago

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Lara Croft 13 mins ago

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

    avatar
  • avatar
    Brad Pitt 12 mins ago

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.



        <div class="card rare-wind-gradient chat-room">
          <div class="card-body">

            <!-- Grid row -->
            <div class="row px-lg-2 px-2">

              <!-- Grid column -->
              <div class="col-md-6 col-xl-4 px-0">

                <h6 class="font-weight-bold mb-3 text-center text-lg-left">Member</h6>
                <div class="white z-depth-1 px-2 pt-3 pb-0 members-panel-1 scrollbar-light-blue">
                  <ul class="list-unstyled friend-list">
                    <li class="active grey lighten-3 p-2">
                      <a href="#" class="d-flex justify-content-between">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-8.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                        <div class="text-small">
                          <strong>John Doe</strong>
                          <p class="last-message text-muted">Hello, Are you there?</p>
                        </div>
                        <div class="chat-footer">
                          <p class="text-smaller text-muted mb-0">Just now</p>
                          <span class="badge badge-danger float-right">1</span>
                        </div>
                      </a>
                    </li>
                    <li class="p-2">
                      <a href="#" class="d-flex justify-content-between">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                        <div class="text-small">
                          <strong>Danny Smith</strong>
                          <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                        </div>
                        <div class="chat-footer">
                          <p class="text-smaller text-muted mb-0">5 min ago</p>
                          <span class="text-muted float-right"><i class="fas fa-mail-reply" aria-hidden="true"></i></span>
                        </div>
                      </a>
                    </li>
                    <li class="p-2">
                      <a href="#" class="d-flex justify-content-between">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                        <div class="text-small">
                          <strong>Alex Steward</strong>
                          <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                        </div>
                        <div class="chat-footer">
                          <p class="text-smaller text-muted mb-0">Yesterday</p>
                          <span class="text-muted float-right"><i class="fas fa-mail-reply" aria-hidden="true"></i></span>
                        </div>
                      </a>
                    </li>
                    <li class="p-2">
                      <a href="#" class="d-flex justify-content-between">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                        <div class="text-small">
                          <strong>Ashley Olsen</strong>
                          <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                        </div>
                        <div class="chat-footer">
                          <p class="text-smaller text-muted mb-0">Yesterday</p>
                          <span class="text-muted float-right"><i class="fas fa-mail-reply" aria-hidden="true"></i></span>
                        </div>
                      </a>
                    </li>
                    <li class="p-2">
                      <a href="#" class="d-flex justify-content-between">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-4.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                        <div class="text-small">
                          <strong>Kate Moss</strong>
                          <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                        </div>
                        <div class="chat-footer">
                          <p class="text-smaller text-muted mb-0">Yesterday</p>
                          <span class="text-muted float-right"><i class="fas fa-mail-reply" aria-hidden="true"></i></span>
                        </div>
                      </a>
                    </li>
                    <li class="p-2">
                      <a href="#" class="d-flex justify-content-between">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                        <div class="text-small">
                          <strong>Lara Croft</strong>
                          <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                        </div>
                        <div class="chat-footer">
                          <p class="text-smaller text-muted mb-0">Yesterday</p>
                          <span class="text-muted float-right"><i class="fas fa-mail-reply" aria-hidden="true"></i></span>
                        </div>
                      </a>
                    </li>
                    <li class="p-2">
                      <a href="#" class="d-flex justify-content-between">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                        <div class="text-small">
                          <strong>Brad Pitt</strong>
                          <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                        </div>
                        <div class="chat-footer">
                          <p class="text-smaller text-muted mb-0">5 min ago</p>
                          <span class="text-muted float-right"><i class="fas fa-check" aria-hidden="true"></i></span>
                        </div>
                      </a>
                    </li>
                    <li class="p-2">
                      <a href="#" class="d-flex justify-content-between">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/img(3).jpg.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                        <div class="text-small">
                          <strong>Ken Ditto</strong>
                          <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                        </div>
                        <div class="chat-footer">
                          <p class="text-smaller text-muted mb-0">Yesterday</p>
                          <span class="text-muted float-right"><i class="fas fa-mail-reply" aria-hidden="true"></i></span>
                        </div>
                      </a>
                    </li>
                    <li class="p-2">
                      <a href="#" class="d-flex justify-content-between">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/img(2).jpg.jpg" alt="avatar" class="avatar rounded-circle d-flex align-self-center mr-2 z-depth-1">
                        <div class="text-small">
                          <strong>Marta Wozniak</strong>
                          <p class="last-message text-muted">Lorem ipsum dolor sit.</p>
                        </div>
                        <div class="chat-footer">
                          <p class="text-smaller text-muted mb-0">Yesterday</p>
                          <span class="text-muted float-right"><i class="fas fa-mail-reply" aria-hidden="true"></i></span>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>

              </div>
              <!-- Grid column -->

              <!-- Grid column -->
              <div class="col-md-6 col-xl-8 pl-md-3 px-lg-auto px-0">

                <div class="chat-message">

                  <ul class="list-unstyled chat-1 scrollbar-light-blue">
                    <li class="d-flex justify-content-between mb-4">
                      <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.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="far fa-clock"></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-between 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="far fa-clock"></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-between mb-4">
                      <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.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="far fa-clock"></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-between 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="far fa-clock"></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-between mb-4 pb-3">
                      <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.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="far fa-clock"></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>
                  </ul>
                  <div 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>
                  </div>
                  <button type="button" class="btn btn-outline-pink btn-rounded btn-sm waves-effect waves-dark float-right">Send</button>

                </div>

              </div>
              <!-- Grid column -->

            </div>
            <!-- Grid row -->

          </div>
        </div>

      


        .card.chat-room .members-panel-1,
        .card.chat-room .chat-1 {
        position: relative;
        overflow-y: scroll; }

        .card.chat-room .members-panel-1 {
        height: 570px; }

        .card.chat-room .chat-1 {
        height: 495px; }

        .card.chat-room .friend-list li {
        border-bottom: 1px solid #e0e0e0; }
        .card.chat-room .friend-list li:last-of-type {
        border-bottom: none; }

        .scrollbar-light-blue::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #F5F5F5;
        border-radius: 10px; }

        .scrollbar-light-blue::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5; }

        .scrollbar-light-blue::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #82B1FF; }

        .rare-wind-gradient {
        background-image: -webkit-gradient(linear, left bottom, left top, from(#a8edea), to(#fed6e3));
        background-image: -webkit-linear-gradient(bottom, #a8edea 0%, #fed6e3 100%);
        background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%); }

      

Small chat MDB Pro component

avatar

John Smith

Active now

Generic placeholder image

You're friends on Facebook

Web Designer at MDBootstrap

Lives in Paris

Lorem ipsum dolor sit amet consectetur adipisicing elit voluptatem cum eum tempore.

Rem suscipit lorum repellendus ditiis?

Nostrum minima cupiditate assumenda, atque cumque hic voluptatibus at corporis maxime quam harum.

avatar

Qui animi molestiae autem nihil optio recusandae nisi sit ab quo est.

Maxime nostrum ut blanditiis a quod quam, quidem deleniti?



        <!--Navbar-->
        <nav class="navbar navbar-expand-lg navbar-dark unique-color">

          <!-- Navbar brand -->
          <a class="navbar-brand" href="#">Navbar</a>
    
          <!-- Collapse button -->
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
            aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
    
          <!-- Collapsible content -->
          <div class="collapse navbar-collapse" id="basicExampleNav">
    
            <!-- Links -->
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home
                  <span class="sr-only">(current)</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link font-weight-bold" href="#" id="chat">Chat</a>
              </li>
    
            </ul>
            <!-- Links -->
    
            <form class="form-inline">
              <div class="md-form my-0">
                <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
              </div>
            </form>
          </div>
          <!-- Collapsible content -->
    
        </nav>
        <!--/.Navbar-->
    
        <div class="container mt-5">  
    
          <!-- Grid row -->
          <div class="row d-flex flex-row-reverse">
          
            <!-- Grid column -->
            <div class="col-md-6 mb-4 d-flex flex-row-reverse">
              
              <div class="card chat-room small-chat wide" id="myForm">
                <div class="card-header white d-flex justify-content-between p-2" id="toggle" style="cursor: pointer;">
                  <div class="heading d-flex justify-content-start">
                    <div class="profile-photo">
                      <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="avatar" class="avatar rounded-circle mr-2 ml-0">
                      <span class="state"></span>
                    </div>
                    <div class="data">
                      <p class="name mb-0"><strong>John Smith</strong></p>
                      <p class="activity text-muted mb-0">Active now</p>
                    </div>
                  </div>
                  <div class="icons grey-text">
                    <a class="feature"><i class="fas fa-video mr-2"></i></a>
                    <a class="feature"><i class="fas fa-phone mr-2"></i></a>
                    <a class="feature"><i class="fas fa-cog mr-2"></i></a>
                    <a id="closeButton"><i class="fas fa-times mr-2"></i></a>
                  </div>
                </div>
                <div class="my-custom-scrollbar" id="message">
                  <div class="card-body p-3">
                    <div class="chat-message">
                      <div class="media mb-3">
                        <img class="d-flex rounded mr-2" src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="Generic placeholder image">
                        <div class="media-body">
                          <p class="my-0">You're friends on Facebook</p>
                          <p class="mb-0 text-muted">Web Designer at MDBootstrap</p>
                          <p class="mb-0 text-muted">Lives in Paris</p>
                        </div>
                      </div>
                      <div class="card bg-primary rounded w-75 float-right z-depth-0 mb-1">
                        <div class="card-body p-2">
                          <p class="card-text text-white">Lorem ipsum dolor sit amet consectetur adipisicing elit voluptatem cum eum tempore.</p>
                        </div>
                      </div>
                      <div class="card bg-primary rounded w-50 float-right z-depth-0 mb-2">
                        <div class="card-body p-2">
                          <p class="card-text text-white">Rem suscipit lorum repellendus ditiis?</p>
                        </div>
                      </div>
                      <div class="card bg-light rounded w-75 z-depth-0 mb-1 message-text">
                        <div class="card-body p-2">
                          <p class="card-text black-text">Nostrum minima cupiditate assumenda, atque cumque hic voluptatibus at corporis maxime quam harum.</p>
                        </div>
                      </div>
                      <div class="d-flex justify-content-start">
                        <div class="profile-photo message-photo">
                          <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="avatar" class="avatar rounded-circle mr-2 ml-0">
                          <span class="state"></span>
                        </div>
                        <div class="card bg-light rounded w-75 z-depth-0 mb-2">
                          <div class="card-body p-2">
                            <p class="card-text black-text">Qui animi molestiae autem nihil optio recusandae nisi sit ab quo est.</p>
                          </div>
                        </div>
                      </div>
                      <div class="card bg-primary rounded w-75 float-right z-depth-0 mb-1 last">
                        <div class="card-body p-2">
                          <p class="card-text text-white">Maxime nostrum ut blanditiis a quod quam, quidem deleniti?</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="card-footer text-muted white pt-1 pb-2 px-3">
                  <input type="text" id="exampleForm2" class="form-control" placeholder="Type a message...">
                  <div>
                    <a><i class="far fa-file-image mr-2"></i></a>
                    <a><i class="far fa-laugh mr-2"></i></a>
                    <a><i class="fas fa-gamepad mr-2"></i></a>
                    <a><i class="fas fa-paperclip mr-2"></i></a>
                    <a><i class="fas fa-camera mr-2"></i></a>
                    <a><i class="fas fa-thumbs-up float-right"></i></a>
                  </div>
                </div>
              </div>
              
            </div>
            <!-- Grid column -->
          
          </div>
          <!-- Grid row -->
            
        </div>

      

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

Edit these docs Rate these docs

Getting started : download & setup


Download

All the components and features are part of MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the newest Bootstrap 4.

Click the button below to go to Download Page, where you can download MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires MDB Pro package.

Click the button below to learn more about MDBbootstrap Pro package

MDBootstrap Pro

Tutorials

If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.

5 min Quick Start Full Tutorial

Compilation

To reduce a weight of MDBootstrap package, you can compile your own, custom package containing only components and features you need.

Map of dependencies of SCSS files in MDBootstrap:


    Legend:

    '-->' means 'required'

    All free and pro files require files from 'core' catalog

    'none' means 'this component doesn't require anything except core files'

    A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working

    All PRO components require 'pro/_variables.scss' file

    scss/
    |
    |-- core/
    |   |
    |   |-- bootstrap/
    |   |	|-- _functions.scss
    |   |	|-- _variables.scss
    |   |
    |   |-- _colors.scss
    |   |-- _global.scss
    |   |-- _helpers.scss
    |   |-- _masks.scss
    |   |-- _mixins.scss
    |   |-- _typography.scss
    |   |-- _variables.scss
    |   |-- _waves.scss
    |
    |-- free/
    |   |-- _animations-basic.scss --> none
    |   |-- _animations-extended.scss --> _animations-basic.scss
    |   |-- _buttons.scss --> none
    |   |-- _cards.scss --> none <_buttons.scss>
    |   |-- _dropdowns.scss --> none <_buttons.scss>
    |   |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
    |   |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
    |   |-- _pagination.scss --> none
    |   |-- _badges.scss --> none
    |   |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
    |   |-- _carousels.scss --> <_buttons.scss>
    |   |-- _forms.scss --> none
    |   |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
    |   |-- _footers.scss none <_buttons.scss> (PRO: )
    |   |-- _list-group.scss --> none
    |   |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
    |   |-- _depreciated.scss
    |
    |-- pro/
    |   |
    |   |-- picker/
    |   |   |-- _default.scss --> none
    |   |   |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
    |   |   |-- _default-date.scss --> _default.scss, free/_forms.scss
    |   |
    |   |-- sections/
    |   |   |-- _templates.scss --> _sidenav.scss
    |   |   |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
    |   |   |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
    |   |   |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _magazine.scss --> _badges.scss
    |   |   |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
    |   |
    |   |-- _variables.scss
    |   |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
    |   |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |-- _tabs.scss --> _cards.scss
    |   |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
    |   |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
    |   |-- _navbars.scss --> free/_navbars.scss  (PRO: )
    |   |-- _scrollspy.scss --> none
    |   |-- _lightbox.scss --> none
    |   |-- _chips.scss --> none
    |   |-- _msc.scss --> none
    |   |-- _forms.scss --> none
    |   |-- _radio.scss --> none
    |   |-- _checkbox.scss --> none
    |   |-- _material-select.scss --> none
    |   |-- _switch.scss --> none
    |   |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
    |   |-- _range.scss --> none
    |   |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
    |   |-- _autocomplete.scss --> free/_forms.scss
    |   |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
    |   |-- _parallax.scss --> none
    |   |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
    |   |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
    |   |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss 
    |   |-- _steppers.scss --> free/_buttons.scss
    |   |-- _blog.scss --> none
    |   |-- _toasts.scss --> free/_buttons.scss
    |   |-- _animations.scss --> none
    |   |-- _charts.scss --> none
    |   |-- _progress.scss --> none
    |   |-- _scrollbar.scss --> none
    |   |-- _skins.scss --> none
    |   |-- _depreciated.scss
    |
    `-- _custom-skin.scss
    `-- _custom-styles.scss
    `-- _custom-variables.scss
    `-- mdb.scss

  

Map of dependencies of JavaScript modules in MDBootstrap:


    Legend:

    '-->' means 'required'

    All files require jQuery and bootstrap.js

    js/
    ├── dist/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    └── vendor/
        ├── addons/
        │   ├── datatables.js
        │   └── datatables.min.js
        ├── chart.js
        ├── enhanced-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js --> vendor/jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js --> vendor/hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js --> vendor/picker.js
        ├── picker.js
        ├── picker-time.js --> vendor/picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js
  

Compilation & Customization tutorial

If you need additional help to compile your custom package, use our Compilation & Customization tutorial

Compilation & Customization tutorial

Integrations with Angular, React or Vue

Apart from standard Bootstrap integration with jQuery, MDBootstrap provides integrations with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue