HTML

htmlchat

<div class="container bootstrap snippets bootdeys">
<div class="col-md-7 col-xs-12 col-md-offset-2">
  <!-- Panel Chat -->
  <div class="panel" id="chat">
    <div class="panel-heading">
      <h3 class="panel-title">
        <i class="icon wb-chat-text" aria-hidden="true"></i> Chat
      </h3>
    </div>
    <div class="panel-body">
      <div class="chats">
        <div class="chat">
          <div class="chat-avatar">
            <a class="avatar avatar-online" data-toggle="tooltip" href="#" data-placement="right" title="" data-original-title="June Lane">
              <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="...">
              <i></i>
            </a>
          </div>
          <div class="chat-body">
            <div class="chat-content">
              <p>
                Good morning, sir.
                <br>What can I do for you?
              </p>
              <time class="chat-time" datetime="2015-07-01T11:37">11:37:08 am</time>
            </div>
          </div>
        </div>
        <div class="chat chat-left">
          <div class="chat-avatar">
            <a class="avatar avatar-online" data-toggle="tooltip" href="#" data-placement="left" title="" data-original-title="Edward Fletcher">
              <img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="...">
              <i></i>
            </a>
          </div>
          <div class="chat-body">
            <div class="chat-content">
              <p>Well, I am just looking around.</p>
              <time class="chat-time" datetime="2015-07-01T11:39">11:39:57 am</time>
            </div>
          </div>
        </div>
        <div class="chat">
          <div class="chat-avatar">
            <a class="avatar avatar-online" data-toggle="tooltip" href="#" data-placement="right" title="" data-original-title="June Lane">
              <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="...">
              <i></i>
            </a>
          </div>
          <div class="chat-body">
            <div class="chat-content">
              <p>
                If necessary, please ask me.
              </p>
              <time class="chat-time" datetime="2015-07-01T11:40">11:40:10 am</time>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="panel-footer">
      <form>
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Say something">
          <span class="input-group-btn">
            <button class="btn btn-primary" type="button">Send</button>
          </span>
        </div>
      </form>
    </div>
  </div>
  <!-- End Panel Chat -->
</div>
</div>