src/ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/documentation/build/include/components.html

   1 <section id="components" data-spy="scroll" data-target="#scrollspy-components">
   2   <h2 class="page-header"><a href="#components">Components</a></h2>
   3   <div class="callout callout-info lead">
   4     <h4>Reminder!</h4>
   5     <p>
   6       AdminLTE uses all of Bootstrap 3 components. It's a good start to review
   7       the <a href="http://getbootstrap.com">Bootstrap documentation</a> to get an idea of the various components
   8       that this documentation <b>does not</b> cover.
   9     </p>
  10   </div>
  11   <div class="callout callout-danger lead">
  12     <h4>Tip!</h4>
  13     <p>
  14       If you go through the example pages and would like to copy a component, right-click on
  15       the component and choose "inspect element" to get to the HTML quicker than scanning
  16       the HTML page.
  17     </p>
  18   </div>
  19   <h3 id="component-main-header">Main Header</h3>
  20   <p class="lead">The main header contains the logo and navbar. Construction of the
  21     navbar differs slightly from Bootstrap because it has components that Bootstrap doesn't provide.
  22     The navbar can be constructed in two way. This an example for the normal navbar and next we will provide an example for
  23     the top nav layout.</p>
  24   <div class="box box-solid">
  25     <div class="box-body" style="position: relative;">
  26       <span class="eg">Main Header Example</span>
  27       <header class="main-header" style="position: relative;">
  28         <!-- Logo -->
  29         <a href="index2.html" class="logo" style="position: relative;"><b>Admin</b>LTE</a>
  30         <!-- Header Navbar: style can be found in header.less -->
  31         <nav class="navbar" role="navigation" style="border: 0;max-height: 50px;">
  32           <!-- Sidebar toggle button-->
  33           <a href="#" class="sidebar-toggle" role="button">
  34             <span class="sr-only">Toggle navigation</span>
  35           </a>
  36           <!-- Navbar Right Menu -->
  37           <div class="navbar-custom-menu">
  38             <ul class="nav navbar-nav">
  39               <!-- Messages: style can be found in dropdown.less-->
  40               <li class="dropdown messages-menu">
  41                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  42                   <i class="fa fa-envelope-o"></i>
  43                   <span class="label label-success">4</span>
  44                 </a>
  45                 <ul class="dropdown-menu">
  46                   <li class="header">You have 4 messages</li>
  47                   <li>
  48                     <!-- inner menu: contains the actual data -->
  49                     <ul class="menu">
  50                       <li><!-- start message -->
  51                         <a href="#">
  52                           <div class="pull-left">
  53                             <img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
  54                           </div>
  55                           <h4>
  56                             Support Team
  57                             <small><i class="fa fa-clock-o"></i> 5 mins</small>
  58                           </h4>
  59                           <p>Why not buy a new awesome theme?</p>
  60                         </a>
  61                       </li><!-- end message -->
  62                     </ul>
  63                   </li>
  64                   <li class="footer"><a href="#">See All Messages</a></li>
  65                 </ul>
  66               </li>
  67               <!-- Notifications: style can be found in dropdown.less -->
  68               <li class="dropdown notifications-menu">
  69                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  70                   <i class="fa fa-bell-o"></i>
  71                   <span class="label label-warning">10</span>
  72                 </a>
  73                 <ul class="dropdown-menu">
  74                   <li class="header">You have 10 notifications</li>
  75                   <li>
  76                     <!-- inner menu: contains the actual data -->
  77                     <ul class="menu">
  78                       <li>
  79                         <a href="#">
  80                           <i class="fa fa-users text-aqua"></i> 5 new members joined today
  81                         </a>
  82                       </li>
  83                     </ul>
  84                   </li>
  85                   <li class="footer"><a href="#">View all</a></li>
  86                 </ul>
  87               </li>
  88               <!-- Tasks: style can be found in dropdown.less -->
  89               <li class="dropdown tasks-menu">
  90                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  91                   <i class="fa fa-flag-o"></i>
  92                   <span class="label label-danger">9</span>
  93                 </a>
  94                 <ul class="dropdown-menu">
  95                   <li class="header">You have 9 tasks</li>
  96                   <li>
  97                     <!-- inner menu: contains the actual data -->
  98                     <ul class="menu">
  99                       <li><!-- Task item -->
 100                         <a href="#">
 101                           <h3>
 102                             Design some buttons
 103                             <small class="pull-right">20%</small>
 104                           </h3>
 105                           <div class="progress xs">
 106                             <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 107                               <span class="sr-only">20% Complete</span>
 108                             </div>
 109                           </div>
 110                         </a>
 111                       </li><!-- end task item -->
 112                     </ul>
 113                   </li>
 114                   <li class="footer">
 115                     <a href="#">View all tasks</a>
 116                   </li>
 117                 </ul>
 118               </li>
 119               <!-- User Account: style can be found in dropdown.less -->
 120               <li class="dropdown user user-menu">
 121                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 122                   <img src="../dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
 123                   <span class="hidden-xs">Alexander Pierce</span>
 124                 </a>
 125                 <ul class="dropdown-menu">
 126                   <!-- User image -->
 127                   <li class="user-header">
 128                     <img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
 129                     <p>
 130                       Alexander Pierce - Web Developer
 131                       <small>Member since Nov. 2012</small>
 132                     </p>
 133                   </li>
 134                   <!-- Menu Body -->
 135                   <li class="user-body">
 136                     <div class="col-xs-4 text-center">
 137                       <a href="#">Followers</a>
 138                     </div>
 139                     <div class="col-xs-4 text-center">
 140                       <a href="#">Sales</a>
 141                     </div>
 142                     <div class="col-xs-4 text-center">
 143                       <a href="#">Friends</a>
 144                     </div>
 145                   </li>
 146                   <!-- Menu Footer-->
 147                   <li class="user-footer">
 148                     <div class="pull-left">
 149                       <a href="#" class="btn btn-default btn-flat">Profile</a>
 150                     </div>
 151                     <div class="pull-right">
 152                       <a href="#" class="btn btn-default btn-flat">Sign out</a>
 153                     </div>
 154                   </li>
 155                 </ul>
 156               </li>
 157             </ul>
 158           </div>
 159         </nav>
 160       </header>
 161     </div>
 162   </div>
 163   <pre class="prettyprint">&LT;header class="main-header">
 164   &LT;a href="../../index2.html" class="logo">
 165     &LT;!-- LOGO -->
 166     AdminLTE
 167   &LT;/a>
 168   &LT;!-- Header Navbar: style can be found in header.less -->
 169   &LT;nav class="navbar navbar-static-top" role="navigation">
 170     &LT;!-- Navbar Right Menu -->
 171     &LT;div class="navbar-custom-menu">
 172       &LT;ul class="nav navbar-nav">
 173         &LT;!-- Messages: style can be found in dropdown.less-->
 174         &LT;li class="dropdown messages-menu">
 175           &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
 176             &LT;i class="fa fa-envelope-o">&LT;/i>
 177             &LT;span class="label label-success">4&LT;/span>
 178           &LT;/a>
 179           &LT;ul class="dropdown-menu">
 180             &LT;li class="header">You have 4 messages&LT;/li>
 181             &LT;li>
 182               &LT;!-- inner menu: contains the actual data -->
 183               &LT;ul class="menu">
 184                 &LT;li>&LT;!-- start message -->
 185                   &LT;a href="#">
 186                     &LT;div class="pull-left">
 187                       &LT;img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
 188                     &LT;/div>
 189                     &LT;h4>
 190                       Sender Name
 191                       &LT;small>&LT;i class="fa fa-clock-o">&LT;/i> 5 mins&LT;/small>
 192                     &LT;/h4>
 193                     &LT;p>Message Excerpt&LT;/p>
 194                   &LT;/a>
 195                 &LT;/li>&LT;!-- end message -->
 196                 ...
 197               &LT;/ul>
 198             &LT;/li>
 199             &LT;li class="footer">&LT;a href="#">See All Messages&LT;/a>&LT;/li>
 200           &LT;/ul>
 201         &LT;/li>
 202         &LT;!-- Notifications: style can be found in dropdown.less -->
 203         &LT;li class="dropdown notifications-menu">
 204           &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
 205             &LT;i class="fa fa-bell-o">&LT;/i>
 206             &LT;span class="label label-warning">10&LT;/span>
 207           &LT;/a>
 208           &LT;ul class="dropdown-menu">
 209             &LT;li class="header">You have 10 notifications&LT;/li>
 210             &LT;li>
 211               &LT;!-- inner menu: contains the actual data -->
 212               &LT;ul class="menu">
 213                 &LT;li>
 214                   &LT;a href="#">
 215                     &LT;i class="ion ion-ios-people info">&LT;/i> Notification title
 216                   &LT;/a>
 217                 &LT;/li>
 218                 ...
 219               &LT;/ul>
 220             &LT;/li>
 221             &LT;li class="footer">&LT;a href="#">View all&LT;/a>&LT;/li>
 222           &LT;/ul>
 223         &LT;/li>
 224         &LT;!-- Tasks: style can be found in dropdown.less -->
 225         &LT;li class="dropdown tasks-menu">
 226           &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
 227             &LT;i class="fa fa-flag-o">&LT;/i>
 228             &LT;span class="label label-danger">9&LT;/span>
 229           &LT;/a>
 230           &LT;ul class="dropdown-menu">
 231             &LT;li class="header">You have 9 tasks&LT;/li>
 232             &LT;li>
 233               &LT;!-- inner menu: contains the actual data -->
 234               &LT;ul class="menu">
 235                 &LT;li>&LT;!-- Task item -->
 236                   &LT;a href="#">
 237                     &LT;h3>
 238                       Design some buttons
 239                       &LT;small class="pull-right">20%&LT;/small>
 240                     &LT;/h3>
 241                     &LT;div class="progress xs">
 242                       &LT;div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 243                         &LT;span class="sr-only">20% Complete&LT;/span>
 244                       &LT;/div>
 245                     &LT;/div>
 246                   &LT;/a>
 247                 &LT;/li>&LT;!-- end task item -->
 248                 ...
 249               &LT;/ul>
 250             &LT;/li>
 251             &LT;li class="footer">
 252               &LT;a href="#">View all tasks&LT;/a>
 253             &LT;/li>
 254           &LT;/ul>
 255         &LT;/li>
 256         &LT;!-- User Account: style can be found in dropdown.less -->
 257         &LT;li class="dropdown user user-menu">
 258           &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
 259             &LT;img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
 260             &LT;span class="hidden-xs">Alexander Pierce&LT;/span>
 261           &LT;/a>
 262           &LT;ul class="dropdown-menu">
 263             &LT;!-- User image -->
 264             &LT;li class="user-header">
 265               &LT;img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
 266               &LT;p>
 267                 Alexander Pierce - Web Developer
 268                 &LT;small>Member since Nov. 2012&LT;/small>
 269               &LT;/p>
 270             &LT;/li>
 271             &LT;!-- Menu Body -->
 272             &LT;li class="user-body">
 273               &LT;div class="col-xs-4 text-center">
 274                 &LT;a href="#">Followers&LT;/a>
 275               &LT;/div>
 276               &LT;div class="col-xs-4 text-center">
 277                 &LT;a href="#">Sales&LT;/a>
 278               &LT;/div>
 279               &LT;div class="col-xs-4 text-center">
 280                 &LT;a href="#">Friends&LT;/a>
 281               &LT;/div>
 282             &LT;/li>
 283             &LT;!-- Menu Footer-->
 284             &LT;li class="user-footer">
 285               &LT;div class="pull-left">
 286                 &LT;a href="#" class="btn btn-default btn-flat">Profile&LT;/a>
 287               &LT;/div>
 288               &LT;div class="pull-right">
 289                 &LT;a href="#" class="btn btn-default btn-flat">Sign out&LT;/a>
 290               &LT;/div>
 291             &LT;/li>
 292           &LT;/ul>
 293         &LT;/li>
 294       &LT;/ul>
 295     &LT;/div>
 296   &LT;/nav>
 297 &LT;/header></pre>
 298   <h4>Top Nav Layout. Main Header Example.</h4>
 299   <div class="callout callout-info lead">
 300     <h4>Reminder!</h4>
 301     <p>To use this main header instead of the regular one, you must add the <code>layout-top-nav</code> class to the body tag.</p>
 302   </div>
 303   <div class="box box-solid">
 304     <div class="box-body layout-top-nav">
 305       <span class="eg">Top Nav Example</span>
 306       <header class="main-header">
 307         <nav class="navbar navbar-static-top">
 308           <div class="container-fluid">
 309             <div class="navbar-header">
 310               <a href="../../index2.html" class="navbar-brand"><b>Admin</b>LTE</a>
 311               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
 312                 <i class="fa fa-bars"></i>
 313               </button>
 314             </div>
 315
 316             <!-- Collect the nav links, forms, and other content for toggling -->
 317             <div class="collapse navbar-collapse" id="navbar-collapse">
 318               <ul class="nav navbar-nav">
 319                 <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
 320                 <li><a href="#">Link</a></li>
 321                 <li class="dropdown">
 322                   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
 323                   <ul class="dropdown-menu" role="menu">
 324                     <li><a href="#">Action</a></li>
 325                     <li><a href="#">Another action</a></li>
 326                     <li><a href="#">Something else here</a></li>
 327                     <li class="divider"></li>
 328                     <li><a href="#">Separated link</a></li>
 329                     <li class="divider"></li>
 330                     <li><a href="#">One more separated link</a></li>
 331                   </ul>
 332                 </li>
 333               </ul>
 334               <form class="navbar-form navbar-left" role="search">
 335                 <div class="form-group">
 336                   <input type="text" class="form-control" id="navbar-search-input" placeholder="Search">
 337                 </div>
 338               </form>
 339               <ul class="nav navbar-nav navbar-right">
 340                 <li><a href="#">Link</a></li>
 341                 <li class="dropdown">
 342                   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
 343                   <ul class="dropdown-menu" role="menu">
 344                     <li><a href="#">Action</a></li>
 345                     <li><a href="#">Another action</a></li>
 346                     <li><a href="#">Something else here</a></li>
 347                     <li class="divider"></li>
 348                     <li><a href="#">Separated link</a></li>
 349                   </ul>
 350                 </li>
 351               </ul>
 352             </div><!-- /.navbar-collapse -->
 353           </div><!-- /.container-fluid -->
 354         </nav>
 355       </header>
 356     </div>
 357   </div>
 358   <pre class="prettyprint">
 359 &LT;header class="main-header">
 360   &LT;nav class="navbar navbar-static-top">
 361     &LT;div class="container-fluid">
 362     &LT;div class="navbar-header">
 363       &LT;a href="../../index2.html" class="navbar-brand">&LT;b>Admin&LT;/b>LTE&LT;/a>
 364       &LT;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
 365         &LT;i class="fa fa-bars">&LT;/i>
 366       &LT;/button>
 367     &LT;/div>
 368
 369     &LT;!-- Collect the nav links, forms, and other content for toggling -->
 370     &LT;div class="collapse navbar-collapse" id="navbar-collapse">
 371       &LT;ul class="nav navbar-nav">
 372         &LT;li class="active">&LT;a href="#">Link &LT;span class="sr-only">(current)&LT;/span>&LT;/a>&LT;/li>
 373         &LT;li>&LT;a href="#">Link&LT;/a>&LT;/li>
 374         &LT;li class="dropdown">
 375           &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown &LT;span class="caret">&LT;/span>&LT;/a>
 376           &LT;ul class="dropdown-menu" role="menu">
 377             &LT;li>&LT;a href="#">Action&LT;/a>&LT;/li>
 378             &LT;li>&LT;a href="#">Another action&LT;/a>&LT;/li>
 379             &LT;li>&LT;a href="#">Something else here&LT;/a>&LT;/li>
 380             &LT;li class="divider">&LT;/li>
 381             &LT;li>&LT;a href="#">Separated link&LT;/a>&LT;/li>
 382             &LT;li class="divider">&LT;/li>
 383             &LT;li>&LT;a href="#">One more separated link&LT;/a>&LT;/li>
 384           &LT;/ul>
 385         &LT;/li>
 386       &LT;/ul>
 387       &LT;form class="navbar-form navbar-left" role="search">
 388         &LT;div class="form-group">
 389           &LT;input type="text" class="form-control" id="navbar-search-input" placeholder="Search">
 390         &LT;/div>
 391       &LT;/form>
 392       &LT;ul class="nav navbar-nav navbar-right">
 393         &LT;li>&LT;a href="#">Link&LT;/a>&LT;/li>
 394         &LT;li class="dropdown">
 395           &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown &LT;span class="caret">&LT;/span>&LT;/a>
 396           &LT;ul class="dropdown-menu" role="menu">
 397             &LT;li>&LT;a href="#">Action&LT;/a>&LT;/li>
 398             &LT;li>&LT;a href="#">Another action&LT;/a>&LT;/li>
 399             &LT;li>&LT;a href="#">Something else here&LT;/a>&LT;/li>
 400             &LT;li class="divider">&LT;/li>
 401             &LT;li>&LT;a href="#">Separated link&LT;/a>&LT;/li>
 402           &LT;/ul>
 403         &LT;/li>
 404       &LT;/ul>
 405     &LT;/div>&LT;!-- /.navbar-collapse -->
 406     &LT;/div>&LT;!-- /.container-fluid -->
 407   &LT;/nav>
 408 &LT;/header></pre>
 409
 410   <!-- ===================================================================== -->
 411
 412   <h3 id="component-sidebar">Sidebar</h3>
 413   <p class="lead">
 414     The sidebar used in this page to the left provides an example of what your sidebar should like.
 415     Construction of a sidebar:
 416   </p>
 417   <pre class="prettyprint">
 418 &LT;div class="main-sidebar">
 419   &LT;!-- Inner sidebar -->
 420   &LT;div class="sidebar">
 421     &LT;!-- user panel (Optional) -->
 422     &LT;div class="user-panel">
 423       &LT;div class="pull-left image">
 424         &LT;img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
 425       &LT;/div>
 426       &LT;div class="pull-left info">
 427         &LT;p>User Name&LT;/p>
 428
 429         &LT;a href="#">&LT;i class="fa fa-circle text-success">&LT;/i> Online&LT;/a>
 430       &LT;/div>
 431     &LT;/div>&LT;!-- /.user-panel -->
 432
 433     &LT;!-- Search Form (Optional) -->
 434     &LT;form action="#" method="get" class="sidebar-form">
 435       &LT;div class="input-group">
 436         &LT;input type="text" name="q" class="form-control" placeholder="Search...">
 437         &LT;span class="input-group-btn">
 438           &LT;button type="submit" name="search" id="search-btn" class="btn btn-flat">&LT;i class="fa fa-search">&LT;/i>&LT;/button>
 439         &LT;/span>
 440       &LT;/div>
 441     &LT;/form>&LT;!-- /.sidebar-form -->
 442
 443     &LT;!-- Sidebar Menu -->
 444     &LT;ul class="sidebar-menu">
 445       &LT;li class="header">HEADER&LT;/li>
 446       &LT;!-- Optionally, you can add icons to the links -->
 447       &LT;li class="active">&LT;a href="#">&LT;span>Link&LT;/span>&LT;/a>&LT;&LT;/li>
 448       &LT;li>&LT;a href="#">&LT;span>Another Link&LT;/span>&LT;/a>&LT;/li>
 449       &LT;li class="treeview">
 450         &LT;a href="#">&LT;span>Multilevel&LT;/span> &LT;i class="fa fa-angle-left pull-right">&LT;/i>&LT;/a>
 451         &LT;ul class="treeview-menu">
 452           &LT;li>&LT;a href="#">Link in level 2&LT;/a>&LT;/li>
 453           &LT;li>&LT;a href="#">Link in level 2&LT;/a>&LT;/li>
 454         &LT;/ul>
 455       &LT;/li>
 456     &LT;/ul>&LT;!-- /.sidebar-menu -->
 457
 458   &LT;/div>&LT;!-- /.sidebar -->
 459 &LT;/div>&LT;!-- /.main-sidebar --></pre>
 460
 461   <h3 id="component-control-sidebar">Control Sidebar</h3>
 462   <p class="lead">Control sidebar is the right side bar. It can be used for many purposes and is extremely easy
 463     to create. The sidebar ships with two different show/hide styles. The first allows the sidebar to
 464   slide over the content. The second pushes the content to make space for the sidebar. Either of
 465   these methods can be set through the <a href="#adminlte-options">Javascript options</a>.</p>
 466   <p class="lead">The following code should be placed within the <code>.wrapper</code> div. I prefer
 467   to place it right after the footer.</p>
 468   <p class="lead">Dark Sidebar Markup</p>
 469 <pre class="prettyprint"><code class="lang-html">&LT;!-- The Right Sidebar -->
 470 &LT;aside class="control-sidebar control-sidebar-dark">
 471   &LT;!-- Content of the sidebar goes here -->
 472 &LT;/aside>
 473 &LT;!-- The sidebar's background -->
 474 &LT;!-- This div must placed right after the sidebar for it to work-->
 475 &LT;div class="control-sidebar-bg">&LT;/div></code></pre>
 476
 477   <p class="lead">Light Sidebar Markup</p>
 478 <pre class="prettyprint"><code class="lang-html">&LT;!-- The Right Sidebar -->
 479 &LT;aside class="control-sidebar control-sidebar-light">
 480   &LT;!-- Content of the sidebar goes here -->
 481 &LT;/aside>
 482 &LT;!-- The sidebar's background -->
 483 &LT;!-- This div must placed right after the sidebar for it to work-->
 484 &LT;div class="control-sidebar-bg">&LT;/div></code></pre>
 485
 486   <p class="lead">Once you create the sidebar, you will need a toggle button to open/close it.
 487   By adding the attribute <code>data-toggle="control-sidebar"</code> to any button, it will
 488   automatically act as the toggle button.</p>
 489
 490   <p class="lead">Toggle Button Example</p>
 491   <button class="btn btn-primary" data-toggle="control-sidebar">Toggle Right Sidebar</button><br><br>
 492
 493   <p class="lead">Sidebar Toggle Markup</p>
 494   <pre class="prettyprint"><code class="lang-html">&LT;button class="btn btn-default" data-toggle="control-sidebar">Toggle Right Sidebar&LT;/button></code></pre>
 495   <!-- ===================================================================== -->
 496
 497   <h3 id="component-info-box">Info Box</h3>
 498   <p class="lead">Info boxes are used to display statistical snippets. There are two types of info boxes.</p>
 499   <h4>First Type of Info Boxes</h4>
 500   <!-- Info Boxes -->
 501   <div class="row">
 502     <div class="col-md-3 col-sm-6 col-xs-12">
 503       <div class="info-box">
 504         <span class="info-box-icon bg-aqua"><i class="fa fa-envelope-o"></i></span>
 505         <div class="info-box-content">
 506           <span class="info-box-text">Messages</span>
 507           <span class="info-box-number">1,410</span>
 508         </div><!-- /.info-box-content -->
 509       </div><!-- /.info-box -->
 510     </div><!-- /.col -->
 511     <div class="col-md-3 col-sm-6 col-xs-12">
 512       <div class="info-box">
 513         <span class="info-box-icon bg-green"><i class="fa fa-flag-o"></i></span>
 514         <div class="info-box-content">
 515           <span class="info-box-text">Bookmarks</span>
 516           <span class="info-box-number">410</span>
 517         </div><!-- /.info-box-content -->
 518       </div><!-- /.info-box -->
 519     </div><!-- /.col -->
 520     <div class="col-md-3 col-sm-6 col-xs-12">
 521       <div class="info-box">
 522         <span class="info-box-icon bg-yellow"><i class="fa fa-files-o"></i></span>
 523         <div class="info-box-content">
 524           <span class="info-box-text">Uploads</span>
 525           <span class="info-box-number">13,648</span>
 526         </div><!-- /.info-box-content -->
 527       </div><!-- /.info-box -->
 528     </div><!-- /.col -->
 529     <div class="col-md-3 col-sm-6 col-xs-12">
 530       <div class="info-box">
 531         <span class="info-box-icon bg-red"><i class="fa fa-star-o"></i></span>
 532         <div class="info-box-content">
 533           <span class="info-box-text">Likes</span>
 534           <span class="info-box-number">93,139</span>
 535         </div><!-- /.info-box-content -->
 536       </div><!-- /.info-box -->
 537     </div><!-- /.col -->
 538   </div><!-- /.row -->
 539   <p class="lead">Markup</p>
 540   <pre class="prettyprint"><code class="lang-html">&LT;div class="info-box">
 541   &LT;!-- Apply any bg-* class to to the icon to color it -->
 542   &LT;span class="info-box-icon bg-red">&LT;i class="fa fa-star-o">&LT;/i>&LT;/span>
 543   &LT;div class="info-box-content">
 544     &LT;span class="info-box-text">Likes&LT;/span>
 545     &LT;span class="info-box-number">93,139&LT;/span>
 546   &LT;/div>&LT;!-- /.info-box-content -->
 547 &LT;/div>&LT;!-- /.info-box --></code></pre>
 548
 549   <h4>Second Type of Info Boxes</h4>
 550   <div class="row">
 551     <div class="col-md-3 col-sm-6 col-xs-12">
 552       <div class="info-box bg-aqua">
 553         <span class="info-box-icon"><i class="fa fa-bookmark-o"></i></span>
 554         <div class="info-box-content">
 555           <span class="info-box-text">Bookmarks</span>
 556           <span class="info-box-number">41,410</span>
 557           <div class="progress">
 558             <div class="progress-bar" style="width: 70%"></div>
 559           </div>
 560           <span class="progress-description">
 561             70% Increase in 30 Days
 562           </span>
 563         </div><!-- /.info-box-content -->
 564       </div><!-- /.info-box -->
 565     </div><!-- /.col -->
 566     <div class="col-md-3 col-sm-6 col-xs-12">
 567       <div class="info-box bg-green">
 568         <span class="info-box-icon"><i class="fa fa-thumbs-o-up"></i></span>
 569         <div class="info-box-content">
 570           <span class="info-box-text">Likes</span>
 571           <span class="info-box-number">41,410</span>
 572           <div class="progress">
 573             <div class="progress-bar" style="width: 70%"></div>
 574           </div>
 575           <span class="progress-description">
 576             70% Increase in 30 Days
 577           </span>
 578         </div><!-- /.info-box-content -->
 579       </div><!-- /.info-box -->
 580     </div><!-- /.col -->
 581     <div class="col-md-3 col-sm-6 col-xs-12">
 582       <div class="info-box bg-yellow">
 583         <span class="info-box-icon"><i class="fa fa-calendar"></i></span>
 584         <div class="info-box-content">
 585           <span class="info-box-text">Events</span>
 586           <span class="info-box-number">41,410</span>
 587           <div class="progress">
 588             <div class="progress-bar" style="width: 70%"></div>
 589           </div>
 590           <span class="progress-description">
 591             70% Increase in 30 Days
 592           </span>
 593         </div><!-- /.info-box-content -->
 594       </div><!-- /.info-box -->
 595     </div><!-- /.col -->
 596     <div class="col-md-3 col-sm-6 col-xs-12">
 597       <div class="info-box bg-red">
 598         <span class="info-box-icon"><i class="fa fa-comments-o"></i></span>
 599         <div class="info-box-content">
 600           <span class="info-box-text">Comments</span>
 601           <span class="info-box-number">41,410</span>
 602           <div class="progress">
 603             <div class="progress-bar" style="width: 70%"></div>
 604           </div>
 605           <span class="progress-description">
 606             70% Increase in 30 Days
 607           </span>
 608         </div><!-- /.info-box-content -->
 609       </div><!-- /.info-box -->
 610     </div><!-- /.col -->
 611   </div><!-- /.row -->
 612   <p class="lead">Markup</p>
 613   <pre class="prettyprint"><code class="lang-html">&LT;!-- Apply any bg-* class to to the info-box to color it -->
 614 &LT;div class="info-box bg-red">
 615   &LT;span class="info-box-icon">&LT;i class="fa fa-comments-o">&LT;/i>&LT;/span>
 616   &LT;div class="info-box-content">
 617     &LT;span class="info-box-text">Likes&LT;/span>
 618     &LT;span class="info-box-number">41,410&LT;/span>
 619     &LT;!-- The progress section is optional -->
 620     &LT;div class="progress">
 621       &LT;div class="progress-bar" style="width: 70%">&LT;/div>
 622     &LT;/div>
 623     &LT;span class="progress-description">
 624       70% Increase in 30 Days
 625     &LT;/span>
 626   &LT;/div>&LT;!-- /.info-box-content -->
 627 &LT;/div>&LT;!-- /.info-box --></code></pre>
 628   <p class="lead">The only thing you need to change to alternate between these style is change the placement of the bg-* class. For the
 629     first style apply any bg-* class to the icon itself. For the other style, apply the bg-* class to the info-box div.</p>
 630   <!-- ===================================================================== -->
 631
 632   <h3 id="component-box">Box</h3>
 633   <p class="lead">The box component is the most widely used component through out this template. You can
 634     use it for anything from displaying charts to just blocks of text. It comes in many different
 635     styles that we will explore below.</p>
 636   <h4>Default Box Markup</h4>
 637   <div class="box">
 638     <div class="box-header with-border">
 639       <h3 class="box-title">Default Box Example</h3>
 640       <div class="box-tools pull-right">
 641         <!-- Buttons, labels, and many other things can be placed here! -->
 642         <!-- Here is a label for example -->
 643         <span class="label label-primary">Label</span>
 644       </div><!-- /.box-tools -->
 645     </div><!-- /.box-header -->
 646     <div class="box-body">
 647       The body of the box
 648     </div><!-- /.box-body -->
 649     <div class="box-footer">
 650       The footer of the box
 651     </div><!-- box-footer -->
 652   </div><!-- /.box -->
 653   <pre class="prettyprint">&LT;div class="box">
 654   &LT;div class="box-header with-border">
 655     &LT;h3 class="box-title">Default Box Example&LT;/h3>
 656     &LT;div class="box-tools pull-right">
 657       &LT;!-- Buttons, labels, and many other things can be placed here! -->
 658       &LT;!-- Here is a label for example -->
 659       &LT;span class="label label-primary">Label&LT;/span>
 660     &LT;/div>&LT;!-- /.box-tools -->
 661   &LT;/div>&LT;!-- /.box-header -->
 662   &LT;div class="box-body">
 663     The body of the box
 664   &LT;/div>&LT;!-- /.box-body -->
 665   &LT;div class="box-footer">
 666     The footer of the box
 667   &LT;/div>&LT;!-- box-footer -->
 668 &LT;/div>&LT;!-- /.box --></pre>
 669   <h4>Box Variants</h4>
 670   <p class="lead">You can change the style of the box by adding any of the contextual classes.</p>
 671   <div class="row">
 672     <div class="col-md-4">
 673       <div class="box">
 674         <div class="box-header with-border">
 675           <h3 class="box-title">Default Box Example</h3>
 676         </div><!-- /.box-header -->
 677         <div class="box-body">
 678           The body of the box
 679         </div><!-- /.box-body -->
 680       </div><!-- /.box -->
 681     </div>
 682     <div class="col-md-4">
 683       <div class="box box-primary">
 684         <div class="box-header with-border">
 685           <h3 class="box-title">Primary Box Example</h3>
 686         </div><!-- /.box-header -->
 687         <div class="box-body">
 688           The body of the box
 689         </div><!-- /.box-body -->
 690       </div><!-- /.box -->
 691     </div>
 692     <div class="col-md-4">
 693       <div class="box box-info">
 694         <div class="box-header with-border">
 695           <h3 class="box-title">Info Box Example</h3>
 696         </div><!-- /.box-header -->
 697         <div class="box-body">
 698           The body of the box
 699         </div><!-- /.box-body -->
 700       </div><!-- /.box -->
 701     </div>
 702     <div class="clearfix"></div>
 703     <div class="col-md-4">
 704       <div class="box box-warning">
 705         <div class="box-header with-border">
 706           <h3 class="box-title">Warning Box Example</h3>
 707         </div><!-- /.box-header -->
 708         <div class="box-body">
 709           The body of the box
 710         </div><!-- /.box-body -->
 711       </div><!-- /.box -->
 712     </div>
 713     <div class="col-md-4">
 714       <div class="box box-success">
 715         <div class="box-header with-border">
 716           <h3 class="box-title">Success Box Example</h3>
 717         </div><!-- /.box-header -->
 718         <div class="box-body">
 719           The body of the box
 720         </div><!-- /.box-body -->
 721       </div><!-- /.box -->
 722     </div>
 723     <div class="col-md-4">
 724       <div class="box box-danger">
 725         <div class="box-header with-border">
 726           <h3 class="box-title">Danger Box Example</h3>
 727         </div><!-- /.box-header -->
 728         <div class="box-body">
 729           The body of the box
 730         </div><!-- /.box-body -->
 731       </div><!-- /.box -->
 732     </div>
 733   </div><!-- /.row -->
 734   <pre class="prettyprint">&LT;div class="box box-default">...&LT;/div>
 735 &LT;div class="box box-primary">...&LT;/div>
 736 &LT;div class="box box-info">...&LT;/div>
 737 &LT;div class="box box-warning">...&LT;/div>
 738 &LT;div class="box box-success">...&LT;/div>
 739 &LT;div class="box box-danger">...&LT;/div></pre>
 740
 741   <h4>Solid Box</h4>
 742   <p class="lead">Solid Boxes are alternative ways to display boxes.
 743     They can be created by simply adding the box-solid class to the box component.
 744     You may also use contextual classes with you solid boxes.</p>
 745   <div class="row">
 746     <div class="col-md-4">
 747       <div class="box box-solid box-default">
 748         <div class="box-header">
 749           <h3 class="box-title">Default Solid Box Example</h3>
 750         </div><!-- /.box-header -->
 751         <div class="box-body">
 752           The body of the box
 753         </div><!-- /.box-body -->
 754       </div><!-- /.box -->
 755     </div>
 756     <div class="col-md-4">
 757       <div class="box box-solid box-primary">
 758         <div class="box-header">
 759           <h3 class="box-title">Primary Solid Box Example</h3>
 760         </div><!-- /.box-header -->
 761         <div class="box-body">
 762           The body of the box
 763         </div><!-- /.box-body -->
 764       </div><!-- /.box -->
 765     </div>
 766     <div class="col-md-4">
 767       <div class="box box-solid box-info">
 768         <div class="box-header">
 769           <h3 class="box-title">Info Solid Box Example</h3>
 770         </div><!-- /.box-header -->
 771         <div class="box-body">
 772           The body of the box
 773         </div><!-- /.box-body -->
 774       </div><!-- /.box -->
 775     </div>
 776     <div class="clearfix"></div>
 777     <div class="col-md-4">
 778       <div class="box box-solid box-warning">
 779         <div class="box-header">
 780           <h3 class="box-title">Warning Solid Box Example</h3>
 781         </div><!-- /.box-header -->
 782         <div class="box-body">
 783           The body of the box
 784         </div><!-- /.box-body -->
 785       </div><!-- /.box -->
 786     </div>
 787     <div class="col-md-4">
 788       <div class="box box-solid box-success">
 789         <div class="box-header">
 790           <h3 class="box-title">Success Solid Box Example</h3>
 791         </div><!-- /.box-header -->
 792         <div class="box-body">
 793           The body of the box
 794         </div><!-- /.box-body -->
 795       </div><!-- /.box -->
 796     </div>
 797     <div class="col-md-4">
 798       <div class="box box-solid box-danger">
 799         <div class="box-header">
 800           <h3 class="box-title">Danger Solid Box Example</h3>
 801         </div><!-- /.box-header -->
 802         <div class="box-body">
 803           The body of the box
 804         </div><!-- /.box-body -->
 805       </div><!-- /.box -->
 806     </div>
 807   </div><!-- /.row -->
 808   <pre class="prettyprint">
 809 &LT;div class="box box-solid box-default">...&LT;/div>
 810 &LT;div class="box box-solid box-primary">...&LT;/div>
 811 &LT;div class="box box-solid box-info">...&LT;/div>
 812 &LT;div class="box box-solid box-warning">...&LT;/div>
 813 &LT;div class="box box-solid box-success">...&LT;/div>
 814 &LT;div class="box box-solid box-danger">...&LT;/div></pre>
 815   <h4>Box Tools</h4>
 816   <p class="lead">Boxes can contain tools to deploy a specific event or provide simple info. The following examples makes use
 817     of multiple AdminLTE components within the header of the box.</p>
 818   <p>AdminLTE data-widget attribute provides boxes with the ability to collapse or be removed. The buttons
 819     are placed in the box-tools which is placed in the box-header.</p>
 820   <pre class="prettyprint">
 821 &LT;!-- This will cause the box to be removed when clicked -->
 822 &LT;button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">&LT;i class="fa fa-times">&LT;/i>&LT;/button>
 823 &LT;!-- This will cause the box to collapse when clicked -->
 824 &LT;button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">&LT;i class="fa fa-minus">&LT;/i>&LT;/button></pre>
 825   <div class="row">
 826     <div class="col-md-4">
 827       <div class="box box-default">
 828         <div class="box-header with-border">
 829           <h3 class="box-title">Collapsable</h3>
 830           <div class="box-tools pull-right">
 831             <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
 832           </div><!-- /.box-tools -->
 833         </div><!-- /.box-header -->
 834         <div class="box-body">
 835           The body of the box
 836         </div><!-- /.box-body -->
 837       </div><!-- /.box -->
 838       <pre class="prettyprint">
 839 &LT;div class="box box-default">
 840   &LT;div class="box-header with-border">
 841     &LT;h3 class="box-title">Collapsable&LT;/h3>
 842     &LT;div class="box-tools pull-right">
 843       &LT;button class="btn btn-box-tool" data-widget="collapse">&LT;i class="fa fa-minus">&LT;/i>&LT;/button>
 844     &LT;/div>&LT;!-- /.box-tools -->
 845   &LT;/div>&LT;!-- /.box-header -->
 846   &LT;div class="box-body">
 847     The body of the box
 848   &LT;/div>&LT;!-- /.box-body -->
 849 &LT;/div>&LT;!-- /.box --></pre>
 850     </div>
 851     <div class="col-md-4">
 852       <div class="box box-default">
 853         <div class="box-header with-border">
 854           <h3 class="box-title">Removable</h3>
 855           <div class="box-tools pull-right">
 856             <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
 857           </div><!-- /.box-tools -->
 858         </div><!-- /.box-header -->
 859         <div class="box-body">
 860           The body of the box
 861         </div><!-- /.box-body -->
 862       </div><!-- /.box -->
 863       <pre class="prettyprint">
 864 &LT;div class="box box-default">
 865   &LT;div class="box-header with-border">
 866     &LT;h3 class="box-title">Removable&LT;/h3>
 867     &LT;div class="box-tools pull-right">
 868       &LT;button class="btn btn-box-tool" data-widget="remove">&LT;i class="fa fa-times">&LT;/i>&LT;/button>
 869     &LT;/div>&LT;!-- /.box-tools -->
 870   &LT;/div>&LT;!-- /.box-header -->
 871   &LT;div class="box-body">
 872     The body of the box
 873   &LT;/div>&LT;!-- /.box-body -->
 874 &LT;/div>&LT;!-- /.box --></pre>
 875     </div>
 876     <div class="col-md-4">
 877       <div class="box box-default collapsed-box">
 878         <div class="box-header with-border">
 879           <h3 class="box-title">Expandable</h3>
 880           <div class="box-tools pull-right">
 881             <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
 882           </div><!-- /.box-tools -->
 883         </div><!-- /.box-header -->
 884         <div class="box-body">
 885           The body of the box
 886         </div><!-- /.box-body -->
 887       </div><!-- /.box -->
 888       <pre class="prettyprint">
 889 &LT;div class="box box-default collapsed-box">
 890   &LT;div class="box-header with-border">
 891     &LT;h3 class="box-title">Expandable&LT;/h3>
 892     &LT;div class="box-tools pull-right">
 893       &LT;button class="btn btn-box-tool" data-widget="collapse">&LT;i class="fa fa-plus">&LT;/i>&LT;/button>
 894     &LT;/div>&LT;!-- /.box-tools -->
 895   &LT;/div>&LT;!-- /.box-header -->
 896   &LT;div class="box-body">
 897     The body of the box
 898   &LT;/div>&LT;!-- /.box-body -->
 899 &LT;/div>&LT;!-- /.box --></pre>
 900     </div>
 901   </div><!-- /.row -->
 902   <p>We can also add labels, badges, pagination, tooltips, inputs and many more in the box tools. A few examples:</p>
 903   <div class="row">
 904     <div class="col-md-4">
 905       <div class="box box-default">
 906         <div class="box-header with-border">
 907           <h3 class="box-title">Labels</h3>
 908           <div class="box-tools pull-right">
 909             <span class="label label-default">Some Label</span>
 910           </div><!-- /.box-tools -->
 911         </div><!-- /.box-header -->
 912         <div class="box-body">
 913           The body of the box
 914         </div><!-- /.box-body -->
 915       </div><!-- /.box -->
 916       <pre class="prettyprint">
 917 &LT;div class="box box-default">
 918   &LT;div class="box-header with-border">
 919     &LT;h3 class="box-title">Labels&LT;/h3>
 920     &LT;div class="box-tools pull-right">
 921       &LT;span class="label label-default">8 New Messages&LT;/span>
 922     &LT;/div>&LT;!-- /.box-tools -->
 923   &LT;/div>&LT;!-- /.box-header -->
 924   &LT;div class="box-body">
 925     The body of the box
 926   &LT;/div>&LT;!-- /.box-body -->
 927 &LT;/div>&LT;!-- /.box --></pre>
 928     </div>
 929     <div class="col-md-4">
 930       <div class="box box-default">
 931         <div class="box-header with-border">
 932           <h3 class="box-title">Input</h3>
 933           <div class="box-tools pull-right">
 934             <div class="has-feedback">
 935               <input type="text" class="form-control input-sm" placeholder="Search...">
 936               <span class="glyphicon glyphicon-search form-control-feedback text-muted"></span>
 937             </div>
 938           </div><!-- /.box-tools -->
 939         </div><!-- /.box-header -->
 940         <div class="box-body">
 941           The body of the box
 942         </div><!-- /.box-body -->
 943       </div><!-- /.box -->
 944       <pre class="prettyprint">
 945 &LT;div class="box box-default">
 946   &LT;div class="box-header with-border">
 947     &LT;h3 class="box-title">Input&LT;/h3>
 948     &LT;div class="box-tools pull-right">
 949       &LT;div class="has-feedback">
 950         &LT;input type="text" class="form-control input-sm" placeholder="Search...">
 951         &LT;span class="glyphicon glyphicon-search form-control-feedback">&LT;/span>
 952       &LT;/div>
 953     &LT;/div>&LT;!-- /.box-tools -->
 954   &LT;/div>&LT;!-- /.box-header -->
 955   &LT;div class="box-body">
 956     The body of the box
 957   &LT;/div>&LT;!-- /.box-body -->
 958 &LT;/div>&LT;!-- /.box --></pre>
 959     </div>
 960     <div class="col-md-4">
 961       <div class="box box-default">
 962         <div class="box-header with-border">
 963           <h3 class="box-title">Tootips on buttons</h3>
 964           <div class="box-tools pull-right">
 965             <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
 966             <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
 967           </div><!-- /.box-tools -->
 968         </div><!-- /.box-header -->
 969         <div class="box-body">
 970           The body of the box
 971         </div><!-- /.box-body -->
 972       </div><!-- /.box -->
 973       <pre class="prettyprint">
 974 &LT;div class="box box-default">
 975   &LT;div class="box-header with-border">
 976     &LT;h3 class="box-title">Tooltips on buttons&LT;/h3>
 977     &LT;div class="box-tools pull-right">
 978       &LT;button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">&LT;i class="fa fa-minus">&LT;/i>&LT;/button>
 979       &LT;button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">&LT;i class="fa fa-times">&LT;/i>&LT;/button>
 980     &LT;/div>&LT;!-- /.box-tools -->
 981   &LT;/div>&LT;!-- /.box-header -->
 982   &LT;div class="box-body">
 983     The body of the box
 984   &LT;/div>&LT;!-- /.box-body -->
 985 &LT;/div>&LT;!-- /.box --></pre>
 986     </div><!-- /.col -->
 987   </div><!-- /.row -->
 988   <p>
 989     If you inserted a box into the document after <code>app.js</code> was loaded, you have to activate
 990     the collapse/remove buttons explicitly by calling <code>.activateBox()</code>:
 991   </p>
 992   <pre class="prettyprint"><code class="html">&LT;script>
 993     $("#box-widget").activateBox();
 994 &LT;/script></code></pre>
 995
 996   <h4>Loading States</h4>
 997   <div class="row">
 998     <div class="col-md-6">
 999       <div class="box box-default">
1000         <div class="box-header with-border">
1001           <h3 class="box-title">Loading state</h3>
1002         </div>
1003         <div class="box-body">
1004           The body of the box
1005         </div><!-- /.box-body -->
1006         <!-- Loading (remove the following to stop the loading)-->
1007         <div class="overlay">
1008           <i class="fa fa-refresh fa-spin"></i>
1009         </div>
1010         <!-- end loading -->
1011       </div><!-- /.box -->
1012     </div><!-- /.col -->
1013
1014     <div class="col-md-6">
1015       <div class="box box-default box-solid">
1016         <div class="box-header with-border">
1017           <h3 class="box-title">Loading state (.box-solid)</h3>
1018         </div>
1019         <div class="box-body">
1020           The body of the box
1021         </div><!-- /.box-body -->
1022         <!-- Loading (remove the following to stop the loading)-->
1023         <div class="overlay">
1024           <i class="fa fa-refresh fa-spin"></i>
1025         </div>
1026         <!-- end loading -->
1027       </div><!-- /.box -->
1028     </div><!-- /.col -->
1029   </div><!-- /.row -->
1030   <p class="lead">
1031     To simulate a loading state, simply place this code before the <code>.box</code> closing tag.
1032   </p>
1033   <pre class="prettyprint"><code class="html">&LT;div class="overlay">
1034   &LT;i class="fa fa-refresh fa-spin">&LT;/i>
1035 &LT;/div>
1036 </code></pre>
1037   <h3 id="component-direct-chat">Direct Chat</h3>
1038   <p class="lead">The direct chat widget extends the box component to create a beautiful chat interface. This widget
1039     consists of a required messages pane and an <b>optional</b> contacts pane. Examples:</p>
1040   <!-- Direct Chat -->
1041   <div class="row">
1042     <div class="col-md-3">
1043       <!-- DIRECT CHAT PRIMARY -->
1044       <div class="box box-primary direct-chat direct-chat-primary">
1045         <div class="box-header with-border">
1046           <h3 class="box-title">Direct Chat</h3>
1047           <div class="box-tools pull-right">
1048             <span data-toggle="tooltip" title="3 New Messages" class="badge bg-light-blue">3</span>
1049             <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
1050             <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
1051             <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
1052           </div>
1053         </div><!-- /.box-header -->
1054         <div class="box-body">
1055           <!-- Conversations are loaded here -->
1056           <div class="direct-chat-messages">
1057             <!-- Message. Default to the left -->
1058             <div class="direct-chat-msg">
1059               <div class="direct-chat-info clearfix">
1060                 <span class="direct-chat-name pull-left">Alexander Pierce</span>
1061                 <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
1062               </div><!-- /.direct-chat-info -->
1063               <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
1064               <div class="direct-chat-text">
1065                 Is this template really for free? That's unbelievable!
1066               </div><!-- /.direct-chat-text -->
1067             </div><!-- /.direct-chat-msg -->
1068
1069             <!-- Message to the right -->
1070             <div class="direct-chat-msg right">
1071               <div class="direct-chat-info clearfix">
1072                 <span class="direct-chat-name pull-right">Sarah Bullock</span>
1073                 <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
1074               </div><!-- /.direct-chat-info -->
1075               <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
1076               <div class="direct-chat-text">
1077                 You better believe it!
1078               </div><!-- /.direct-chat-text -->
1079             </div><!-- /.direct-chat-msg -->
1080           </div><!--/.direct-chat-messages-->
1081
1082           <!-- Contacts are loaded here -->
1083           <div class="direct-chat-contacts">
1084             <ul class="contacts-list">
1085               <li>
1086                 <a href="#">
1087                   <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
1088                   <div class="contacts-list-info">
1089                     <span class="contacts-list-name">
1090                       Count Dracula
1091                       <small class="contacts-list-date pull-right">2/28/2015</small>
1092                     </span>
1093                     <span class="contacts-list-msg">How have you been? I was...</span>
1094                   </div><!-- /.contacts-list-info -->
1095                 </a>
1096               </li><!-- End Contact Item -->
1097             </ul><!-- /.contatcts-list -->
1098           </div><!-- /.direct-chat-pane -->
1099         </div><!-- /.box-body -->
1100         <div class="box-footer">
1101           <form action="#" method="post">
1102             <div class="input-group">
1103               <input type="text" name="message" placeholder="Type Message ..." class="form-control">
1104               <span class="input-group-btn">
1105                 <button type="button" class="btn btn-primary btn-flat">Send</button>
1106               </span>
1107             </div>
1108           </form>
1109         </div><!-- /.box-footer-->
1110       </div><!--/.direct-chat -->
1111     </div><!-- /.col -->
1112
1113     <div class="col-md-3">
1114       <!-- DIRECT CHAT SUCCESS -->
1115       <div class="box box-success direct-chat direct-chat-success">
1116         <div class="box-header with-border">
1117           <h3 class="box-title">Direct Chat</h3>
1118           <div class="box-tools pull-right">
1119             <span data-toggle="tooltip" title="3 New Messages" class="badge bg-green">3</span>
1120             <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
1121             <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
1122             <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
1123           </div>
1124         </div><!-- /.box-header -->
1125         <div class="box-body">
1126           <!-- Conversations are loaded here -->
1127           <div class="direct-chat-messages">
1128             <!-- Message. Default to the left -->
1129             <div class="direct-chat-msg">
1130               <div class="direct-chat-info clearfix">
1131                 <span class="direct-chat-name pull-left">Alexander Pierce</span>
1132                 <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
1133               </div><!-- /.direct-chat-info -->
1134               <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
1135               <div class="direct-chat-text">
1136                 Is this template really for free? That's unbelievable!
1137               </div><!-- /.direct-chat-text -->
1138             </div><!-- /.direct-chat-msg -->
1139
1140             <!-- Message to the right -->
1141             <div class="direct-chat-msg right">
1142               <div class="direct-chat-info clearfix">
1143                 <span class="direct-chat-name pull-right">Sarah Bullock</span>
1144                 <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
1145               </div><!-- /.direct-chat-info -->
1146               <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
1147               <div class="direct-chat-text">
1148                 You better believe it!
1149               </div><!-- /.direct-chat-text -->
1150             </div><!-- /.direct-chat-msg -->
1151           </div><!--/.direct-chat-messages-->
1152
1153           <!-- Contacts are loaded here -->
1154           <div class="direct-chat-contacts">
1155             <ul class="contacts-list">
1156               <li>
1157                 <a href="#">
1158                   <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
1159                   <div class="contacts-list-info">
1160                     <span class="contacts-list-name">
1161                       Count Dracula
1162                       <small class="contacts-list-date pull-right">2/28/2015</small>
1163                     </span>
1164                     <span class="contacts-list-msg">How have you been? I was...</span>
1165                   </div><!-- /.contacts-list-info -->
1166                 </a>
1167               </li><!-- End Contact Item -->
1168             </ul><!-- /.contatcts-list -->
1169           </div><!-- /.direct-chat-pane -->
1170         </div><!-- /.box-body -->
1171         <div class="box-footer">
1172           <form action="#" method="post">
1173             <div class="input-group">
1174               <input type="text" name="message" placeholder="Type Message ..." class="form-control">
1175               <span class="input-group-btn">
1176                 <button type="button" class="btn btn-success btn-flat">Send</button>
1177               </span>
1178             </div>
1179           </form>
1180         </div><!-- /.box-footer-->
1181       </div><!--/.direct-chat -->
1182     </div><!-- /.col -->
1183
1184     <div class="col-md-3">
1185       <!-- DIRECT CHAT WARNING -->
1186       <div class="box box-warning direct-chat direct-chat-warning">
1187         <div class="box-header with-border">
1188           <h3 class="box-title">Direct Chat</h3>
1189           <div class="box-tools pull-right">
1190             <span data-toggle="tooltip" title="3 New Messages" class="badge bg-yellow">3</span>
1191             <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
1192             <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
1193             <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
1194           </div>
1195         </div><!-- /.box-header -->
1196         <div class="box-body">
1197           <!-- Conversations are loaded here -->
1198           <div class="direct-chat-messages">
1199             <!-- Message. Default to the left -->
1200             <div class="direct-chat-msg">
1201               <div class="direct-chat-info clearfix">
1202                 <span class="direct-chat-name pull-left">Alexander Pierce</span>
1203                 <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
1204               </div><!-- /.direct-chat-info -->
1205               <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
1206               <div class="direct-chat-text">
1207                 Is this template really for free? That's unbelievable!
1208               </div><!-- /.direct-chat-text -->
1209             </div><!-- /.direct-chat-msg -->
1210
1211             <!-- Message to the right -->
1212             <div class="direct-chat-msg right">
1213               <div class="direct-chat-info clearfix">
1214                 <span class="direct-chat-name pull-right">Sarah Bullock</span>
1215                 <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
1216               </div><!-- /.direct-chat-info -->
1217               <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
1218               <div class="direct-chat-text">
1219                 You better believe it!
1220               </div><!-- /.direct-chat-text -->
1221             </div><!-- /.direct-chat-msg -->
1222           </div><!--/.direct-chat-messages-->
1223
1224           <!-- Contacts are loaded here -->
1225           <div class="direct-chat-contacts">
1226             <ul class="contacts-list">
1227               <li>
1228                 <a href="#">
1229                   <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
1230                   <div class="contacts-list-info">
1231                     <span class="contacts-list-name">
1232                       Count Dracula
1233                       <small class="contacts-list-date pull-right">2/28/2015</small>
1234                     </span>
1235                     <span class="contacts-list-msg">How have you been? I was...</span>
1236                   </div><!-- /.contacts-list-info -->
1237                 </a>
1238               </li><!-- End Contact Item -->
1239             </ul><!-- /.contatcts-list -->
1240           </div><!-- /.direct-chat-pane -->
1241         </div><!-- /.box-body -->
1242         <div class="box-footer">
1243           <form action="#" method="post">
1244             <div class="input-group">
1245               <input type="text" name="message" placeholder="Type Message ..." class="form-control">
1246               <span class="input-group-btn">
1247                 <button type="button" class="btn btn-warning btn-flat">Send</button>
1248               </span>
1249             </div>
1250           </form>
1251         </div><!-- /.box-footer-->
1252       </div><!--/.direct-chat -->
1253     </div><!-- /.col -->
1254
1255     <div class="col-md-3">
1256       <!-- DIRECT CHAT DANGER -->
1257       <div class="box box-danger direct-chat direct-chat-danger">
1258         <div class="box-header with-border">
1259           <h3 class="box-title">Direct Chat</h3>
1260           <div class="box-tools pull-right">
1261             <span data-toggle="tooltip" title="3 New Messages" class="badge bg-red">3</span>
1262             <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
1263             <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
1264             <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
1265           </div>
1266         </div><!-- /.box-header -->
1267         <div class="box-body">
1268           <!-- Conversations are loaded here -->
1269           <div class="direct-chat-messages">
1270             <!-- Message. Default to the left -->
1271             <div class="direct-chat-msg">
1272               <div class="direct-chat-info clearfix">
1273                 <span class="direct-chat-name pull-left">Alexander Pierce</span>
1274                 <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
1275               </div><!-- /.direct-chat-info -->
1276               <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
1277               <div class="direct-chat-text">
1278                 Is this template really for free? That's unbelievable!
1279               </div><!-- /.direct-chat-text -->
1280             </div><!-- /.direct-chat-msg -->
1281
1282             <!-- Message to the right -->
1283             <div class="direct-chat-msg right">
1284               <div class="direct-chat-info clearfix">
1285                 <span class="direct-chat-name pull-right">Sarah Bullock</span>
1286                 <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
1287               </div><!-- /.direct-chat-info -->
1288               <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
1289               <div class="direct-chat-text">
1290                 You better believe it!
1291               </div><!-- /.direct-chat-text -->
1292             </div><!-- /.direct-chat-msg -->
1293           </div><!--/.direct-chat-messages-->
1294
1295           <!-- Contacts are loaded here -->
1296           <div class="direct-chat-contacts">
1297             <ul class="contacts-list">
1298               <li>
1299                 <a href="#">
1300                   <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
1301                   <div class="contacts-list-info">
1302                     <span class="contacts-list-name">
1303                       Count Dracula
1304                       <small class="contacts-list-date pull-right">2/28/2015</small>
1305                     </span>
1306                     <span class="contacts-list-msg">How have you been? I was...</span>
1307                   </div><!-- /.contacts-list-info -->
1308                 </a>
1309               </li><!-- End Contact Item -->
1310             </ul><!-- /.contatcts-list -->
1311           </div><!-- /.direct-chat-pane -->
1312         </div><!-- /.box-body -->
1313         <div class="box-footer">
1314           <form action="#" method="post">
1315             <div class="input-group">
1316               <input type="text" name="message" placeholder="Type Message ..." class="form-control">
1317               <span class="input-group-btn">
1318                 <button type="button" class="btn btn-danger btn-flat">Send</button>
1319               </span>
1320             </div>
1321           </form>
1322         </div><!-- /.box-footer-->
1323       </div><!--/.direct-chat -->
1324     </div><!-- /.col -->
1325   </div><!-- /.row -->
1326   <p class="lead">Direct Chat Markup</p>
1327   <pre class="prettyprint"><code class="html">
1328 &LT;!-- Construct the box with style you want. Here we are using box-danger -->
1329 &LT;!-- Then add the class direct-chat and choose the direct-chat-* contexual class -->
1330 &LT;!-- The contextual class should match the box, so we are using direct-chat-danger -->
1331 &LT;div class="box box-danger direct-chat direct-chat-danger">
1332   &LT;div class="box-header with-border">
1333     &LT;h3 class="box-title">Direct Chat&LT;/h3>
1334     &LT;div class="box-tools pull-right">
1335       &LT;span data-toggle="tooltip" title="3 New Messages" class="badge bg-red">3&LT;/span>
1336       &LT;button class="btn btn-box-tool" data-widget="collapse">&LT;i class="fa fa-minus">&LT;/i>&LT;/button>
1337       &LT;!-- In box-tools add this button if you intend to use the contacts pane -->
1338       &LT;button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle">&LT;i class="fa fa-comments">&LT;/i>&LT;/button>
1339       &LT;button class="btn btn-box-tool" data-widget="remove">&LT;i class="fa fa-times">&LT;/i>&LT;/button>
1340     &LT;/div>
1341   &LT;/div>&LT;!-- /.box-header -->
1342   &LT;div class="box-body">
1343     &LT;!-- Conversations are loaded here -->
1344     &LT;div class="direct-chat-messages">
1345       &LT;!-- Message. Default to the left -->
1346       &LT;div class="direct-chat-msg">
1347         &LT;div class="direct-chat-info clearfix">
1348           &LT;span class="direct-chat-name pull-left">Alexander Pierce&LT;/span>
1349           &LT;span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm&LT;/span>
1350         &LT;/div>&LT;!-- /.direct-chat-info -->
1351         &LT;img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image">&LT;!-- /.direct-chat-img -->
1352         &LT;div class="direct-chat-text">
1353           Is this template really for free? That's unbelievable!
1354         &LT;/div>&LT;!-- /.direct-chat-text -->
1355       &LT;/div>&LT;!-- /.direct-chat-msg -->
1356
1357       &LT;!-- Message to the right -->
1358       &LT;div class="direct-chat-msg right">
1359         &LT;div class="direct-chat-info clearfix">
1360           &LT;span class="direct-chat-name pull-right">Sarah Bullock&LT;/span>
1361           &LT;span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm&LT;/span>
1362         &LT;/div>&LT;!-- /.direct-chat-info -->
1363         &LT;img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image">&LT;!-- /.direct-chat-img -->
1364         &LT;div class="direct-chat-text">
1365           You better believe it!
1366         &LT;/div>&LT;!-- /.direct-chat-text -->
1367       &LT;/div>&LT;!-- /.direct-chat-msg -->
1368     &LT;/div>&LT;!--/.direct-chat-messages-->
1369
1370     &LT;!-- Contacts are loaded here -->
1371     &LT;div class="direct-chat-contacts">
1372       &LT;ul class="contacts-list">
1373         &LT;li>
1374           &LT;a href="#">
1375             &LT;img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
1376             &LT;div class="contacts-list-info">
1377               &LT;span class="contacts-list-name">
1378                 Count Dracula
1379                 &LT;small class="contacts-list-date pull-right">2/28/2015&LT;/small>
1380               &LT;/span>
1381               &LT;span class="contacts-list-msg">How have you been? I was...&LT;/span>
1382             &LT;/div>&LT;!-- /.contacts-list-info -->
1383           &LT;/a>
1384         &LT;/li>&LT;!-- End Contact Item -->
1385       &LT;/ul>&LT;!-- /.contatcts-list -->
1386     &LT;/div>&LT;!-- /.direct-chat-pane -->
1387   &LT;/div>&LT;!-- /.box-body -->
1388   &LT;div class="box-footer">
1389     &LT;div class="input-group">
1390       &LT;input type="text" name="message" placeholder="Type Message ..." class="form-control">
1391       &LT;span class="input-group-btn">
1392         &LT;button type="button" class="btn btn-danger btn-flat">Send&LT;/button>
1393       &LT;/span>
1394     &LT;/div>
1395   &LT;/div>&LT;!-- /.box-footer-->
1396 &LT;/div>&LT;!--/.direct-chat -->
1397 </code></pre>
1398
1399   <p>Of course you can use direct chat with a solid box by adding the class <code>solid-box</code> to the box. Here are a couple of examples:</p>
1400
1401   <!-- Direct Chat With Solid Boxes -->
1402   <div class="row">
1403     <div class="col-md-6">
1404       <!-- DIRECT CHAT WARNING -->
1405       <div class="box box-primary box-solid direct-chat direct-chat-primary">
1406         <div class="box-header">
1407           <h3 class="box-title">Direct Chat in a Solid Box</h3>
1408           <div class="box-tools pull-right">
1409             <span data-toggle="tooltip" title="3 New Messages" class="badge bg-light-blue">3</span>
1410             <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
1411             <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
1412             <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
1413           </div>
1414         </div><!-- /.box-header -->
1415         <div class="box-body">
1416           <!-- Conversations are loaded here -->
1417           <div class="direct-chat-messages">
1418             <!-- Message. Default to the left -->
1419             <div class="direct-chat-msg">
1420               <div class="direct-chat-info clearfix">
1421                 <span class="direct-chat-name pull-left">Alexander Pierce</span>
1422                 <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
1423               </div><!-- /.direct-chat-info -->
1424               <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
1425               <div class="direct-chat-text">
1426                 Is this template really for free? That's unbelievable!
1427               </div><!-- /.direct-chat-text -->
1428             </div><!-- /.direct-chat-msg -->
1429
1430             <!-- Message to the right -->
1431             <div class="direct-chat-msg right">
1432               <div class="direct-chat-info clearfix">
1433                 <span class="direct-chat-name pull-right">Sarah Bullock</span>
1434                 <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
1435               </div><!-- /.direct-chat-info -->
1436               <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
1437               <div class="direct-chat-text">
1438                 You better believe it!
1439               </div><!-- /.direct-chat-text -->
1440             </div><!-- /.direct-chat-msg -->
1441           </div><!--/.direct-chat-messages-->
1442
1443           <!-- Contacts are loaded here -->
1444           <div class="direct-chat-contacts">
1445             <ul class="contacts-list">
1446               <li>
1447                 <a href="#">
1448                   <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
1449                   <div class="contacts-list-info">
1450                     <span class="contacts-list-name">
1451                       Count Dracula
1452                       <small class="contacts-list-date pull-right">2/28/2015</small>
1453                     </span>
1454                     <span class="contacts-list-msg">How have you been? I was...</span>
1455                   </div><!-- /.contacts-list-info -->
1456                 </a>
1457               </li><!-- End Contact Item -->
1458             </ul><!-- /.contatcts-list -->
1459           </div><!-- /.direct-chat-pane -->
1460         </div><!-- /.box-body -->
1461         <div class="box-footer">
1462           <form action="#" method="post">
1463             <div class="input-group">
1464               <input type="text" name="message" placeholder="Type Message ..." class="form-control">
1465               <span class="input-group-btn">
1466                 <button type="button" class="btn btn-primary btn-flat">Send</button>
1467               </span>
1468             </div>
1469           </form>
1470         </div><!-- /.box-footer-->
1471       </div><!--/.direct-chat -->
1472     </div><!-- /.col -->
1473
1474     <div class="col-md-6">
1475       <!-- DIRECT CHAT DANGER -->
1476       <div class="box box-info box-solid direct-chat direct-chat-info">
1477         <div class="box-header">
1478           <h3 class="box-title">Direct Chat in a Solid Box</h3>
1479           <div class="box-tools pull-right">
1480             <span data-toggle="tooltip" title="3 New Messages" class="badge bg-aqua">3</span>
1481             <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
1482             <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
1483             <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
1484           </div>
1485         </div><!-- /.box-header -->
1486         <div class="box-body">
1487           <!-- Conversations are loaded here -->
1488           <div class="direct-chat-messages">
1489             <!-- Message. Default to the left -->
1490             <div class="direct-chat-msg">
1491               <div class="direct-chat-info clearfix">
1492                 <span class="direct-chat-name pull-left">Alexander Pierce</span>
1493                 <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
1494               </div><!-- /.direct-chat-info -->
1495               <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
1496               <div class="direct-chat-text">
1497                 Is this template really for free? That's unbelievable!
1498               </div><!-- /.direct-chat-text -->
1499             </div><!-- /.direct-chat-msg -->
1500
1501             <!-- Message to the right -->
1502             <div class="direct-chat-msg right">
1503               <div class="direct-chat-info clearfix">
1504                 <span class="direct-chat-name pull-right">Sarah Bullock</span>
1505                 <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
1506               </div><!-- /.direct-chat-info -->
1507               <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
1508               <div class="direct-chat-text">
1509                 You better believe it!
1510               </div><!-- /.direct-chat-text -->
1511             </div><!-- /.direct-chat-msg -->
1512           </div><!--/.direct-chat-messages-->
1513
1514           <!-- Contacts are loaded here -->
1515           <div class="direct-chat-contacts">
1516             <ul class="contacts-list">
1517               <li>
1518                 <a href="#">
1519                   <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
1520                   <div class="contacts-list-info">
1521                     <span class="contacts-list-name">
1522                       Count Dracula
1523                       <small class="contacts-list-date pull-right">2/28/2015</small>
1524                     </span>
1525                     <span class="contacts-list-msg">How have you been? I was...</span>
1526                   </div><!-- /.contacts-list-info -->
1527                 </a>
1528               </li><!-- End Contact Item -->
1529             </ul><!-- /.contatcts-list -->
1530           </div><!-- /.direct-chat-pane -->
1531         </div><!-- /.box-body -->
1532         <div class="box-footer">
1533           <form action="#" method="post">
1534             <div class="input-group">
1535               <input type="text" name="message" placeholder="Type Message ..." class="form-control">
1536               <span class="input-group-btn">
1537                 <button type="button" class="btn btn-info btn-flat">Send</button>
1538               </span>
1539             </div>
1540           </form>
1541         </div><!-- /.box-footer-->
1542       </div><!--/.direct-chat -->
1543     </div><!-- /.col -->
1544   </div><!-- /.row -->
1545 </section>