sleek-dashboard/src/chat.html

Premium & Free Bootstrap 4 admin dashboard template by TAFcoder.com

---
layout: default
title: "Chat - Sleek Admin Dashboard Template"


parent: "app"
sub_parent: ""
activePage: "chat"
plugins: []
---

<div class="card card-default mb-0">
    <div class="row bg-white no-gutters chat">
      <div class="col-lg-4">
        <!-- Chat Left Side -->
        <div class="chat-left-side">

          <form class="chat-search">
            <input type="text" class="form-control" placeholder="Search...">
          </form>

          <ul class="list-unstyled border-top mb-0" id="chat-left-content">
            <li>
              <a href="#" class="media media-message">
                <div class="position-relative mr-3">
                  <img class="rounded-circle" src="assets/img/user/u1.jpg" alt="Image">
                  <span class="status away"></span>
                </div>
                <div class="media-body d-flex justify-content-between">
                  <div class="message-contents">
                    <h4 class="title">Aaren</h4>
                    <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                      odio,
                      eligendi delectus vitae.</p>
                  </div>

                  <span class="date">12 Jun</span>

                </div>
              </a>
            </li>
            <li>
              <a href="#" class="media media-message media-active">
                <div class="position-relative mr-3">
                  <img class="rounded-circle" src="assets/img/user/u2.jpg" alt="Image">
                  <span class="status active"></span>
                </div>
                <div class="media-body d-flex justify-content-between">
                  <div class="message-contents">
                    <h4 class="title">Leon Battista</h4>
                    <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                      odio,
                      eligendi delectus vitae.</p>
                  </div>

                  <span class="date">25 July</span>

                </div>
              </a>
            </li>
            <li>
              <a href="#" class="media media-message">
                <div class="position-relative mr-3">
                  <img class="rounded-circle" src="assets/img/user/u3.jpg" alt="Image">
                  <span class="status away"></span>
                </div>
                <div class="media-body d-flex justify-content-between">
                  <div class="message-contents">
                    <h4 class="title">Abriel</h4>
                    <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                      odio,
                      eligendi delectus vitae.</p>
                  </div>

                  <span class="date">09 Feb</span>

                </div>
              </a>
            </li>
            <li>
              <a href="#" class="media media-message">
                <div class="position-relative mr-3">
                  <img class="rounded-circle" src="assets/img/user/u4.jpg" alt="Image">
                  <span class="status active"></span>
                </div>

                <div class="media-body d-flex justify-content-between">
                  <div class="message-contents">
                    <h4 class="title">Emma</h4>
                    <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                      odio,
                      eligendi delectus vitae.</p>
                  </div>

                  <span class="date">05 Jan</span>

                </div>
              </a>
            </li>
            <li>
              <a href="#" class="media media-message">
                <div class="position-relative mr-3">
                  <img class="rounded-circle" src="assets/img/user/u5.jpg" alt="Image">
                  <span class="status away"></span>
                </div>

                <div class="media-body d-flex justify-content-between">
                  <div class="message-contents">
                    <h4 class="title">Emily</h4>
                    <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                      odio,
                      eligendi delectus vitae.</p>
                  </div>

                  <span class="date">17 Mar</span>

                </div>
              </a>
            </li>
            <li>
              <a href="#" class="media media-message">
                <div class="position-relative mr-3">
                  <img class="rounded-circle" src="assets/img/user/u6.jpg" alt="Image">
                  <span class="status"></span>
                </div>

                <div class="media-body d-flex justify-content-between">
                  <div class="message-contents">
                    <h4 class="title">William</h4>
                    <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                      odio,
                      eligendi delectus vitae.</p>
                  </div>

                  <span class="date">27 May</span>

                </div>
              </a>
            </li>
            <li>
              <a href="#" class="media media-message">
                <div class="position-relative mr-3">
                  <img class="rounded-circle" src="assets/img/user/u7.jpg" alt="Image">
                  <span class="status away"></span>
                </div>

                <div class="media-body d-flex justify-content-between">
                  <div class="message-contents">
                    <h4 class="title">Sophia</h4>
                    <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                      odio,
                      eligendi delectus vitae.</p>
                  </div>

                  <span class="date">20 Jun</span>

                </div>
              </a>
            </li>
            <li>
              <a href="#" class="media media-message">
                <div class="position-relative mr-3">
                  <img class="rounded-circle" src="assets/img/user/u8.jpg" alt="Image">
                  <span class="status"></span>
                </div>

                <div class="media-body d-flex justify-content-between">
                  <div class="message-contents">
                    <h4 class="title">Sophia</h4>
                    <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                      odio,
                      eligendi delectus vitae.</p>
                  </div>

                  <span class="date">20 Jun</span>

                </div>
              </a>
            </li>

            <li>
              <a href="#" class="media media-message">
                <div class="position-relative mr-3">
                  <img class="rounded-circle" src="assets/img/user/u1.jpg" alt="Image">
                  <span class="status away"></span>
                </div>
                <div class="media-body d-flex justify-content-between">
                  <div class="message-contents">
                    <h4 class="title">Aaren</h4>
                    <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                      odio,
                      eligendi delectus vitae.</p>
                  </div>

                  <span class="date">12 Jun</span>

                </div>
              </a>
            </li>
            <li>
              <a href="#" class="media media-message">
                <div class="position-relative mr-3">
                  <img class="rounded-circle" src="assets/img/user/u2.jpg" alt="Image">
                  <span class="status"></span>
                </div>
                <div class="media-body d-flex justify-content-between">
                  <div class="message-contents">
                    <h4 class="title">Abby</h4>
                    <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                      odio,
                      eligendi delectus vitae.</p>
                  </div>

                  <span class="date">25 July</span>

                </div>
              </a>
            </li>
            <li>
              <a href="#" class="media media-message">
                <div class="position-relative mr-3">
                  <img class="rounded-circle" src="assets/img/user/u3.jpg" alt="Image">
                  <span class="status away"></span>
                </div>
                <div class="media-body d-flex justify-content-between">
                  <div class="message-contents">
                    <h4 class="title">Abriel</h4>
                    <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                      odio,
                      eligendi delectus vitae.</p>
                  </div>

                  <span class="date">09 Feb</span>

                </div>
              </a>
            </li>
            <li>
              <a href="#" class="media media-message">
                <div class="position-relative mr-3">
                  <img class="rounded-circle" src="assets/img/user/u4.jpg" alt="Image">
                  <span class="status active"></span>
                </div>

                <div class="media-body d-flex justify-content-between">
                  <div class="message-contents">
                    <h4 class="title">Emma</h4>
                    <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                      odio,
                      eligendi delectus vitae.</p>
                  </div>

                  <span class="date">05 Jan</span>

                </div>
              </a>
            </li>
            <li>
              <a href="#" class="media media-message">
                <div class="position-relative mr-3">
                  <img class="rounded-circle" src="assets/img/user/u5.jpg" alt="Image">
                  <span class="status"></span>
                </div>

                <div class="media-body d-flex justify-content-between">
                  <div class="message-contents">
                    <h4 class="title">Emily</h4>
                    <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                      odio,
                      eligendi delectus vitae.</p>
                  </div>

                  <span class="date">17 Mar</span>

                </div>
              </a>
            </li>
            <li>
              <a href="#" class="media media-message">
                <div class="position-relative mr-3">
                  <img class="rounded-circle" src="assets/img/user/u6.jpg" alt="Image">
                  <span class="status away"></span>
                </div>

                <div class="media-body d-flex justify-content-between">
                  <div class="message-contents">
                    <h4 class="title">William</h4>
                    <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                      odio,
                      eligendi delectus vitae.</p>
                  </div>

                  <span class="date">27 May</span>

                </div>
              </a>
            </li>
            <li>
              <a href="#" class="media media-message">
                <div class="position-relative mr-3">
                  <img class="rounded-circle" src="assets/img/user/u7.jpg" alt="Image">
                  <span class="status"></span>
                </div>

                <div class="media-body d-flex justify-content-between">
                  <div class="message-contents">
                    <h4 class="title">Sophia</h4>
                    <p class="last-msg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
                      odio,
                      eligendi delectus vitae.</p>
                  </div>

                  <span class="date">20 Jun</span>

                </div>
              </a>
            </li>

          </ul>
        </div>

      </div>
      <div class="col-lg-8">
        <!-- Chats -->
        <div class="chat-right-side">
          <div class="media media-chat align-items-center mb-0 media-chat-header" href="#">
            <img class="rounded-circle mr-3" src="assets/img/user/u2.jpg" alt="Image">
            <div class="media-body w-100">
              <div class="d-flex justify-content-between align-items-center">
                <h3 class="heading-title mb-0"><a href="#">Leon Battista</a></h3>
                <div class="dropdown">
                  <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
                  </a>
                  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
                    <a class="dropdown-item" href="#">Profile</a>
                    <a class="dropdown-item" href="#">Logout</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="chat-right-content" id="chat-right-content">
            <div class="media media-chat media-left">
              <img class="rounded-circle mr-3" src="assets/img/user/u2.jpg" alt="Image">
              <div class="media-body">
                <p class="message">Lorem ipsum dolor sit amet.</p>
                <div class="date-time">27-07-2019, 1.03 PM</div>
              </div>
            </div>

            <div class="media media-chat media-right">
              <div class="media-body">
                <p class="message">Consectetur adipisicing elit Odio ex.</p>
                <div class="date-time">27-07-2019, 1.03 PM</div>
              </div>
              <img class="rounded-circle ml-3" src="assets/img/user/u4.jpg" alt="Image">
            </div>

            <div class="media media-chat media-left">
              <img class="rounded-circle mr-3" src="assets/img/user/u2.jpg" alt="Image">
              <div class="media-body">
                <p class="message">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto dolor, exercitationem
                  earum natus doloremque explicabo.</p>
                <p class="message">Accusamus laborum explicabo illum asperiores provident dolore perferendis cumque
                  incidunt possimus quia! Deleniti minus</p>
                <div class="date-time">27-07-2019, 1.03 PM</div>
              </div>
            </div>

            <div class="media media-chat media-right">
              <div class="media-body">
                <p class="message">Lorem ipsum dolor sit amet.</p>
                <div class="date-time">27-07-2019, 1.03 PM</div>
              </div>
              <img class="rounded-circle ml-3" src="assets/img/user/u4.jpg" alt="Image">
            </div>

            <div class="media media-chat media-left">
              <img class="rounded-circle mr-3" src="assets/img/user/u2.jpg" alt="Image">
              <div class="media-body">
                <p class="message">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto dolor, exercitationem
                  earum natus
                  doloremque explicabo.</p>
                <p class="message">Accusamus laborum explicabo illum asperiores provident dolore perferendis cumque
                  incidunt
                  possimus quia! Deleniti minus</p>
                <div class="date-time">27-07-2019, 1.03 PM</div>
              </div>
            </div>

            <div class="media media-chat media-right">
              <div class="media-body">
                <p class="message">Lorem ipsum dolor sit amet.</p>
                <div class="date-time">27-07-2019, 1.03 PM</div>
              </div>
              <img class="rounded-circle ml-3" src="assets/img/user/u4.jpg" alt="Image">
            </div>

          </div>

          <form class="px-5 pb-3">
            <input type="text" class="form-control mb-3" placeholder="Type your message here">
          </form>
        </div>

      </div>
    </div>
</div>