admin-lte
Version:
Responsive open source admin dashboard and control panel.
1,229 lines • 61.7 kB
HTML
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Direct Chat Components | AdminLTE 3 Documentation</title>
<!-- Begin Jekyll SEO tag v2.5.0 -->
<title>Direct Chat Components | AdminLTE v3 Documentaion</title>
<meta name="generator" content="Jekyll v3.8.5" />
<meta property="og:title" content="Direct Chat Components" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="AdminLTE v3 Documentaion" />
<meta property="og:description" content="AdminLTE v3 Documentaion" />
<meta property="og:site_name" content="AdminLTE v3 Documentaion" />
<script type="application/ld+json">
{"description":"AdminLTE v3 Documentaion","@type":"WebPage","url":"/components/direct-chat.html","headline":"Direct Chat Components","@context":"http://schema.org"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700">
<link rel="stylesheet" href="/assets/plugins/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="/assets/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
<link rel="stylesheet" href="/assets/css/docs.css">
<link rel="stylesheet" href="/assets/css/highlighter.css">
<link rel="stylesheet" href="/assets/css/adminlte.min.css">
</head>
<body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed">
<div class="wrapper"> <nav class="main-header navbar navbar-expand navbar-white navbar-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link bg-info rounded dropdown-toggle" href="#" id="navbarVersionDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
v3.0
</a>
<div class="dropdown-menu py-0" aria-labelledby="navbarVersionDropdown">
<a class="dropdown-item bg-info disabled" href="#">v3.0</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://adminlte.io/docs/2.4/installation">v2.4</a>
<a class="dropdown-item" href="https://adminlte.io/themes/AdminLTE/documentation/index.html"><= v2.3</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<!-- <li class="nav-item d-none d-sm-inline-block">
<a href="index3.html" class="nav-link">Home</a>
</li> -->
</ul>
<!-- SEARCH FORM -->
<!-- <form class="form-check-inline ml-3">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</form> -->
</nav>
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<a href="/index.html" class="brand-link logo-switch">
<img src="/assets/img/logo-xs.png" alt="AdminLTE Docs Logo Small" class="brand-image-xl logo-xs">
<img src="/assets/img/logo-xl.png" alt="AdminLTE Docs Logo Large" class="brand-image-xs logo-xl" style="left: 12px">
</a>
<div class="sidebar">
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar nav-child-indent flex-column" data-widget="treeview" role="menu">
<li class="nav-item ">
<a href="/index.html" class="nav-link ">
<i class="nav-icon fas fa-microchip"></i>
<p>
Installation
</p>
</a>
</li>
<li class="nav-item ">
<a href="/dependencies.html" class="nav-link ">
<i class="nav-icon fas fa-handshake"></i>
<p>
Dependencies & Plugins
</p>
</a>
</li>
<li class="nav-item ">
<a href="/layout.html" class="nav-link ">
<i class="nav-icon fas fa-copy"></i>
<p>
Layout
</p>
</a>
</li>
<li class="nav-item has-treeview menu-open">
<a href="/components" class="nav-link active">
<i class="nav-icon fas fa-th"></i>
<p>
Components
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="/components/main-header.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Main Header</p>
</a>
</li>
<li class="nav-item">
<a href="/components/main-sidebar.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Main Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="/components/control-sidebar.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Control Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="/components/cards.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Card</p>
</a>
</li>
<li class="nav-item">
<a href="/components/boxes.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Small-/ Info-Box</p>
</a>
</li>
<li class="nav-item">
<a href="/components/direct-chat.html" class="nav-link active">
<i class="far fa-circle nav-icon"></i>
<p>Direct Chat</p>
</a>
</li>
<li class="nav-item">
<a href="/components/timeline.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Timeline</p>
</a>
</li>
<li class="nav-item">
<a href="/components/ribbons.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Ribbons</p>
</a>
</li>
<li class="nav-item">
<a href="/components/miscellaneous.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Miscellaneous</p>
</a>
</li>
<li class="nav-item">
<a href="/components/plugins.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Plugins</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview ">
<a href="/javascript" class="nav-link ">
<i class="nav-icon fas fa-code"></i>
<p>
JavaScript
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="/javascript/layout.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Layout</p>
</a>
</li>
<li class="nav-item">
<a href="/javascript/push-menu.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Push Menu</p>
</a>
</li>
<li class="nav-item">
<a href="/javascript/treeview.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Treeview</p>
</a>
</li>
<li class="nav-item">
<a href="/javascript/card-widget.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Card Widget</p>
</a>
</li>
<li class="nav-item">
<a href="/javascript/card-refresh.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>CardRefresh</p>
</a>
</li>
<li class="nav-item">
<a href="/javascript/control-sidebar.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Control Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="/javascript/direct-chat.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Direct Chat</p>
</a>
</li>
<li class="nav-item">
<a href="/javascript/todo-list.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Todo List</p>
</a>
</li>
<li class="nav-item">
<a href="/javascript/toasts.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Toasts</p>
</a>
</li>
</ul>
</li>
<li class="nav-item ">
<a href="/browser-support.html" class="nav-link ">
<i class="nav-icon fab fa-chrome"></i>
<p>
Browser Support
</p>
</a>
</li>
<li class="nav-item ">
<a href="/upgrade-guide.html" class="nav-link ">
<i class="nav-icon fas fa-hand-point-up"></i>
<p>
Upgrade Guide
</p>
</a>
</li>
<li class="nav-item ">
<a href="/implementations.html" class="nav-link ">
<i class="nav-icon fas fa-bookmark"></i>
<p>
Implementations
</p>
</a>
</li>
<li class="nav-item ">
<a href="/faq.html" class="nav-link ">
<i class="nav-icon fas fa-question-circle"></i>
<p>
FAQ
</p>
</a>
</li>
<li class="nav-item ">
<a href="/license.html" class="nav-link ">
<i class="nav-icon fas fa-file-alt"></i>
<p>
License
</p>
</a>
</li>
</ul>
</nav>
</div>
</aside>
<div class="content-wrapper px-4 py-2">
<div class="content-header">
<h1 class="text-dark">Direct Chat Components</h1>
</div>
<div class="content px-2">
<p>The direct chat widget extends the card component to create a beautiful chat interface. This widget consists of a required messages pane and an <strong>optional</strong> contacts pane. Examples:</p>
<div class="row">
<div class="col-md-6">
<div class="card card-primary direct-chat direct-chat-primary">
<div class="card-header">
<h3 class="card-title">Direct Chat</h3>
<div class="card-tools">
<span data-toggle="tooltip" title="3 New Messages" class="badge badge-light">3</span>
<button type="button" class="btn btn-tool" data-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle">
<i class="fas fa-comments"></i>
</button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="direct-chat-messages">
<div class="direct-chat-msg">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
</div>
<img class="direct-chat-img" src="/assets/img/user1-128x128.jpg" alt="message user image" />
<div class="direct-chat-text">
Is this template really for free? That's unbelievable!
</div>
</div>
<div class="direct-chat-msg right">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
</div>
<img class="direct-chat-img" src="/assets/img/user3-128x128.jpg" alt="message user image" />
<div class="direct-chat-text">
You better believe it!
</div>
</div>
<div class="direct-chat-msg">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
</div>
<img class="direct-chat-img" src="/assets/img/user1-128x128.jpg" alt="message user image" />
<div class="direct-chat-text">
Working with AdminLTE on a great new app! Wanna join?
</div>
</div>
<div class="direct-chat-msg right">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span>
</div>
<img class="direct-chat-img" src="/assets/img/user3-128x128.jpg" alt="message user image" />
<div class="direct-chat-text">
I would love to.
</div>
</div>
</div>
<!--/.direct-chat-messages-->
<div class="direct-chat-contacts">
<ul class="contacts-list">
<li>
<a href="#">
<img class="contacts-list-img" src="/assets/img/user1-128x128.jpg" />
<div class="contacts-list-info">
<span class="contacts-list-name">
Count Dracula
<small class="contacts-list-date float-right">2/28/2015</small>
</span>
<span class="contacts-list-msg">How have you been? I was...</span>
</div>
</a>
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="/assets/img/user7-128x128.jpg" />
<div class="contacts-list-info">
<span class="contacts-list-name">
Sarah Doe
<small class="contacts-list-date float-right">2/23/2015</small>
</span>
<span class="contacts-list-msg">I will be waiting for...</span>
</div>
</a>
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="/assets/img/user3-128x128.jpg" />
<div class="contacts-list-info">
<span class="contacts-list-name">
Nadia Jolie
<small class="contacts-list-date float-right">2/20/2015</small>
</span>
<span class="contacts-list-msg">I'll call you back at...</span>
</div>
</a>
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="/assets/img/user5-128x128.jpg" />
<div class="contacts-list-info">
<span class="contacts-list-name">
Nora S. Vans
<small class="contacts-list-date float-right">2/10/2015</small>
</span>
<span class="contacts-list-msg">Where is your new...</span>
</div>
</a>
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="/assets/img/user6-128x128.jpg" />
<div class="contacts-list-info">
<span class="contacts-list-name">
John K.
<small class="contacts-list-date float-right">1/27/2015</small>
</span>
<span class="contacts-list-msg">Can I take a look at...</span>
</div>
</a>
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="/assets/img/user8-128x128.jpg" />
<div class="contacts-list-info">
<span class="contacts-list-name">
Kenneth M.
<small class="contacts-list-date float-right">1/4/2015</small>
</span>
<span class="contacts-list-msg">Never mind I found...</span>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="card-footer">
<form action="#" method="post">
<div class="input-group">
<input type="text" name="message" placeholder="Type Message ..." class="form-control" />
<span class="input-group-append">
<button type="button" class="btn btn-primary">Send</button>
</span>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card card-danger direct-chat direct-chat-danger">
<div class="card-header">
<h3 class="card-title">Direct Chat</h3>
<div class="card-tools">
<span data-toggle="tooltip" title="3 New Messages" class="badge badge-light">3</span>
<button type="button" class="btn btn-tool" data-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle">
<i class="fas fa-comments"></i>
</button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="direct-chat-messages">
<div class="direct-chat-msg">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
</div>
<img class="direct-chat-img" src="/assets/img/user1-128x128.jpg" alt="message user image" />
<div class="direct-chat-text">
Is this template really for free? That's unbelievable!
</div>
</div>
<div class="direct-chat-msg right">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
</div>
<img class="direct-chat-img" src="/assets/img/user3-128x128.jpg" alt="message user image" />
<div class="direct-chat-text">
You better believe it!
</div>
</div>
<div class="direct-chat-msg">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
</div>
<img class="direct-chat-img" src="/assets/img/user1-128x128.jpg" alt="message user image" />
<div class="direct-chat-text">
Working with AdminLTE on a great new app! Wanna join?
</div>
</div>
<div class="direct-chat-msg right">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span>
</div>
<img class="direct-chat-img" src="/assets/img/user3-128x128.jpg" alt="message user image" />
<div class="direct-chat-text">
I would love to.
</div>
</div>
</div>
<!--/.direct-chat-messages-->
<div class="direct-chat-contacts">
<ul class="contacts-list">
<li>
<a href="#">
<img class="contacts-list-img" src="/assets/img/user1-128x128.jpg" />
<div class="contacts-list-info">
<span class="contacts-list-name">
Count Dracula
<small class="contacts-list-date float-right">2/28/2015</small>
</span>
<span class="contacts-list-msg">How have you been? I was...</span>
</div>
</a>
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="/assets/img/user7-128x128.jpg" />
<div class="contacts-list-info">
<span class="contacts-list-name">
Sarah Doe
<small class="contacts-list-date float-right">2/23/2015</small>
</span>
<span class="contacts-list-msg">I will be waiting for...</span>
</div>
</a>
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="/assets/img/user3-128x128.jpg" />
<div class="contacts-list-info">
<span class="contacts-list-name">
Nadia Jolie
<small class="contacts-list-date float-right">2/20/2015</small>
</span>
<span class="contacts-list-msg">I'll call you back at...</span>
</div>
</a>
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="/assets/img/user5-128x128.jpg" />
<div class="contacts-list-info">
<span class="contacts-list-name">
Nora S. Vans
<small class="contacts-list-date float-right">2/10/2015</small>
</span>
<span class="contacts-list-msg">Where is your new...</span>
</div>
</a>
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="/assets/img/user6-128x128.jpg" />
<div class="contacts-list-info">
<span class="contacts-list-name">
John K.
<small class="contacts-list-date float-right">1/27/2015</small>
</span>
<span class="contacts-list-msg">Can I take a look at...</span>
</div>
</a>
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="/assets/img/user8-128x128.jpg" />
<div class="contacts-list-info">
<span class="contacts-list-name">
Kenneth M.
<small class="contacts-list-date float-right">1/4/2015</small>
</span>
<span class="contacts-list-msg">Never mind I found...</span>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="card-footer">
<form action="#" method="post">
<div class="input-group">
<input type="text" name="message" placeholder="Type Message ..." class="form-control" />
<span class="input-group-append">
<button type="button" class="btn btn-primary">Send</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="language-html max-height-300 highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Construct the card with style you want. Here we are using card-danger --></span>
<span class="c"><!-- Then add the class direct-chat and choose the direct-chat-* contexual class --></span>
<span class="c"><!-- The contextual class should match the card, so we are using direct-chat-danger --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-danger direct-chat direct-chat-danger"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span>
<span class="nt"><h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Direct Chat<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-tools"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">title=</span><span class="s">"3 New Messages"</span> <span class="na">class=</span><span class="s">"badge badge-light"</span><span class="nt">></span>3<span class="nt"></span></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-tool"</span> <span class="na">data-widget=</span><span class="s">"collapse"</span><span class="nt">></span>
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fas fa-minus"</span><span class="nt">></i></span>
<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-tool"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">title=</span><span class="s">"Contacts"</span> <span class="na">data-widget=</span><span class="s">"chat-pane-toggle"</span><span class="nt">></span>
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fas fa-comments"</span><span class="nt">></i></span>
<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-tool"</span> <span class="na">data-widget=</span><span class="s">"remove"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fas fa-times"</span><span class="nt">></i></span>
<span class="nt"></button></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="c"><!-- /.card-header --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
<span class="c"><!-- Conversations are loaded here --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"direct-chat-messages"</span><span class="nt">></span>
<span class="c"><!-- Message. Default to the left --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"direct-chat-msg"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"direct-chat-infos clearfix"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"direct-chat-name float-left"</span><span class="nt">></span>Alexander Pierce<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"direct-chat-timestamp float-right"</span><span class="nt">></span>23 Jan 2:00 pm<span class="nt"></span></span>
<span class="nt"></div></span>
<span class="c"><!-- /.direct-chat-infos --></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"direct-chat-img"</span> <span class="na">src=</span><span class="s">"/assets/img/user1-128x128.jpg"</span> <span class="na">alt=</span><span class="s">"message user image"</span><span class="nt">></span>
<span class="c"><!-- /.direct-chat-img --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"direct-chat-text"</span><span class="nt">></span>
Is this template really for free? That's unbelievable!
<span class="nt"></div></span>
<span class="c"><!-- /.direct-chat-text --></span>
<span class="nt"></div></span>
<span class="c"><!-- /.direct-chat-msg --></span>
<span class="c"><!-- Message to the right --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"direct-chat-msg right"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"direct-chat-infos clearfix"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"direct-chat-name float-right"</span><span class="nt">></span>Sarah Bullock<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"direct-chat-timestamp float-left"</span><span class="nt">></span>23 Jan 2:05 pm<span class="nt"></span></span>
<span class="nt"></div></span>
<span class="c"><!-- /.direct-chat-infos --></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"direct-chat-img"</span> <span class="na">src=</span><span class="s">"/assets/img/user3-128x128.jpg"</span> <span class="na">alt=</span><span class="s">"message user image"</span><span class="nt">></span>
<span class="c"><!-- /.direct-chat-img --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"direct-chat-text"</span><span class="nt">></span>
You better believe it!
<span class="nt"></div></span>
<span class="c"><!-- /.direct-chat-text --></span>
<span class="nt"></div></span>
<span class="c"><!-- /.direct-chat-msg --></span>
<span class="c"><!-- Message. Default to the left --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"direct-chat-msg"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"direct-chat-infos clearfix"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"direct-chat-name float-left"</span><span class="nt">></span>Alexander Pierce<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"direct-chat-timestamp float-right"</span><span class="nt">></span>23 Jan 5:37 pm<span class="nt"></span></span>
<span class="nt"></div></span>
<span class="c"><!-- /.direct-chat-infos --></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"direct-chat-img"</span> <span class="na">src=</span><span class="s">"/assets/img/user1-128x128.jpg"</span> <span class="na">alt=</span><span class="s">"message user image"</span><span class="nt">></span>
<span class="c"><!-- /.direct-chat-img --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"direct-chat-text"</span><span class="nt">></span>
Working with AdminLTE on a great new app! Wanna join?
<span class="nt"></div></span>
<span class="c"><!-- /.direct-chat-text --></span>
<span class="nt"></div></span>
<span class="c"><!-- /.direct-chat-msg --></span>
<span class="c"><!-- Message to the right --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"direct-chat-msg right"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"direct-chat-infos clearfix"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"direct-chat-name float-right"</span><span class="nt">></span>Sarah Bullock<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"direct-chat-timestamp float-left"</span><span class="nt">></span>23 Jan 6:10 pm<span class="nt"></span></span>
<span class="nt"></div></span>
<span class="c"><!-- /.direct-chat-infos --></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"direct-chat-img"</span> <span class="na">src=</span><span class="s">"/assets/img/user3-128x128.jpg"</span> <span class="na">alt=</span><span class="s">"message user image"</span><span class="nt">></span>
<span class="c"><!-- /.direct-chat-img --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"direct-chat-text"</span><span class="nt">></span>
I would love to.
<span class="nt"></div></span>
<span class="c"><!-- /.direct-chat-text --></span>
<span class="nt"></div></span>
<span class="c"><!-- /.direct-chat-msg --></span>
<span class="nt"></div></span>
<span class="c"><!--/.direct-chat-messages--></span>
<span class="c"><!-- Contacts are loaded here --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"direct-chat-contacts"</span><span class="nt">></span>
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"contacts-list"</span><span class="nt">></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"contacts-list-img"</span> <span class="na">src=</span><span class="s">"/assets/img/user1-128x128.jpg"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"contacts-list-info"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"contacts-list-name"</span><span class="nt">></span>
Count Dracula
<span class="nt"><small</span> <span class="na">class=</span><span class="s">"contacts-list-date float-right"</span><span class="nt">></span>2/28/2015<span class="nt"></small></span>
<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"contacts-list-msg"</span><span class="nt">></span>How have you been? I was...<span class="nt"></span></span>
<span class="nt"></div></span>
<span class="c"><!-- /.contacts-list-info --></span>
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="c"><!-- End Contact Item --></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"contacts-list-img"</span> <span class="na">src=</span><span class="s">"/assets/img/user7-128x128.jpg"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"contacts-list-info"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"contacts-list-name"</span><span class="nt">></span>
Sarah Doe
<span class="nt"><small</span> <span class="na">class=</span><span class="s">"contacts-list-date float-right"</span><span class="nt">></span>2/23/2015<span class="nt"></small></span>
<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"contacts-list-msg"</span><span class="nt">></span>I will be waiting for...<span class="nt"></span></span>
<span class="nt"></div></span>
<span class="c"><!-- /.contacts-list-info --></span>
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="c"><!-- End Contact Item --></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"contacts-list-img"</span> <span class="na">src=</span><span class="s">"/assets/img/user3-128x128.jpg"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"contacts-list-info"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"contacts-list-name"</span><span class="nt">></span>
Nadia Jolie
<span class="nt"><small</span> <span class="na">class=</span><span class="s">"contacts-list-date float-right"</span><span class="nt">></span>2/20/2015<span class="nt"></small></span>
<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"contacts-list-msg"</span><span class="nt">></span>I'll call you back at...<span class="nt"></span></span>
<span class="nt"></div></span>
<span class="c"><!-- /.contacts-list-info --></span>
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="c"><!-- End Contact Item --></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"contacts-list-img"</span> <span class="na">src=</span><span class="s">"/assets/img/user5-128x128.jpg"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"contacts-list-info"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"contacts-list-name"</span><span class="nt">></span>
Nora S. Vans
<span class="nt"><small</span> <span class="na">class=</span><span class="s">"contacts-list-date float-right"</span><span class="nt">></span>2/10/2015<span class="nt"></small></span>
<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"contacts-list-msg"</span><span class="nt">></span>Where is your new...<span class="nt"></span></span>
<span class="nt"></div></span>
<span class="c"><!-- /.contacts-list-info --></span>
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="c"><!-- End Contact Item --></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"contacts-list-img"</span> <span class="na">src=</span><span class="s">"/assets/img/user6-128x128.jpg"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"contacts-list-info"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"contacts-list-name"</span><span class="nt">></span>
John K.
<span class="nt"><small</span> <span class="na">class=</span><span class="s">"contacts-list-date float-right"</span><span class="nt">></span>1/27/2015<span class="nt"></small></span>
<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"contacts-list-msg"</span><span class="nt">></span>Can I take a look at...<span class="nt"></span></span>
<span class="nt"></div></span>
<span class="c"><!-- /.contacts-list-info --></span>
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="c"><!-- End Contact Item --></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"contacts-list-img"</span> <span class="na">src=</span><span class="s">"/assets/img/user8-128x128.jpg"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"contacts-list-info"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"contacts-list-name"</span><span class="nt">></span>
Kenneth M.
<span class="nt"><small</span> <span class="na">class=</span><span class="s">"contacts-list-date float-right"</span><span class="nt">></span>1/4/2015<span class="nt"></small></span>
<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"contacts-list-msg"</span><span class="nt">></span>Never mind I found...<span class="nt"></span></span>
<span class="nt"></div></span>
<span class="c"><!-- /.contacts-list-info --></span>
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="c"><!-- End Contact Item --></span>
<span class="nt"></ul></span>
<span class="c"><!-- /.contacts-list --></span>
<span class="nt"></div></span>
<span class="c"><!-- /.direct-chat-pane --></span>
<span class="nt"></div></span>
<span class="c"><!-- /.card-body --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-footer"</span><span class="nt">></span>
<span class="nt"><form</span> <span class="na">action=</span><span class="s">"#"</span> <span class="na">method=</span><span class="s">"post"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"message"</span> <span class="na">placeholder=</span><span class="s">"Type Message ..."</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-append"</span><span class="nt">></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Send<span class="nt"></button></span>
<span class="nt"></span></span>
<span class="nt"></div></span>
<span class="nt"></form></span>
<span class="nt"></div></span>
<span class="c"><!-- /.card-footer--></span>
<span class="nt"></div></span>
<span class="c"><!--/.direct-chat --></span>
</code></pre></div></div>
<h5 class="text-bold text-dark mt-5">Outline Direct Chat</h5>
<p>Of course you can use direct chat with a outline card by adding the class <code class="highlighter-rouge">.card-outline</code> to the card. Here are a couple of examples:</p>
<div class="row">
<div class="col-md-6">
<div class="card card-primary card-outline direct-chat direct-chat-primary">
<div class="card-header">
<h3 class="card-title">Direct Chat</h3>
<div class="card-tools">
<span data-toggle="tooltip" title="3 New Messages" class="badge badge-light">3</span>
<button type="button" class="btn btn-tool" data-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle">
<i class="fas fa-comments"></i>
</button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="direct-chat-messages">
<div class="direct-chat-msg">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
</div>
<img class="direct-chat-img" src="/assets/img/user1-128x128.jpg" alt="message user image" />
<div class="direct-chat-text">
Is this template really for free? That's unbelievable!
</div>
</div>
<div class="direct-chat-msg right">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
</div>
<img class="direct-chat-img" src="/assets/img/user3-128x128.jpg" alt="message user image" />
<div class="direct-chat-text">
You better believe it!
</div>
</div>
<div class="direct-chat-msg">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
</div>
<img class="direct-chat-img" src="/assets/img/user1-128x128.jpg" alt="message user image" />
<div class="direct-chat-text">
Working with AdminLTE on a great new app! Wanna join?
</div>
</div>
<div class="direct-chat-msg right">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span>
</div>
<img class="direct-chat-img" src="/assets/img/user3-128x128.jpg" alt="message user image" />
<div class="direct-chat-text">
I would love to.
</div>
</div>
</div>
<!--/.direct-chat-messages-->
<div class="direct-chat-contacts">
<ul class="contacts-list">
<li>
<a href="#">
<img class="contacts-list-img" src="/assets/img/user1-128x128.jpg" />
<div class="contacts-list-info">
<span class="contacts-list-name">
Count Dracula
<small class="contacts-list-date float-right">2/28/2015</small>
</span>
<span class="contacts-list-msg">How have you been? I was...</span>
</div>
</a>
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="/assets/img/user7-128x128.jpg" />
<div class="contacts-list-info">
<span class="contacts-list-name">
Sarah Doe
<small class="contacts-list-date float-right">2/23/2015</small>
</span>
<span class="contacts-list-msg">I will be waiting for...</span>
</div>
</a>
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="/assets/img/user3-128x128.jpg" />
<div class="contacts-list-info">
<span class="contacts-list-name">
Nadia Jolie
<small class="contacts-list-date float-right">2/20/2015</small>
</span>
<span class="contacts-list-msg">I'll call you back at...</span>
</div>
</a>
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="/assets/img/user5-128x128.jpg" />
<div class="contacts-list-info">
<span class="contacts-list-name">
Nora S. Vans
<small class="contacts-list-date float-right">2/10/2015</small>
</span>
<span class="contacts-list-msg">Where is your new...</span>
</div>
</a>
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="/assets/img/user6-128x128.jpg" />
<div class="contacts-list-info">
<span class="contacts-list-name">
John K.
<small class="contacts-list-date float-right">1/27/2015</small>
</span>
<span class="contacts-list-msg">Can I take a look at...</span>
</div>
</a>
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="/assets/img/user8-128x128.jpg" />
<div class="contacts-list-info">
<span class="contacts-list-name">
Kenneth M.
<small class="contacts-list-date float-right">1/4/2015</small>
</span>
<span class="contacts-list-msg">Never mind I found...</span>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="card-footer">
<form action="#" method="post">
<div class="input-group">
<input type="text" name="message" placeholder="Type Message ..." class="form-control" />
<span class="input-group-append">
<button type="button" class="btn btn-primary">Send</button>
</span>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card card-danger card-outline direct-chat direct-chat-danger">
<div class="card-header">
<h3 class="card-title">Direct Chat</h3>
<div class="card-tools">
<span data-toggle="tooltip" title="3 New Messages" class="badge badge-light">3</span>
<button type="button" class="btn btn-tool" data-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle">
<i class="fas fa-comments"></i>
</button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="direct-chat-messages">
<div class="direct-chat-msg">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
</div>
<img class="direct-chat-img" src="/assets/img/user1-128x128.jpg" alt="message user image" />
<div class="direct-chat-text">
Is this template really for free? That's unbelievable!
</div>
</div>
<div class="direct-chat-msg right">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
</div>
<img class="direct-chat-img" src="/assets/img/user3-128x128.jpg" alt="message user image" />
<div class="direct-chat-text">
You better believe it!
</div>
</div>
<div class="direct-chat-msg">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
</div>
<img class="direct-chat-img" src="/assets/img/user1-128x128.jpg" alt="message user image" />
<div class="direct-chat-text">
Working with AdminLTE on a great new app! Wanna join?
</div>
</div>
<div class="direct-chat-msg right">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span>
</div>
<img class="direct-chat-img" src="/assets/img/user3-128x128.jpg" alt="message user image" />
<div class="direct-chat-text">
I would love to.
</div>
</div>
</div>
<!--/.direct-chat-messages-->
<div class="direct-chat-contacts">
<ul class="contacts-list">
<li>
<a href="#">
<img class="contacts-list-img" src="/assets/img/user1-128x128.jpg" />
<div class="contacts-list-info">
<span class="contacts-list-name">
Count Dracula
<small class="contacts-list-date float-right">2/28/2015</small>
</span>
<span class="contacts-list-msg">How have you been? I was...</span>
</div>
</a>
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="/assets/img/user7-128x128.jpg" />
<div class="contacts-list-info">
<span class="contacts-list-name">
Sarah Doe
<small class="contacts-list-date float-right">2/23/2015</small>
</span>
<span class="contacts-list-msg">I will be waiting for...</span>
</div>
</a>
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="/assets/img/user3-128x128.jpg" />
<div class="contacts-list-info">
<span class="contacts-list-name">
Nadia Jolie
<small class="contacts-list-date float-right">2/20/2015</small>
</span>
<span class="contacts-list-msg">I'll call you back at...</span>
</div>
</a>
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="/assets/img/user5-128x128.jpg" />
<div class="contacts-list-info">
<span class="contacts-list-name">
Nora S. Vans
<small class="contacts-list-date float-right">2/10/2015</small>
</span>
<span class="contacts-list-msg">Where is your new...</span>
</div>
</a>
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="/assets/img/user6-128x128.jpg" />
<div class="contacts-list-info">
<span class="contacts-list-name">
John K.
<small class="contacts-list-date float-right">1/27/2015</small>
</span>
<span class="contacts-list-msg">Can I take a look at...</span>
</div>
</a>
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="/assets/img/user8-128x128.jpg" />
<div class="contacts-list-info">
<span class="contacts-list-name">
Kenneth M.
<small class="contacts-list-date float-right">1/4/2015</small>
</span>
<span class="contacts-list-msg">Never mind I found...</span>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="card-footer">
<form action="#" method="post">
<div class="input-group">
<input type="text" name="message" placeholder="Type Message ..." class="form-control" />
<span class="input-group-append">
<button type="button" class="btn btn-primary">Send</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="main-footer">
<div class="float-right d-none d-sm-inline">
v3.0.1
</div>
<strong>Copyright © 2014-2019 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
</footer>
</div>
<script src="/assets/plugins/jquery/jquery.min.js"></script>
<script src="/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/assets/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<script src="/assets/js/adminlte.min.js"></script>
</body>
</html>