From e3d02cbc9a804385af7183a41548579d7e444328 Mon Sep 17 00:00:00 2001
From: razvanaldea89 <razvan.aldea89@yahoo.ro>
Date: Thu, 14 Feb 2019 18:10:54 +0200
Subject: [PATCH] fom_buttons.html update / general_elements.html update - fix
 - old markup replacement - bs4 integration

---
 production/form_buttons.html     |   30 +-
 production/general_elements.html | 3393 +++++++++++++++++-------------
 2 files changed, 1964 insertions(+), 1459 deletions(-)

diff --git a/production/form_buttons.html b/production/form_buttons.html
index 7b8dfd9d..6b1621fe 100755
--- a/production/form_buttons.html
+++ b/production/form_buttons.html
@@ -615,11 +615,11 @@
                                             <div class="buttons">
                                                 <!-- Standard button -->
                                                 <div class="mb-2">
-                                                    <button type="button" class="btn btn-default btn-lg">Large Button
+                                                    <button type="button" class="btn btn-light btn-lg">Large Button
                                                     </button>
-                                                    <button type="button" class="btn btn-default btn-md">Medium Button
+                                                    <button type="button" class="btn btn-light btn-md">Medium Button
                                                     </button>
-                                                    <button type="button" class="btn btn-default btn-sm">Small Button
+                                                    <button type="button" class="btn btn-light btn-sm">Small Button
                                                     </button>
                                                 </div>
                                                 <div class="mb-2">
@@ -669,33 +669,33 @@
                                         <div class="x_content">
                                             <div class="row">
                                                 <div class="btn-group">
-                                                    <button class="btn btn-default" type="button">Left</button>
-                                                    <button class="btn btn-default" type="button">Middle</button>
-                                                    <button class="btn btn-default" type="button">Right</button>
+                                                    <button class="btn btn-light" type="button">Left</button>
+                                                    <button class="btn btn-light" type="button">Middle</button>
+                                                    <button class="btn btn-light" type="button">Right</button>
                                                 </div>
                                                 <div class="btn-group  btn-group-sm ml-2">
-                                                    <button class="btn btn-default" type="button">Left</button>
-                                                    <button class="btn btn-default" type="button">Middle</button>
-                                                    <button class="btn btn-default" type="button">Right</button>
+                                                    <button class="btn btn-light" type="button">Left</button>
+                                                    <button class="btn btn-light" type="button">Middle</button>
+                                                    <button class="btn btn-light" type="button">Right</button>
                                                 </div>
                                             </div>
                                             <p class="text-muted">Vertical button groups</p>
                                             <div class="row">
                                                 <div class="btn-group-vertical">
-                                                    <button class="btn btn-default" type="button">Top</button>
-                                                    <button class="btn btn-default" type="button">Middle</button>
-                                                    <button class="btn btn-default" type="button">Bottom</button>
+                                                    <button class="btn btn-light" type="button">Top</button>
+                                                    <button class="btn btn-light" type="button">Middle</button>
+                                                    <button class="btn btn-light" type="button">Bottom</button>
                                                 </div>
                                             </div>
                                             <p class="text-muted">Nested button groups</p>
                                             <div class="row">
                                                 <div class="btn-group">
-                                                    <button class="btn btn-default" type="button">1</button>
+                                                    <button class="btn btn-light" type="button">1</button>
                                                     <button class="btn btn-danger" type="button">2</button>
-                                                    <button class="btn btn-default" type="button">3</button>
+                                                    <button class="btn btn-light" type="button">3</button>
                                                     <div class="btn-group">
                                                         <button data-toggle="dropdown"
-                                                                class="btn btn-default dropdown-toggle" type="button">
+                                                                class="btn btn-light dropdown-toggle" type="button">
                                                             Dropdown <span class="caret"></span></button>
                                                         <ul class="dropdown-menu">
                                                             <li><a href="#">Dropdown link 1</a>
diff --git a/production/general_elements.html b/production/general_elements.html
index 101a1e3e..7f04fcb9 100755
--- a/production/general_elements.html
+++ b/production/general_elements.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 
-  <head>
+<head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <!-- Meta, title, CSS, favicons, etc. -->
     <meta charset="utf-8">
@@ -26,1180 +26,1591 @@
     <link href="../vendors/pnotify/dist/pnotify.nonblock.css" rel="stylesheet">
 
     <!-- Custom Theme Style -->
-    <link href="../build/css/custom.min.css" rel="stylesheet">
+    <link href="../build/css/custom.css" rel="stylesheet">
     <link href="../build/css/style-extra-bs4.css" rel="stylesheet">
-  </head>
+</head>
 
-  <body class="nav-md">
-    <div class="container body">
-      <div class="main_container">
-        <div class="col-md-3 left_col">
-          <div class="left_col">
-            <div class="navbar nav_title" style="border: 0;">
-              <a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>Gentelella Alela!</span></a>
-            </div>
+<body class="nav-md">
+<div class="body">
+    <div class="main_container container-fluid">
+        <div class="row">
+            <div class="col-lg-2 left_col">
+                <div class="left_col">
+                    <div class="navbar nav_title" style="border: 0;">
+                        <a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>Gentelella Alela!</span></a>
+                    </div>
 
-            <div class="clearfix"></div>
+                    <div class="clearfix"></div>
 
-            <!-- menu profile quick info -->
-            <div class="profile clearfix">
-              <div class="profile_pic">
-                <img src="images/img.jpg" alt="..." class="img-circle profile_img">
-              </div>
-              <div class="profile_info">
-                <span>Welcome,</span>
-                <h2>John Doe</h2>
-              </div>
-            </div>
-            <!-- /menu profile quick info -->
+                    <!-- menu profile quick info -->
+                    <div class="profile clearfix">
+                        <div class="profile_pic">
+                            <img src="images/img.jpg" alt="..." class="img-circle profile_img">
+                        </div>
+                        <div class="profile_info">
+                            <span>Welcome,</span>
+                            <h2>John Doe</h2>
+                        </div>
+                    </div>
+                    <!-- /menu profile quick info -->
 
-            <br />
+                    <br/>
 
-            <!-- sidebar menu -->
-            <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
-              <div class="menu_section">
-                <h3>General</h3>
-                <ul class="nav side-menu">
-                  <li><a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
-                    <ul class="nav child_menu">
-                      <li><a href="index.html">Dashboard</a></li>
-                      <li><a href="index2.html">Dashboard2</a></li>
-                      <li><a href="index3.html">Dashboard3</a></li>
-                    </ul>
-                  </li>
-                  <li><a><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-down"></span></a>
-                    <ul class="nav child_menu">
-                      <li><a href="form.html">General Form</a></li>
-                      <li><a href="form_advanced.html">Advanced Components</a></li>
-                      <li><a href="form_validation.html">Form Validation</a></li>
-                      <li><a href="form_wizards.html">Form Wizard</a></li>
-                      <li><a href="form_upload.html">Form Upload</a></li>
-                      <li><a href="form_buttons.html">Form Buttons</a></li>
-                    </ul>
-                  </li>
-                  <li><a><i class="fa fa-desktop"></i> UI Elements <span class="fa fa-chevron-down"></span></a>
-                    <ul class="nav child_menu">
-                      <li><a href="general_elements.html">General Elements</a></li>
-                      <li><a href="media_gallery.html">Media Gallery</a></li>
-                      <li><a href="typography.html">Typography</a></li>
-                      <li><a href="icons.html">Icons</a></li>
-                      <li><a href="glyphicons.html">Glyphicons</a></li>
-                      <li><a href="widgets.html">Widgets</a></li>
-                      <li><a href="invoice.html">Invoice</a></li>
-                      <li><a href="inbox.html">Inbox</a></li>
-                      <li><a href="calendar.html">Calendar</a></li>
-                    </ul>
-                  </li>
-                  <li><a><i class="fa fa-table"></i> Tables <span class="fa fa-chevron-down"></span></a>
-                    <ul class="nav child_menu">
-                      <li><a href="tables.html">Tables</a></li>
-                      <li><a href="tables_dynamic.html">Table Dynamic</a></li>
-                    </ul>
-                  </li>
-                  <li><a><i class="fa fa-bar-chart-o"></i> Data Presentation <span class="fa fa-chevron-down"></span></a>
-                    <ul class="nav child_menu">
-                      <li><a href="chartjs.html">Chart JS</a></li>
-                      <li><a href="chartjs2.html">Chart JS2</a></li>
-                      <li><a href="morisjs.html">Moris JS</a></li>
-                      <li><a href="echarts.html">ECharts</a></li>
-                      <li><a href="other_charts.html">Other Charts</a></li>
-                    </ul>
-                  </li>
-                  <li><a><i class="fa fa-clone"></i>Layouts <span class="fa fa-chevron-down"></span></a>
-                    <ul class="nav child_menu">
-                      <li><a href="fixed_sidebar.html">Fixed Sidebar</a></li>
-                      <li><a href="fixed_footer.html">Fixed Footer</a></li>
-                    </ul>
-                  </li>
-                </ul>
-              </div>
-              <div class="menu_section">
-                <h3>Live On</h3>
-                <ul class="nav side-menu">
-                  <li><a><i class="fa fa-bug"></i> Additional Pages <span class="fa fa-chevron-down"></span></a>
-                    <ul class="nav child_menu">
-                      <li><a href="e_commerce.html">E-commerce</a></li>
-                      <li><a href="projects.html">Projects</a></li>
-                      <li><a href="project_detail.html">Project Detail</a></li>
-                      <li><a href="contacts.html">Contacts</a></li>
-                      <li><a href="profile.html">Profile</a></li>
-                    </ul>
-                  </li>
-                  <li><a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a>
-                    <ul class="nav child_menu">
-                      <li><a href="page_403.html">403 Error</a></li>
-                      <li><a href="page_404.html">404 Error</a></li>
-                      <li><a href="page_500.html">500 Error</a></li>
-                      <li><a href="plain_page.html">Plain Page</a></li>
-                      <li><a href="login.html">Login Page</a></li>
-                      <li><a href="pricing_tables.html">Pricing Tables</a></li>
-                    </ul>
-                  </li>
-                  <li><a><i class="fa fa-sitemap"></i> Multilevel Menu <span class="fa fa-chevron-down"></span></a>
-                    <ul class="nav child_menu">
-                        <li><a href="#level1_1">Level One</a>
-                        <li><a>Level One<span class="fa fa-chevron-down"></span></a>
-                          <ul class="nav child_menu">
-                            <li class="sub_menu"><a href="level2.html">Level Two</a>
-                            </li>
-                            <li><a href="#level2_1">Level Two</a>
-                            </li>
-                            <li><a href="#level2_2">Level Two</a>
-                            </li>
-                          </ul>
-                        </li>
-                        <li><a href="#level1_2">Level One</a>
-                        </li>
-                    </ul>
-                  </li>                  
-                  <li><a href="javascript:void(0)"><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a></li>
-                </ul>
-              </div>
+                    <!-- sidebar menu -->
+                    <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
+                        <div class="menu_section">
+                            <h3>General</h3>
+                            <ul class="nav side-menu">
+                                <li><a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
+                                    <ul class="nav child_menu">
+                                        <li><a href="index.html">Dashboard</a></li>
+                                        <li><a href="index2.html">Dashboard2</a></li>
+                                        <li><a href="index3.html">Dashboard3</a></li>
+                                    </ul>
+                                </li>
+                                <li><a><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-down"></span></a>
+                                    <ul class="nav child_menu">
+                                        <li><a href="form.html">General Form</a></li>
+                                        <li><a href="form_advanced.html">Advanced Components</a></li>
+                                        <li><a href="form_validation.html">Form Validation</a></li>
+                                        <li><a href="form_wizards.html">Form Wizard</a></li>
+                                        <li><a href="form_upload.html">Form Upload</a></li>
+                                        <li><a href="form_buttons.html">Form Buttons</a></li>
+                                    </ul>
+                                </li>
+                                <li><a><i class="fa fa-desktop"></i> UI Elements <span
+                                        class="fa fa-chevron-down"></span></a>
+                                    <ul class="nav child_menu">
+                                        <li><a href="general_elements.html">General Elements</a></li>
+                                        <li><a href="media_gallery.html">Media Gallery</a></li>
+                                        <li><a href="typography.html">Typography</a></li>
+                                        <li><a href="icons.html">Icons</a></li>
+                                        <li><a href="glyphicons.html">Glyphicons</a></li>
+                                        <li><a href="widgets.html">Widgets</a></li>
+                                        <li><a href="invoice.html">Invoice</a></li>
+                                        <li><a href="inbox.html">Inbox</a></li>
+                                        <li><a href="calendar.html">Calendar</a></li>
+                                    </ul>
+                                </li>
+                                <li><a><i class="fa fa-table"></i> Tables <span class="fa fa-chevron-down"></span></a>
+                                    <ul class="nav child_menu">
+                                        <li><a href="tables.html">Tables</a></li>
+                                        <li><a href="tables_dynamic.html">Table Dynamic</a></li>
+                                    </ul>
+                                </li>
+                                <li><a><i class="fa fa-bar-chart-o"></i> Data Presentation <span
+                                        class="fa fa-chevron-down"></span></a>
+                                    <ul class="nav child_menu">
+                                        <li><a href="chartjs.html">Chart JS</a></li>
+                                        <li><a href="chartjs2.html">Chart JS2</a></li>
+                                        <li><a href="morisjs.html">Moris JS</a></li>
+                                        <li><a href="echarts.html">ECharts</a></li>
+                                        <li><a href="other_charts.html">Other Charts</a></li>
+                                    </ul>
+                                </li>
+                                <li><a><i class="fa fa-clone"></i>Layouts <span class="fa fa-chevron-down"></span></a>
+                                    <ul class="nav child_menu">
+                                        <li><a href="fixed_sidebar.html">Fixed Sidebar</a></li>
+                                        <li><a href="fixed_footer.html">Fixed Footer</a></li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="menu_section">
+                            <h3>Live On</h3>
+                            <ul class="nav side-menu">
+                                <li><a><i class="fa fa-bug"></i> Additional Pages <span
+                                        class="fa fa-chevron-down"></span></a>
+                                    <ul class="nav child_menu">
+                                        <li><a href="e_commerce.html">E-commerce</a></li>
+                                        <li><a href="projects.html">Projects</a></li>
+                                        <li><a href="project_detail.html">Project Detail</a></li>
+                                        <li><a href="contacts.html">Contacts</a></li>
+                                        <li><a href="profile.html">Profile</a></li>
+                                    </ul>
+                                </li>
+                                <li><a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a>
+                                    <ul class="nav child_menu">
+                                        <li><a href="page_403.html">403 Error</a></li>
+                                        <li><a href="page_404.html">404 Error</a></li>
+                                        <li><a href="page_500.html">500 Error</a></li>
+                                        <li><a href="plain_page.html">Plain Page</a></li>
+                                        <li><a href="login.html">Login Page</a></li>
+                                        <li><a href="pricing_tables.html">Pricing Tables</a></li>
+                                    </ul>
+                                </li>
+                                <li><a><i class="fa fa-sitemap"></i> Multilevel Menu <span
+                                        class="fa fa-chevron-down"></span></a>
+                                    <ul class="nav child_menu">
+                                        <li><a href="#level1_1">Level One</a>
+                                        <li><a>Level One<span class="fa fa-chevron-down"></span></a>
+                                            <ul class="nav child_menu">
+                                                <li class="sub_menu"><a href="level2.html">Level Two</a>
+                                                </li>
+                                                <li><a href="#level2_1">Level Two</a>
+                                                </li>
+                                                <li><a href="#level2_2">Level Two</a>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                        <li><a href="#level1_2">Level One</a>
+                                        </li>
+                                    </ul>
+                                </li>
+                                <li><a href="javascript:void(0)"><i class="fa fa-laptop"></i> Landing Page <span
+                                        class="label label-success pull-right">Coming Soon</span></a></li>
+                            </ul>
+                        </div>
 
-            </div>
-            <!-- /sidebar menu -->
+                    </div>
+                    <!-- /sidebar menu -->
 
-            <!-- /menu footer buttons -->
-            <div class="sidebar-footer hidden-small">
-              <a data-toggle="tooltip" data-placement="top" title="Settings">
-                <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
-              </a>
-              <a data-toggle="tooltip" data-placement="top" title="FullScreen">
-                <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
-              </a>
-              <a data-toggle="tooltip" data-placement="top" title="Lock">
-                <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
-              </a>
-              <a data-toggle="tooltip" data-placement="top" title="Logout" href="login.html">
-                <span class="glyphicon glyphicon-off" aria-hidden="true"></span>
-              </a>
-            </div>
-            <!-- /menu footer buttons -->
-          </div>
-        </div>
-
-        <!-- top navigation -->
-        <div class="top_nav">
-          <div class="nav_menu">
-            <nav>
-              <div class="nav toggle">
-                <a id="menu_toggle"><i class="fa fa-bars"></i></a>
-              </div>
-
-              <ul class="nav navbar-nav navbar-right">
-                <li class="">
-                  <a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
-                    <img src="images/img.jpg" alt="">John Doe
-                    <span class=" fa fa-angle-down"></span>
-                  </a>
-                  <ul class="dropdown-menu dropdown-usermenu pull-right">
-                    <li><a href="javascript:;"> Profile</a></li>
-                    <li>
-                      <a href="javascript:;">
-                        <span class="badge bg-red pull-right">50%</span>
-                        <span>Settings</span>
-                      </a>
-                    </li>
-                    <li><a href="javascript:;">Help</a></li>
-                    <li><a href="login.html"><i class="fa fa-sign-out pull-right"></i> Log Out</a></li>
-                  </ul>
-                </li>
-
-                <li role="presentation" class="dropdown">
-                  <a href="javascript:;" class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false">
-                    <i class="fa fa-envelope-o"></i>
-                    <span class="badge bg-green">6</span>
-                  </a>
-                  <ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu">
-                    <li>
-                      <a>
-                        <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
-                        <span>
-                          <span>John Smith</span>
-                          <span class="time">3 mins ago</span>
-                        </span>
-                        <span class="message">
-                          Film festivals used to be do-or-die moments for movie makers. They were where...
-                        </span>
-                      </a>
-                    </li>
-                    <li>
-                      <a>
-                        <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
-                        <span>
-                          <span>John Smith</span>
-                          <span class="time">3 mins ago</span>
-                        </span>
-                        <span class="message">
-                          Film festivals used to be do-or-die moments for movie makers. They were where...
-                        </span>
-                      </a>
-                    </li>
-                    <li>
-                      <a>
-                        <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
-                        <span>
-                          <span>John Smith</span>
-                          <span class="time">3 mins ago</span>
-                        </span>
-                        <span class="message">
-                          Film festivals used to be do-or-die moments for movie makers. They were where...
-                        </span>
-                      </a>
-                    </li>
-                    <li>
-                      <a>
-                        <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
-                        <span>
-                          <span>John Smith</span>
-                          <span class="time">3 mins ago</span>
-                        </span>
-                        <span class="message">
-                          Film festivals used to be do-or-die moments for movie makers. They were where...
-                        </span>
-                      </a>
-                    </li>
-                    <li>
-                      <div class="text-center">
-                        <a>
-                          <strong>See All Alerts</strong>
-                          <i class="fa fa-angle-right"></i>
+                    <!-- /menu footer buttons -->
+                    <div class="sidebar-footer hidden-small">
+                        <a data-toggle="tooltip" data-placement="top" title="Settings">
+                            <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
                         </a>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-            </nav>
-          </div>
-        </div>
-        <!-- /top navigation -->
+                        <a data-toggle="tooltip" data-placement="top" title="FullScreen">
+                            <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
+                        </a>
+                        <a data-toggle="tooltip" data-placement="top" title="Lock">
+                            <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
+                        </a>
+                        <a data-toggle="tooltip" data-placement="top" title="Logout" href="login.html">
+                            <span class="glyphicon glyphicon-off" aria-hidden="true"></span>
+                        </a>
+                    </div>
+                    <!-- /menu footer buttons -->
+                </div>
+            </div>
+            <div class="col-lg-10">
+                <div class="row">
+                    <!-- top navigation -->
+                    <div class="col-lg-12 top_nav">
+                        <div class="nav_menu">
+                            <nav>
+                                <div class="nav toggle">
+                                    <a id="menu_toggle"><i class="fa fa-bars"></i></a>
+                                </div>
 
-        <!-- page content -->
-        <div class="right_col" role="main">
-          <div class="">
-            <div class="page-title">
-              <div class="title_left">
-                <h3>General Elements</h3>
-              </div>
+                                <ul class="nav navbar-nav navbar-right">
+                                    <li class="">
+                                        <a href="javascript:;" class="user-profile dropdown-toggle"
+                                           data-toggle="dropdown"
+                                           aria-expanded="false">
+                                            <img src="images/img.jpg" alt="">John Doe
+                                            <span class=" fa fa-angle-down"></span>
+                                        </a>
+                                        <ul class="dropdown-menu dropdown-usermenu pull-right">
+                                            <li><a href="javascript:;"> Profile</a></li>
+                                            <li>
+                                                <a href="javascript:;">
+                                                    <span class="badge bg-red pull-right">50%</span>
+                                                    <span>Settings</span>
+                                                </a>
+                                            </li>
+                                            <li><a href="javascript:;">Help</a></li>
+                                            <li><a href="login.html"><i class="fa fa-sign-out pull-right"></i> Log
+                                                Out</a></li>
+                                        </ul>
+                                    </li>
 
-              <div class="title_right">
-                <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
-                  <div class="input-group">
-                    <input type="text" class="form-control" placeholder="Search for...">
-                    <span class="input-group-btn">
-                      <button class="btn btn-default" type="button">Go!</button>
+                                    <li role="presentation" class="dropdown">
+                                        <a href="javascript:;" class="dropdown-toggle info-number"
+                                           data-toggle="dropdown"
+                                           aria-expanded="false">
+                                            <i class="fa fa-envelope-o"></i>
+                                            <span class="badge bg-green">6</span>
+                                        </a>
+                                        <ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu">
+                                            <li>
+                                                <a>
+                                                    <span class="image"><img src="images/img.jpg" alt="Profile Image"/></span>
+                                                    <span>
+                          <span>John Smith</span>
+                          <span class="time">3 mins ago</span>
+                        </span>
+                                                    <span class="message">
+                          Film festivals used to be do-or-die moments for movie makers. They were where...
+                        </span>
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a>
+                                                    <span class="image"><img src="images/img.jpg" alt="Profile Image"/></span>
+                                                    <span>
+                          <span>John Smith</span>
+                          <span class="time">3 mins ago</span>
+                        </span>
+                                                    <span class="message">
+                          Film festivals used to be do-or-die moments for movie makers. They were where...
+                        </span>
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a>
+                                                    <span class="image"><img src="images/img.jpg" alt="Profile Image"/></span>
+                                                    <span>
+                          <span>John Smith</span>
+                          <span class="time">3 mins ago</span>
+                        </span>
+                                                    <span class="message">
+                          Film festivals used to be do-or-die moments for movie makers. They were where...
+                        </span>
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a>
+                                                    <span class="image"><img src="images/img.jpg" alt="Profile Image"/></span>
+                                                    <span>
+                          <span>John Smith</span>
+                          <span class="time">3 mins ago</span>
+                        </span>
+                                                    <span class="message">
+                          Film festivals used to be do-or-die moments for movie makers. They were where...
+                        </span>
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <div class="text-center">
+                                                    <a>
+                                                        <strong>See All Alerts</strong>
+                                                        <i class="fa fa-angle-right"></i>
+                                                    </a>
+                                                </div>
+                                            </li>
+                                        </ul>
+                                    </li>
+                                </ul>
+                            </nav>
+                        </div>
+                    </div>
+                    <!-- /top navigation -->
+
+                    <!-- page content -->
+                    <div class="col-lg-12 right_col" role="main">
+                        <div class="">
+                            <div class="page-title row">
+                                <div class="col-lg-6 text-left">
+                                    <h3>General Elements</h3>
+                                </div>
+
+                                <div class="col-lg-6 text-right">
+                                    <div class="row">
+                                        <div class="offset-md-7 col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
+                                            <div class="input-group">
+                                                <input type="text" class="form-control" placeholder="Search for...">
+                                                <span class="input-group-btn">
+                      <button class="btn btn-light" type="button">Go!</button>
                     </span>
-                  </div>
-                </div>
-              </div>
-            </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
 
-            <div class="clearfix"></div>
-
-            <div class="">
-              <div class="col-md-6 col-sm-6 col-xs-12">
-                <div class="x_panel">
-                  <div class="x_title">
-                    <h2><i class="fa fa-bars"></i> Tabs <small>Float left</small></h2>
-                    <ul class="nav navbar-right panel_toolbox">
-                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
-                      </li>
-                      <li class="dropdown">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
-                        <ul class="dropdown-menu" role="menu">
-                          <li><a href="#">Settings 1</a>
-                          </li>
-                          <li><a href="#">Settings 2</a>
-                          </li>
-                        </ul>
-                      </li>
-                      <li><a class="close-link"><i class="fa fa-close"></i></a>
-                      </li>
-                    </ul>
-                    <div class="clearfix"></div>
-                  </div>
-                  <div class="x_content">
+                            <div class="row">
+                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                    <div class="x_panel">
+                                        <div class="x_title">
+                                            <h2><i class="fa fa-bars"></i> Tabs
+                                                <small>Float left</small>
+                                            </h2>
+                                            <ul class="nav navbar-right panel_toolbox">
+                                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
+                                                </li>
+                                                <li class="dropdown">
+                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
+                                                       role="button"
+                                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
+                                                    <ul class="dropdown-menu" role="menu">
+                                                        <li><a href="#">Settings 1</a>
+                                                        </li>
+                                                        <li><a href="#">Settings 2</a>
+                                                        </li>
+                                                    </ul>
+                                                </li>
+                                                <li><a class="close-link"><i class="fa fa-close"></i></a>
+                                                </li>
+                                            </ul>
+                                            <div class="clearfix"></div>
+                                        </div>
+                                        <div class="x_content">
 
 
-                    <div class="" role="tabpanel" data-example-id="togglable-tabs">
-                      <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
-                        <li role="presentation" class="active"><a href="#tab_content1" id="home-tab" role="tab" data-toggle="tab" aria-expanded="true">Home</a>
-                        </li>
-                        <li role="presentation" class=""><a href="#tab_content2" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false">Profile</a>
-                        </li>
-                        <li role="presentation" class=""><a href="#tab_content3" role="tab" id="profile-tab2" data-toggle="tab" aria-expanded="false">Profile</a>
-                        </li>
-                      </ul>
-                      <div id="myTabContent" class="tab-content">
-                        <div role="tabpanel" class="tab-pane fade active in" id="tab_content1" aria-labelledby="home-tab">
-                          <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher
-                            synth. Cosby sweater eu banh mi, qui irure terr.</p>
-                        </div>
-                        <div role="tabpanel" class="tab-pane fade" id="tab_content2" aria-labelledby="profile-tab">
-                          <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo
-                            booth letterpress, commodo enim craft beer mlkshk aliquip</p>
-                        </div>
-                        <div role="tabpanel" class="tab-pane fade" id="tab_content3" aria-labelledby="profile-tab">
-                          <p>xxFood truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo
-                            booth letterpress, commodo enim craft beer mlkshk </p>
-                        </div>
-                      </div>
-                    </div>
+                                            <div class="" role="tabpanel" data-example-id="togglable-tabs">
+                                                <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
+                                                    <li role="presentation" class="active"><a href="#tab_content1"
+                                                                                              id="home-tab"
+                                                                                              role="tab"
+                                                                                              data-toggle="tab"
+                                                                                              aria-expanded="true">Home</a>
+                                                    </li>
+                                                    <li role="presentation" class=""><a href="#tab_content2" role="tab"
+                                                                                        id="profile-tab"
+                                                                                        data-toggle="tab"
+                                                                                        aria-expanded="false">Profile</a>
+                                                    </li>
+                                                    <li role="presentation" class=""><a href="#tab_content3" role="tab"
+                                                                                        id="profile-tab2"
+                                                                                        data-toggle="tab"
+                                                                                        aria-expanded="false">Profile</a>
+                                                    </li>
+                                                </ul>
+                                                <div id="myTabContent" class="tab-content">
+                                                    <div role="tabpanel" class="tab-pane fade active in"
+                                                         id="tab_content1"
+                                                         aria-labelledby="home-tab">
+                                                        <p>Raw denim you probably haven't heard of them jean shorts
+                                                            Austin.
+                                                            Nesciunt tofu stumptown aliqua, retro synth master cleanse.
+                                                            Mustache
+                                                            cliche tempor, williamsburg carles vegan helvetica.
+                                                            Reprehenderit
+                                                            butcher retro keffiyeh dreamcatcher
+                                                            synth. Cosby sweater eu banh mi, qui irure terr.</p>
+                                                    </div>
+                                                    <div role="tabpanel" class="tab-pane fade" id="tab_content2"
+                                                         aria-labelledby="profile-tab">
+                                                        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla
+                                                            single-origin coffee squid. Exercitation +1 labore velit,
+                                                            blog
+                                                            sartorial PBR leggings next level wes anderson artisan four
+                                                            loko
+                                                            farm-to-table craft beer twee. Qui photo
+                                                            booth letterpress, commodo enim craft beer mlkshk
+                                                            aliquip</p>
+                                                    </div>
+                                                    <div role="tabpanel" class="tab-pane fade" id="tab_content3"
+                                                         aria-labelledby="profile-tab">
+                                                        <p>xxFood truck fixie locavore, accusamus mcsweeney's marfa
+                                                            nulla
+                                                            single-origin coffee squid. Exercitation +1 labore velit,
+                                                            blog
+                                                            sartorial PBR leggings next level wes anderson artisan four
+                                                            loko
+                                                            farm-to-table craft beer twee. Qui photo
+                                                            booth letterpress, commodo enim craft beer mlkshk </p>
+                                                    </div>
+                                                </div>
+                                            </div>
 
-                  </div>
-                </div>
-              </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                    <div class="x_panel">
+                                        <div class="x_title">
+                                            <h2><i class="fa fa-bars"></i> Tabs
+                                                <small>Float right</small>
+                                            </h2>
+                                            <ul class="nav navbar-right panel_toolbox">
+                                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
+                                                </li>
+                                                <li class="dropdown">
+                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
+                                                       role="button"
+                                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
+                                                    <ul class="dropdown-menu" role="menu">
+                                                        <li><a href="#">Settings 1</a>
+                                                        </li>
+                                                        <li><a href="#">Settings 2</a>
+                                                        </li>
+                                                    </ul>
+                                                </li>
+                                                <li><a class="close-link"><i class="fa fa-close"></i></a>
+                                                </li>
+                                            </ul>
+                                            <div class="clearfix"></div>
+                                        </div>
+                                        <div class="x_content">
+
+                                            <div class="" role="tabpanel" data-example-id="togglable-tabs">
+                                                <ul id="myTab1" class="nav nav-tabs bar_tabs right justify-content-end"
+                                                    role="tablist">
+                                                    <li role="presentation" class="active"><a href="#tab_content11"
+                                                                                              id="home-tabb" role="tab"
+                                                                                              data-toggle="tab"
+                                                                                              aria-controls="home"
+                                                                                              aria-expanded="true">Home</a>
+                                                    </li>
+                                                    <li role="presentation" class=""><a href="#tab_content22" role="tab"
+                                                                                        id="profile-tabb"
+                                                                                        data-toggle="tab"
+                                                                                        aria-controls="profile"
+                                                                                        aria-expanded="false">Profile</a>
+                                                    </li>
+                                                    <li role="presentation" class=""><a href="#tab_content33" role="tab"
+                                                                                        id="profile-tabb3"
+                                                                                        data-toggle="tab"
+                                                                                        aria-controls="profile"
+                                                                                        aria-expanded="false">Profile</a>
+                                                    </li>
+                                                </ul>
+                                                <div id="myTabContent2" class="tab-content">
+                                                    <div role="tabpanel" class="tab-pane fade active in"
+                                                         id="tab_content11"
+                                                         aria-labelledby="home-tab">
+                                                        <p>Raw denim you probably haven't heard of them jean shorts
+                                                            Austin.
+                                                            Nesciunt tofu stumptown aliqua, retro synth master cleanse.
+                                                            Mustache
+                                                            cliche tempor, williamsburg carles vegan helvetica.
+                                                            Reprehenderit
+                                                            butcher retro keffiyeh dreamcatcher
+                                                            synth. Cosby sweater eu banh mi, qui irure terr.</p>
+                                                    </div>
+                                                    <div role="tabpanel" class="tab-pane fade" id="tab_content22"
+                                                         aria-labelledby="profile-tab">
+                                                        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla
+                                                            single-origin coffee squid. Exercitation +1 labore velit,
+                                                            blog
+                                                            sartorial PBR leggings next level wes anderson artisan four
+                                                            loko
+                                                            farm-to-table craft beer twee. Qui photo
+                                                            booth letterpress, commodo enim craft beer mlkshk
+                                                            aliquip</p>
+                                                    </div>
+                                                    <div role="tabpanel" class="tab-pane fade" id="tab_content33"
+                                                         aria-labelledby="profile-tab">
+                                                        <p>xxFood truck fixie locavore, accusamus mcsweeney's marfa
+                                                            nulla
+                                                            single-origin coffee squid. Exercitation +1 labore velit,
+                                                            blog
+                                                            sartorial PBR leggings next level wes anderson artisan four
+                                                            loko
+                                                            farm-to-table craft beer twee. Qui photo
+                                                            booth letterpress, commodo enim craft beer mlkshk </p>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                    <div class="x_panel">
+                                        <div class="x_title">
+                                            <h2><i class="fa fa-bars"></i> Tabs
+                                                <small>Center</small>
+                                            </h2>
+                                            <ul class="nav navbar-right panel_toolbox">
+                                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
+                                                </li>
+                                                <li class="dropdown">
+                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
+                                                       role="button"
+                                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
+                                                    <ul class="dropdown-menu" role="menu">
+                                                        <li><a href="#">Settings 1</a>
+                                                        </li>
+                                                        <li><a href="#">Settings 2</a>
+                                                        </li>
+                                                    </ul>
+                                                </li>
+                                                <li><a class="close-link"><i class="fa fa-close"></i></a>
+                                                </li>
+                                            </ul>
+                                            <div class="clearfix"></div>
+                                        </div>
+                                        <div class="x_content">
+
+                                            <div class="" role="tabpanel" data-example-id="togglable-tabs">
+                                                <ul id="myTab2"
+                                                    class="nav nav-tabs bar_tabs right justify-content-center"
+                                                    role="tablist">
+                                                    <li role="presentation" class="active"><a href="#tab_content12"
+                                                                                              id="home-tabbb" role="tab"
+                                                                                              data-toggle="tab"
+                                                                                              aria-controls="home"
+                                                                                              aria-expanded="true">Home</a>
+                                                    </li>
+                                                    <li role="presentation" class=""><a href="#tab_content221"
+                                                                                        role="tab"
+                                                                                        id="profile-tabbb"
+                                                                                        data-toggle="tab"
+                                                                                        aria-controls="profile"
+                                                                                        aria-expanded="false">Profile</a>
+                                                    </li>
+                                                    <li role="presentation" class=""><a href="#tab_content331"
+                                                                                        role="tab"
+                                                                                        id="profile-tabbb3"
+                                                                                        data-toggle="tab"
+                                                                                        aria-controls="profile"
+                                                                                        aria-expanded="false">Profile</a>
+                                                    </li>
+                                                </ul>
+                                                <div id="myTabContent3" class="tab-content">
+                                                    <div role="tabpanel" class="tab-pane fade active in"
+                                                         id="tab_content12"
+                                                         aria-labelledby="home-tab">
+                                                        <p>Raw denim you probably haven't heard of them jean shorts
+                                                            Austin.
+                                                            Nesciunt tofu stumptown aliqua, retro synth master cleanse.
+                                                            Mustache
+                                                            cliche tempor, williamsburg carles vegan helvetica.
+                                                            Reprehenderit
+                                                            butcher retro keffiyeh dreamcatcher
+                                                            synth. Cosby sweater eu banh mi, qui irure terr.</p>
+                                                    </div>
+                                                    <div role="tabpanel" class="tab-pane fade" id="tab_content221"
+                                                         aria-labelledby="profile-tab">
+                                                        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla
+                                                            single-origin coffee squid. Exercitation +1 labore velit,
+                                                            blog
+                                                            sartorial PBR leggings next level wes anderson artisan four
+                                                            loko
+                                                            farm-to-table craft beer twee. Qui photo
+                                                            booth letterpress, commodo enim craft beer mlkshk
+                                                            aliquip</p>
+                                                    </div>
+                                                    <div role="tabpanel" class="tab-pane fade" id="tab_content331"
+                                                         aria-labelledby="profile-tab">
+                                                        <p>xxFood truck fixie locavore, accusamus mcsweeney's marfa
+                                                            nulla
+                                                            single-origin coffee squid. Exercitation +1 labore velit,
+                                                            blog
+                                                            sartorial PBR leggings next level wes anderson artisan four
+                                                            loko
+                                                            farm-to-table craft beer twee. Qui photo
+                                                            booth letterpress, commodo enim craft beer mlkshk </p>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                    <div class="x_panel">
+                                        <div class="x_title">
+                                            <h2><i class="fa fa-bars"></i> Vertical Tabs
+                                                <small>Float left</small>
+                                            </h2>
+                                            <ul class="nav navbar-right panel_toolbox">
+                                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
+                                                </li>
+                                                <li class="dropdown">
+                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
+                                                       role="button"
+                                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
+                                                    <ul class="dropdown-menu" role="menu">
+                                                        <li><a href="#">Settings 1</a>
+                                                        </li>
+                                                        <li><a href="#">Settings 2</a>
+                                                        </li>
+                                                    </ul>
+                                                </li>
+                                                <li><a class="close-link"><i class="fa fa-close"></i></a>
+                                                </li>
+                                            </ul>
+                                            <div class="clearfix"></div>
+                                        </div>
+                                        <div class="x_content">
+
+                                            <div class="col-xs-3">
+                                                <!-- required for floating -->
+                                                <!-- Nav tabs -->
+                                                <ul class="nav nav-tabs tabs-left">
+                                                    <li class="active"><a href="#home" data-toggle="tab">Home</a>
+                                                    </li>
+                                                    <li><a href="#profile" data-toggle="tab">Profile</a>
+                                                    </li>
+                                                    <li><a href="#messages" data-toggle="tab">Messages</a>
+                                                    </li>
+                                                    <li><a href="#settings" data-toggle="tab">Settings</a>
+                                                    </li>
+                                                </ul>
+                                            </div>
+
+                                            <div class="col-xs-9">
+                                                <!-- Tab panes -->
+                                                <div class="tab-content">
+                                                    <div class="tab-pane active" id="home">
+                                                        <p class="lead">Home tab</p>
+                                                        <p>Raw denim you probably haven't heard of them jean shorts
+                                                            Austin.
+                                                            Nesciunt tofu stumptown aliqua, retro synth master cleanse.
+                                                            Mustache
+                                                            cliche tempor, williamsburg carles vegan helvetica.
+                                                            Reprehenderit
+                                                            butcher retro keffiyeh dreamcatcher
+                                                            synth. Cosby sweater eu banh mi, qui irure terr.</p>
+                                                    </div>
+                                                    <div class="tab-pane" id="profile">Profile Tab.</div>
+                                                    <div class="tab-pane" id="messages">Messages Tab.</div>
+                                                    <div class="tab-pane" id="settings">Settings Tab.</div>
+                                                </div>
+                                            </div>
+
+                                            <div class="clearfix"></div>
+
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                    <div class="x_panel">
+                                        <div class="x_title">
+                                            <h2><i class="fa fa-bars"></i> Vertical Tabs
+                                                <small>Float right</small>
+                                            </h2>
+                                            <ul class="nav navbar-right panel_toolbox">
+                                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
+                                                </li>
+                                                <li class="dropdown">
+                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
+                                                       role="button"
+                                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
+                                                    <ul class="dropdown-menu" role="menu">
+                                                        <li><a href="#">Settings 1</a>
+                                                        </li>
+                                                        <li><a href="#">Settings 2</a>
+                                                        </li>
+                                                    </ul>
+                                                </li>
+                                                <li><a class="close-link"><i class="fa fa-close"></i></a>
+                                                </li>
+                                            </ul>
+                                            <div class="clearfix"></div>
+                                        </div>
+                                        <div class="x_content">
+
+                                            <div class="col-xs-9">
+                                                <!-- Tab panes -->
+                                                <div class="tab-content">
+                                                    <div class="tab-pane active" id="home-r">
+                                                        <p class="lead">Home tab</p>
+                                                        <p>Raw denim you probably haven't heard of them jean shorts
+                                                            Austin.
+                                                            Nesciunt tofu stumptown aliqua, retro synth master cleanse.
+                                                            Mustache
+                                                            cliche tempor, williamsburg carles vegan helvetica.
+                                                            Reprehenderit
+                                                            butcher retro keffiyeh dreamcatcher
+                                                            synth. Cosby sweater eu banh mi, qui irure terr.</p>
+                                                    </div>
+                                                    <div class="tab-pane" id="profile-r">Profile Tab.</div>
+                                                    <div class="tab-pane" id="messages-r">Messages Tab.</div>
+                                                    <div class="tab-pane" id="settings-r">Settings Tab.</div>
+                                                </div>
+                                            </div>
+
+                                            <div class="col-xs-3">
+                                                <!-- required for floating -->
+                                                <!-- Nav tabs -->
+                                                <ul class="nav nav-tabs tabs-right">
+                                                    <li class="active"><a href="#home-r" data-toggle="tab">Home</a>
+                                                    </li>
+                                                    <li><a href="#profile-r" data-toggle="tab">Profile</a>
+                                                    </li>
+                                                    <li><a href="#messages-r" data-toggle="tab">Messages</a>
+                                                    </li>
+                                                    <li><a href="#settings-r" data-toggle="tab">Settings</a>
+                                                    </li>
+                                                </ul>
+                                            </div>
+
+                                        </div>
+
+                                    </div>
+                                </div>
+
+                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                    <div class="x_panel">
+                                        <div class="x_title">
+                                            <h2><i class="fa fa-align-left"></i> Collapsible / Accordion
+                                                <small>Sessions</small>
+                                            </h2>
+                                            <ul class="nav navbar-right panel_toolbox">
+                                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
+                                                </li>
+                                                <li class="dropdown">
+                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
+                                                       role="button"
+                                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
+                                                    <ul class="dropdown-menu" role="menu">
+                                                        <li><a href="#">Settings 1</a>
+                                                        </li>
+                                                        <li><a href="#">Settings 2</a>
+                                                        </li>
+                                                    </ul>
+                                                </li>
+                                                <li><a class="close-link"><i class="fa fa-close"></i></a>
+                                                </li>
+                                            </ul>
+                                            <div class="clearfix"></div>
+                                        </div>
+                                        <div class="x_content">
+
+                                            <!-- start accordion -->
+                                            <div class="accordion" id="accordion" role="tablist"
+                                                 aria-multiselectable="true">
+                                                <div class="panel">
+                                                    <a class="panel-heading" role="tab" id="headingOne"
+                                                       data-toggle="collapse"
+                                                       data-parent="#accordion" href="#collapseOne" aria-expanded="true"
+                                                       aria-controls="collapseOne">
+                                                        <h4 class="panel-title">Collapsible Group Items #1</h4>
+                                                    </a>
+                                                    <div id="collapseOne" class="panel-collapse collapse in"
+                                                         role="tabpanel"
+                                                         aria-labelledby="headingOne">
+                                                        <div class="panel-body">
+                                                            <table class="table table-bordered">
+                                                                <thead>
+                                                                <tr>
+                                                                    <th>#</th>
+                                                                    <th>First Name</th>
+                                                                    <th>Last Name</th>
+                                                                    <th>Username</th>
+                                                                </tr>
+                                                                </thead>
+                                                                <tbody>
+                                                                <tr>
+                                                                    <th scope="row">1</th>
+                                                                    <td>Mark</td>
+                                                                    <td>Otto</td>
+                                                                    <td>@mdo</td>
+                                                                </tr>
+                                                                <tr>
+                                                                    <th scope="row">2</th>
+                                                                    <td>Jacob</td>
+                                                                    <td>Thornton</td>
+                                                                    <td>@fat</td>
+                                                                </tr>
+                                                                <tr>
+                                                                    <th scope="row">3</th>
+                                                                    <td>Larry</td>
+                                                                    <td>the Bird</td>
+                                                                    <td>@twitter</td>
+                                                                </tr>
+                                                                </tbody>
+                                                            </table>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="panel">
+                                                    <a class="panel-heading collapsed" role="tab" id="headingTwo"
+                                                       data-toggle="collapse" data-parent="#accordion"
+                                                       href="#collapseTwo"
+                                                       aria-expanded="false" aria-controls="collapseTwo">
+                                                        <h4 class="panel-title">Collapsible Group Items #2</h4>
+                                                    </a>
+                                                    <div id="collapseTwo" class="panel-collapse collapse"
+                                                         role="tabpanel"
+                                                         aria-labelledby="headingTwo">
+                                                        <div class="panel-body">
+                                                            <p><strong>Collapsible Item 2 data</strong>
+                                                            </p>
+                                                            Anim pariatur cliche reprehenderit, enim eiusmod high life
+                                                            accusamus
+                                                            terry richardson ad squid. 3 wolf moon officia aute, non
+                                                            cupidatat
+                                                            skateboard dolor brunch. Food truck quinoa nesciunt laborum
+                                                            eiusmod.
+                                                            Brunch 3 wolf moon tempor,
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="panel">
+                                                    <a class="panel-heading collapsed" role="tab" id="headingThree"
+                                                       data-toggle="collapse" data-parent="#accordion"
+                                                       href="#collapseThree"
+                                                       aria-expanded="false" aria-controls="collapseThree">
+                                                        <h4 class="panel-title">Collapsible Group Items #3</h4>
+                                                    </a>
+                                                    <div id="collapseThree" class="panel-collapse collapse"
+                                                         role="tabpanel"
+                                                         aria-labelledby="headingThree">
+                                                        <div class="panel-body">
+                                                            <p><strong>Collapsible Item 3 data</strong>
+                                                            </p>
+                                                            Anim pariatur cliche reprehenderit, enim eiusmod high life
+                                                            accusamus
+                                                            terry richardson ad squid. 3 wolf moon officia aute, non
+                                                            cupidatat
+                                                            skateboard dolor brunch. Food truck quinoa nesciunt laborum
+                                                            eiusmod.
+                                                            Brunch 3 wolf moon tempor
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <!-- end of accordion -->
 
 
-              <div class="col-md-6 col-sm-6 col-xs-12">
-                <div class="x_panel">
-                  <div class="x_title">
-                    <h2><i class="fa fa-bars"></i> Tabs <small>Float right</small></h2>
-                    <ul class="nav navbar-right panel_toolbox">
-                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
-                      </li>
-                      <li class="dropdown">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
-                        <ul class="dropdown-menu" role="menu">
-                          <li><a href="#">Settings 1</a>
-                          </li>
-                          <li><a href="#">Settings 2</a>
-                          </li>
-                        </ul>
-                      </li>
-                      <li><a class="close-link"><i class="fa fa-close"></i></a>
-                      </li>
-                    </ul>
-                    <div class="clearfix"></div>
-                  </div>
-                  <div class="x_content">
+                                        </div>
+                                    </div>
+                                </div>
 
-                    <div class="" role="tabpanel" data-example-id="togglable-tabs">
-                      <ul id="myTab1" class="nav nav-tabs bar_tabs right" role="tablist">
-                        <li role="presentation" class="active"><a href="#tab_content11" id="home-tabb" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a>
-                        </li>
-                        <li role="presentation" class=""><a href="#tab_content22" role="tab" id="profile-tabb" data-toggle="tab" aria-controls="profile" aria-expanded="false">Profile</a>
-                        </li>
-                        <li role="presentation" class=""><a href="#tab_content33" role="tab" id="profile-tabb3" data-toggle="tab" aria-controls="profile" aria-expanded="false">Profile</a>
-                        </li>
-                      </ul>
-                      <div id="myTabContent2" class="tab-content">
-                        <div role="tabpanel" class="tab-pane fade active in" id="tab_content11" aria-labelledby="home-tab">
-                          <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher
-                            synth. Cosby sweater eu banh mi, qui irure terr.</p>
-                        </div>
-                        <div role="tabpanel" class="tab-pane fade" id="tab_content22" aria-labelledby="profile-tab">
-                          <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo
-                            booth letterpress, commodo enim craft beer mlkshk aliquip</p>
-                        </div>
-                        <div role="tabpanel" class="tab-pane fade" id="tab_content33" aria-labelledby="profile-tab">
-                          <p>xxFood truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo
-                            booth letterpress, commodo enim craft beer mlkshk </p>
-                        </div>
-                      </div>
-                    </div>
+                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                    <div class="x_panel">
+                                        <div class="x_title">
+                                            <h2><i class="fa fa-align-left"></i> Collapsible / Accordion
+                                                <small>Sessions</small>
+                                            </h2>
+                                            <ul class="nav navbar-right panel_toolbox">
+                                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
+                                                </li>
+                                                <li class="dropdown">
+                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
+                                                       role="button"
+                                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
+                                                    <ul class="dropdown-menu" role="menu">
+                                                        <li><a href="#">Settings 1</a>
+                                                        </li>
+                                                        <li><a href="#">Settings 2</a>
+                                                        </li>
+                                                    </ul>
+                                                </li>
+                                                <li><a class="close-link"><i class="fa fa-close"></i></a>
+                                                </li>
+                                            </ul>
+                                            <div class="clearfix"></div>
+                                        </div>
+                                        <div class="x_content">
 
-                  </div>
-                </div>
-              </div>
-              <div class="clearfix"></div>
-
-              <div class="col-md-6 col-sm-6 col-xs-12">
-                <div class="x_panel">
-                  <div class="x_title">
-                    <h2><i class="fa fa-bars"></i> Vertical Tabs <small>Float left</small></h2>
-                    <ul class="nav navbar-right panel_toolbox">
-                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
-                      </li>
-                      <li class="dropdown">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
-                        <ul class="dropdown-menu" role="menu">
-                          <li><a href="#">Settings 1</a>
-                          </li>
-                          <li><a href="#">Settings 2</a>
-                          </li>
-                        </ul>
-                      </li>
-                      <li><a class="close-link"><i class="fa fa-close"></i></a>
-                      </li>
-                    </ul>
-                    <div class="clearfix"></div>
-                  </div>
-                  <div class="x_content">
-
-                    <div class="col-xs-3">
-                      <!-- required for floating -->
-                      <!-- Nav tabs -->
-                      <ul class="nav nav-tabs tabs-left">
-                        <li class="active"><a href="#home" data-toggle="tab">Home</a>
-                        </li>
-                        <li><a href="#profile" data-toggle="tab">Profile</a>
-                        </li>
-                        <li><a href="#messages" data-toggle="tab">Messages</a>
-                        </li>
-                        <li><a href="#settings" data-toggle="tab">Settings</a>
-                        </li>
-                      </ul>
-                    </div>
-
-                    <div class="col-xs-9">
-                      <!-- Tab panes -->
-                      <div class="tab-content">
-                        <div class="tab-pane active" id="home">
-                          <p class="lead">Home tab</p>
-                          <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher
-                            synth. Cosby sweater eu banh mi, qui irure terr.</p>
-                        </div>
-                        <div class="tab-pane" id="profile">Profile Tab.</div>
-                        <div class="tab-pane" id="messages">Messages Tab.</div>
-                        <div class="tab-pane" id="settings">Settings Tab.</div>
-                      </div>
-                    </div>
-
-                    <div class="clearfix"></div>
-
-                  </div>
-                </div>
-              </div>
-
-              <div class="col-md-6 col-sm-6 col-xs-12">
-                <div class="x_panel">
-                  <div class="x_title">
-                    <h2><i class="fa fa-bars"></i> Vertical Tabs <small>Float right</small></h2>
-                    <ul class="nav navbar-right panel_toolbox">
-                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
-                      </li>
-                      <li class="dropdown">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
-                        <ul class="dropdown-menu" role="menu">
-                          <li><a href="#">Settings 1</a>
-                          </li>
-                          <li><a href="#">Settings 2</a>
-                          </li>
-                        </ul>
-                      </li>
-                      <li><a class="close-link"><i class="fa fa-close"></i></a>
-                      </li>
-                    </ul>
-                    <div class="clearfix"></div>
-                  </div>
-                  <div class="x_content">
-
-                    <div class="col-xs-9">
-                      <!-- Tab panes -->
-                      <div class="tab-content">
-                        <div class="tab-pane active" id="home-r">
-                          <p class="lead">Home tab</p>
-                          <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher
-                            synth. Cosby sweater eu banh mi, qui irure terr.</p>
-                        </div>
-                        <div class="tab-pane" id="profile-r">Profile Tab.</div>
-                        <div class="tab-pane" id="messages-r">Messages Tab.</div>
-                        <div class="tab-pane" id="settings-r">Settings Tab.</div>
-                      </div>
-                    </div>
-
-                    <div class="col-xs-3">
-                      <!-- required for floating -->
-                      <!-- Nav tabs -->
-                      <ul class="nav nav-tabs tabs-right">
-                        <li class="active"><a href="#home-r" data-toggle="tab">Home</a>
-                        </li>
-                        <li><a href="#profile-r" data-toggle="tab">Profile</a>
-                        </li>
-                        <li><a href="#messages-r" data-toggle="tab">Messages</a>
-                        </li>
-                        <li><a href="#settings-r" data-toggle="tab">Settings</a>
-                        </li>
-                      </ul>
-                    </div>
-
-                  </div>
-
-                </div>
-              </div>
-              <div class="clearfix"></div>
+                                            <!-- start accordion -->
+                                            <div class="accordion" id="accordion1" role="tablist"
+                                                 aria-multiselectable="true">
+                                                <div class="panel">
+                                                    <a class="panel-heading" role="tab" id="headingOne1"
+                                                       data-toggle="collapse"
+                                                       data-parent="#accordion1" href="#collapseOne1"
+                                                       aria-expanded="true"
+                                                       aria-controls="collapseOne">
+                                                        <h4 class="panel-title">Collapsible Group Item #1</h4>
+                                                    </a>
+                                                    <div id="collapseOne1" class="panel-collapse collapse in"
+                                                         role="tabpanel"
+                                                         aria-labelledby="headingOne">
+                                                        <div class="panel-body">
+                                                            <table class="table table-striped">
+                                                                <thead>
+                                                                <tr>
+                                                                    <th>#</th>
+                                                                    <th>First Name</th>
+                                                                    <th>Last Name</th>
+                                                                    <th>Username</th>
+                                                                </tr>
+                                                                </thead>
+                                                                <tbody>
+                                                                <tr>
+                                                                    <th scope="row">1</th>
+                                                                    <td>Mark</td>
+                                                                    <td>Otto</td>
+                                                                    <td>@mdo</td>
+                                                                </tr>
+                                                                <tr>
+                                                                    <th scope="row">2</th>
+                                                                    <td>Jacob</td>
+                                                                    <td>Thornton</td>
+                                                                    <td>@fat</td>
+                                                                </tr>
+                                                                <tr>
+                                                                    <th scope="row">3</th>
+                                                                    <td>Larry</td>
+                                                                    <td>the Bird</td>
+                                                                    <td>@twitter</td>
+                                                                </tr>
+                                                                </tbody>
+                                                            </table>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="panel">
+                                                    <a class="panel-heading collapsed" role="tab" id="headingTwo1"
+                                                       data-toggle="collapse" data-parent="#accordion1"
+                                                       href="#collapseTwo1"
+                                                       aria-expanded="false" aria-controls="collapseTwo">
+                                                        <h4 class="panel-title">Collapsible Group Item #2</h4>
+                                                    </a>
+                                                    <div id="collapseTwo1" class="panel-collapse collapse"
+                                                         role="tabpanel"
+                                                         aria-labelledby="headingTwo">
+                                                        <div class="panel-body">
+                                                            <p><strong>Collapsible Item 2 data</strong>
+                                                            </p>
+                                                            Anim pariatur cliche reprehenderit, enim eiusmod high life
+                                                            accusamus
+                                                            terry richardson ad squid. 3 wolf moon officia aute, non
+                                                            cupidatat
+                                                            skateboard dolor brunch. Food truck quinoa nesciunt laborum
+                                                            eiusmod.
+                                                            Brunch 3 wolf moon tempor,
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="panel">
+                                                    <a class="panel-heading collapsed" role="tab" id="headingThree1"
+                                                       data-toggle="collapse" data-parent="#accordion1"
+                                                       href="#collapseThree1"
+                                                       aria-expanded="false" aria-controls="collapseThree">
+                                                        <h4 class="panel-title">Collapsible Group Item #3</h4>
+                                                    </a>
+                                                    <div id="collapseThree1" class="panel-collapse collapse"
+                                                         role="tabpanel"
+                                                         aria-labelledby="headingThree">
+                                                        <div class="panel-body">
+                                                            <p><strong>Collapsible Item 3 data</strong>
+                                                            </p>
+                                                            Anim pariatur cliche reprehenderit, enim eiusmod high life
+                                                            accusamus
+                                                            terry richardson ad squid. 3 wolf moon officia aute, non
+                                                            cupidatat
+                                                            skateboard dolor brunch. Food truck quinoa nesciunt laborum
+                                                            eiusmod.
+                                                            Brunch 3 wolf moon tempor
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <!-- end of accordion -->
 
 
-              <div class="col-md-6 col-sm-6 col-xs-12">
-                <div class="x_panel">
-                  <div class="x_title">
-                    <h2><i class="fa fa-align-left"></i> Collapsible / Accordion <small>Sessions</small></h2>
-                    <ul class="nav navbar-right panel_toolbox">
-                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
-                      </li>
-                      <li class="dropdown">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
-                        <ul class="dropdown-menu" role="menu">
-                          <li><a href="#">Settings 1</a>
-                          </li>
-                          <li><a href="#">Settings 2</a>
-                          </li>
-                        </ul>
-                      </li>
-                      <li><a class="close-link"><i class="fa fa-close"></i></a>
-                      </li>
-                    </ul>
-                    <div class="clearfix"></div>
-                  </div>
-                  <div class="x_content">
+                                        </div>
+                                    </div>
+                                </div>
 
-                    <!-- start accordion -->
-                    <div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">
-                      <div class="panel">
-                        <a class="panel-heading" role="tab" id="headingOne" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
-                          <h4 class="panel-title">Collapsible Group Items #1</h4>
-                        </a>
-                        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
-                          <div class="panel-body">
-                            <table class="table table-bordered">
-                              <thead>
-                                <tr>
-                                  <th>#</th>
-                                  <th>First Name</th>
-                                  <th>Last Name</th>
-                                  <th>Username</th>
-                                </tr>
-                              </thead>
-                              <tbody>
-                                <tr>
-                                  <th scope="row">1</th>
-                                  <td>Mark</td>
-                                  <td>Otto</td>
-                                  <td>@mdo</td>
-                                </tr>
-                                <tr>
-                                  <th scope="row">2</th>
-                                  <td>Jacob</td>
-                                  <td>Thornton</td>
-                                  <td>@fat</td>
-                                </tr>
-                                <tr>
-                                  <th scope="row">3</th>
-                                  <td>Larry</td>
-                                  <td>the Bird</td>
-                                  <td>@twitter</td>
-                                </tr>
-                              </tbody>
-                            </table>
-                          </div>
-                        </div>
-                      </div>
-                      <div class="panel">
-                        <a class="panel-heading collapsed" role="tab" id="headingTwo" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
-                          <h4 class="panel-title">Collapsible Group Items #2</h4>
-                        </a>
-                        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
-                          <div class="panel-body">
-                            <p><strong>Collapsible Item 2 data</strong>
-                            </p>
-                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
-                          </div>
-                        </div>
-                      </div>
-                      <div class="panel">
-                        <a class="panel-heading collapsed" role="tab" id="headingThree" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
-                          <h4 class="panel-title">Collapsible Group Items #3</h4>
-                        </a>
-                        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
-                          <div class="panel-body">
-                            <p><strong>Collapsible Item 3 data</strong>
-                            </p>
-                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <!-- end of accordion -->
+                            </div>
+                            <div class="row">
+                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                    <div class="x_panel">
+                                        <div class="x_title">
+                                            <h2>Tooltips
+                                                <small>Hover to view</small>
+                                            </h2>
+                                            <ul class="nav navbar-right panel_toolbox">
+                                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
+                                                </li>
+                                                <li class="dropdown">
+                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
+                                                       role="button"
+                                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
+                                                    <ul class="dropdown-menu" role="menu">
+                                                        <li><a href="#">Settings 1</a>
+                                                        </li>
+                                                        <li><a href="#">Settings 2</a>
+                                                        </li>
+                                                    </ul>
+                                                </li>
+                                                <li><a class="close-link"><i class="fa fa-close"></i></a>
+                                                </li>
+                                            </ul>
+                                            <div class="clearfix"></div>
+                                        </div>
+                                        <div class="x_content">
 
+                                            <p>Add small overlays of content for housing secondary information.</p>
+                                            <!-- start pop-over -->
+                                            <div class="bs-example-popovers">
+                                                <button type="button" class="btn btn-light" data-container="body"
+                                                        data-toggle="popover" data-placement="left"
+                                                        data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
+                                                        data-original-title="" title="">
+                                                    Left
+                                                </button>
+                                                <button type="button" class="btn btn-light" data-container="body"
+                                                        data-toggle="popover" data-placement="top"
+                                                        data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
+                                                        data-original-title="" title="">
+                                                    Top
+                                                </button>
+                                                <button type="button" class="btn btn-light" data-container="body"
+                                                        data-toggle="popover" data-placement="bottom"
+                                                        data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+                                                    Bottom
+                                                </button>
+                                                <button type="button" class="btn btn-light" data-container="body"
+                                                        data-toggle="popover" data-placement="right"
+                                                        data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+                                                    Right
+                                                </button>
+                                            </div>
+                                            <!-- end pop-over -->
 
-                  </div>
-                </div>
-              </div>
+                                        </div>
+                                    </div>
+                                </div>
 
+                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                    <div class="x_panel">
+                                        <div class="x_title">
+                                            <h2>Tooltips
+                                                <small>Hover to view</small>
+                                            </h2>
+                                            <ul class="nav navbar-right panel_toolbox">
+                                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
+                                                </li>
+                                                <li class="dropdown">
+                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
+                                                       role="button"
+                                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
+                                                    <ul class="dropdown-menu" role="menu">
+                                                        <li><a href="#">Settings 1</a>
+                                                        </li>
+                                                        <li><a href="#">Settings 2</a>
+                                                        </li>
+                                                    </ul>
+                                                </li>
+                                                <li><a class="close-link"><i class="fa fa-close"></i></a>
+                                                </li>
+                                            </ul>
+                                            <div class="clearfix"></div>
+                                        </div>
+                                        <div class="x_content">
 
-              <div class="col-md-6 col-sm-6 col-xs-12">
-                <div class="x_panel">
-                  <div class="x_title">
-                    <h2><i class="fa fa-align-left"></i> Collapsible / Accordion <small>Sessions</small></h2>
-                    <ul class="nav navbar-right panel_toolbox">
-                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
-                      </li>
-                      <li class="dropdown">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
-                        <ul class="dropdown-menu" role="menu">
-                          <li><a href="#">Settings 1</a>
-                          </li>
-                          <li><a href="#">Settings 2</a>
-                          </li>
-                        </ul>
-                      </li>
-                      <li><a class="close-link"><i class="fa fa-close"></i></a>
-                      </li>
-                    </ul>
-                    <div class="clearfix"></div>
-                  </div>
-                  <div class="x_content">
+                                            <p>Hover over the links below to see tooltips:</p>
 
-                    <!-- start accordion -->
-                    <div class="accordion" id="accordion1" role="tablist" aria-multiselectable="true">
-                      <div class="panel">
-                        <a class="panel-heading" role="tab" id="headingOne1" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1" aria-expanded="true" aria-controls="collapseOne">
-                          <h4 class="panel-title">Collapsible Group Item #1</h4>
-                        </a>
-                        <div id="collapseOne1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
-                          <div class="panel-body">
-                            <table class="table table-striped">
-                              <thead>
-                                <tr>
-                                  <th>#</th>
-                                  <th>First Name</th>
-                                  <th>Last Name</th>
-                                  <th>Username</th>
-                                </tr>
-                              </thead>
-                              <tbody>
-                                <tr>
-                                  <th scope="row">1</th>
-                                  <td>Mark</td>
-                                  <td>Otto</td>
-                                  <td>@mdo</td>
-                                </tr>
-                                <tr>
-                                  <th scope="row">2</th>
-                                  <td>Jacob</td>
-                                  <td>Thornton</td>
-                                  <td>@fat</td>
-                                </tr>
-                                <tr>
-                                  <th scope="row">3</th>
-                                  <td>Larry</td>
-                                  <td>the Bird</td>
-                                  <td>@twitter</td>
-                                </tr>
-                              </tbody>
-                            </table>
-                          </div>
-                        </div>
-                      </div>
-                      <div class="panel">
-                        <a class="panel-heading collapsed" role="tab" id="headingTwo1" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo1" aria-expanded="false" aria-controls="collapseTwo">
-                          <h4 class="panel-title">Collapsible Group Item #2</h4>
-                        </a>
-                        <div id="collapseTwo1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
-                          <div class="panel-body">
-                            <p><strong>Collapsible Item 2 data</strong>
-                            </p>
-                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
-                          </div>
-                        </div>
-                      </div>
-                      <div class="panel">
-                        <a class="panel-heading collapsed" role="tab" id="headingThree1" data-toggle="collapse" data-parent="#accordion1" href="#collapseThree1" aria-expanded="false" aria-controls="collapseThree">
-                          <h4 class="panel-title">Collapsible Group Item #3</h4>
-                        </a>
-                        <div id="collapseThree1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
-                          <div class="panel-body">
-                            <p><strong>Collapsible Item 3 data</strong>
-                            </p>
-                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <!-- end of accordion -->
+                                            <button type="button" class="btn btn-light" data-toggle="tooltip"
+                                                    data-placement="left" title="Tooltip left">Tooltip left
+                                            </button>
 
+                                            <button type="button" class="btn btn-light" data-toggle="tooltip"
+                                                    data-placement="top" title="Tooltip top">Tooltip top
+                                            </button>
 
-                  </div>
-                </div>
-              </div>
+                                            <button type="button" class="btn btn-light" data-toggle="tooltip"
+                                                    data-placement="bottom" title="Tooltip bottom">Tooltip bottom
+                                            </button>
 
-            </div>
-            <div class="clearfix"></div>
+                                            <button type="button" class="btn btn-light" data-toggle="tooltip"
+                                                    data-placement="right" title="Tooltip right">Tooltip right
+                                            </button>
 
-            <div class="">
+                                            <button type="button" class="btn btn-light" data-toggle="tooltip"
+                                                    data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
+                                                Tooltip with HTML
+                                            </button>
 
-              <div class="col-md-6 col-sm-6 col-xs-12">
-                <div class="x_panel">
-                  <div class="x_title">
-                    <h2>Tooltips <small>Hover to view</small></h2>
-                    <ul class="nav navbar-right panel_toolbox">
-                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
-                      </li>
-                      <li class="dropdown">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
-                        <ul class="dropdown-menu" role="menu">
-                          <li><a href="#">Settings 1</a>
-                          </li>
-                          <li><a href="#">Settings 2</a>
-                          </li>
-                        </ul>
-                      </li>
-                      <li><a class="close-link"><i class="fa fa-close"></i></a>
-                      </li>
-                    </ul>
-                    <div class="clearfix"></div>
-                  </div>
-                  <div class="x_content">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                    <div class="x_panel">
+                                        <div class="x_title">
+                                            <h2>Daily active users
+                                                <small>Sessions</small>
+                                            </h2>
+                                            <ul class="nav navbar-right panel_toolbox">
+                                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
+                                                </li>
+                                                <li class="dropdown">
+                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
+                                                       role="button"
+                                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
+                                                    <ul class="dropdown-menu" role="menu">
+                                                        <li><a href="#">Settings 1</a>
+                                                        </li>
+                                                        <li><a href="#">Settings 2</a>
+                                                        </li>
+                                                    </ul>
+                                                </li>
+                                                <li><a class="close-link"><i class="fa fa-close"></i></a>
+                                                </li>
+                                            </ul>
+                                            <div class="clearfix"></div>
+                                        </div>
+                                        <div class="x_content">
+                                            <ul class="list-unstyled timeline">
+                                                <li>
+                                                    <div class="block">
+                                                        <div class="tags">
+                                                            <a href="" class="tag">
+                                                                <span>Entertainment</span>
+                                                            </a>
+                                                        </div>
+                                                        <div class="block_content">
+                                                            <h2 class="title">
+                                                                <a>Who Needs Sundance When You’ve
+                                                                    Got&nbsp;Crowdfunding?</a>
+                                                            </h2>
+                                                            <div class="byline">
+                                                                <span>13 hours ago</span> by <a>Jane Smith</a>
+                                                            </div>
+                                                            <p class="excerpt">Film festivals used to be do-or-die
+                                                                moments
+                                                                for movie
+                                                                makers. They were where you met the producers that could
+                                                                fund your
+                                                                project, and if the buyers liked your flick, they’d pay
+                                                                to
+                                                                Fast-forward and… <a>Read&nbsp;More</a>
+                                                            </p>
+                                                        </div>
+                                                    </div>
+                                                </li>
+                                                <li>
+                                                    <div class="block">
+                                                        <div class="tags">
+                                                            <a href="" class="tag">
+                                                                <span>Entertainment</span>
+                                                            </a>
+                                                        </div>
+                                                        <div class="block_content">
+                                                            <h2 class="title">
+                                                                <a>Who Needs Sundance When You’ve
+                                                                    Got&nbsp;Crowdfunding?</a>
+                                                            </h2>
+                                                            <div class="byline">
+                                                                <span>13 hours ago</span> by <a>Jane Smith</a>
+                                                            </div>
+                                                            <p class="excerpt">Film festivals used to be do-or-die
+                                                                moments
+                                                                for movie
+                                                                makers. They were where you met the producers that could
+                                                                fund your
+                                                                project, and if the buyers liked your flick, they’d pay
+                                                                to
+                                                                Fast-forward and… <a>Read&nbsp;More</a>
+                                                            </p>
+                                                        </div>
+                                                    </div>
+                                                </li>
+                                                <li>
+                                                    <div class="block">
+                                                        <div class="tags">
+                                                            <a href="" class="tag">
+                                                                <span>Entertainment</span>
+                                                            </a>
+                                                        </div>
+                                                        <div class="block_content">
+                                                            <h2 class="title">
+                                                                <a>Who Needs Sundance When You’ve
+                                                                    Got&nbsp;Crowdfunding?</a>
+                                                            </h2>
+                                                            <div class="byline">
+                                                                <span>13 hours ago</span> by <a>Jane Smith</a>
+                                                            </div>
+                                                            <p class="excerpt">Film festivals used to be do-or-die
+                                                                moments
+                                                                for movie
+                                                                makers. They were where you met the producers that could
+                                                                fund your
+                                                                project, and if the buyers liked your flick, they’d pay
+                                                                to
+                                                                Fast-forward and… <a>Read&nbsp;More</a>
+                                                            </p>
+                                                        </div>
+                                                    </div>
+                                                </li>
+                                            </ul>
 
-                    <p>Add small overlays of content for housing secondary information.</p>
-                    <!-- start pop-over -->
-                    <div class="bs-example-popovers">
-                      <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">
-                        Left
-                      </button>
-                      <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">
-                        Top
-                      </button>
-                      <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
-                        Bottom
-                      </button>
-                      <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
-                        Right
-                      </button>
-                    </div>
-                    <!-- end pop-over -->
+                                        </div>
+                                    </div>
+                                </div>
 
-                  </div>
-                </div>
-              </div>
+                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                    <div class="x_panel">
+                                        <div class="x_title">
+                                            <h2>Daily active users
+                                                <small>Sessions</small>
+                                            </h2>
+                                            <ul class="nav navbar-right panel_toolbox">
+                                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
+                                                </li>
+                                                <li class="dropdown">
+                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
+                                                       role="button"
+                                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
+                                                    <ul class="dropdown-menu" role="menu">
+                                                        <li><a href="#">Settings 1</a>
+                                                        </li>
+                                                        <li><a href="#">Settings 2</a>
+                                                        </li>
+                                                    </ul>
+                                                </li>
+                                                <li><a class="close-link"><i class="fa fa-close"></i></a>
+                                                </li>
+                                            </ul>
+                                            <div class="clearfix"></div>
+                                        </div>
+                                        <div class="x_content">
 
+                                            <div class="bs-example" data-example-id="simple-jumbotron">
+                                                <div class="jumbotron">
+                                                    <h1>Hello, world!</h1>
+                                                    <p>This is a simple hero unit, a simple jumbotron-style component
+                                                        for
+                                                        calling
+                                                        extra attention to featured content or information.</p>
+                                                </div>
+                                            </div>
 
+                                        </div>
+                                    </div>
+                                </div>
 
-              <div class="col-md-6 col-sm-6 col-xs-12">
-                <div class="x_panel">
-                  <div class="x_title">
-                    <h2>Tooltips <small>Hover to view</small></h2>
-                    <ul class="nav navbar-right panel_toolbox">
-                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
-                      </li>
-                      <li class="dropdown">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
-                        <ul class="dropdown-menu" role="menu">
-                          <li><a href="#">Settings 1</a>
-                          </li>
-                          <li><a href="#">Settings 2</a>
-                          </li>
-                        </ul>
-                      </li>
-                      <li><a class="close-link"><i class="fa fa-close"></i></a>
-                      </li>
-                    </ul>
-                    <div class="clearfix"></div>
-                  </div>
-                  <div class="x_content">
+                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                    <div class="x_panel">
+                                        <div class="x_title">
+                                            <h2><i class="fa fa-chevron-down"></i> Dropdowns
+                                                <small>Multiple dropdown designs</small>
+                                            </h2>
+                                            <ul class="nav navbar-right panel_toolbox">
+                                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
+                                                </li>
+                                                <li class="dropdown">
+                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
+                                                       role="button"
+                                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
+                                                    <ul class="dropdown-menu" role="menu">
+                                                        <li><a href="#">Settings 1</a>
+                                                        </li>
+                                                        <li><a href="#">Settings 2</a>
+                                                        </li>
+                                                    </ul>
+                                                </li>
+                                                <li><a class="close-link"><i class="fa fa-close"></i></a>
+                                                </li>
+                                            </ul>
+                                            <div class="clearfix"></div>
+                                        </div>
+                                        <div class="x_content">
 
-                    <p>Hover over the links below to see tooltips:</p>
+                                            <p>Gentelella provides you with several dropdown designs for your
+                                                choosing.</p>
+                                            <ul class="nav nav-pills" role="tablist">
+                                                <li role="presentation"><a href="#">Regular link</a>
+                                                </li>
+                                                <li role="presentation" class="dropdown">
+                                                    <a id="drop4" href="#" class="dropdown-toggle"
+                                                       data-toggle="dropdown"
+                                                       aria-haspopup="true" role="button" aria-expanded="false">
+                                                        Dropdown
+                                                        <span class="caret"></span>
+                                                    </a>
+                                                    <ul id="menu6" class="dropdown-menu animated fadeInDown"
+                                                        role="menu">
+                                                        <li role="presentation"><a role="menuitem" tabindex="-1"
+                                                                                   href="https://twitter.com/fat">Action</a>
+                                                        </li>
+                                                        <li role="presentation"><a role="menuitem" tabindex="-1"
+                                                                                   href="https://twitter.com/fat">Another
+                                                            action</a>
+                                                        </li>
+                                                        <li role="presentation"><a role="menuitem" tabindex="-1"
+                                                                                   href="https://twitter.com/fat">Something
+                                                            else
+                                                            here</a>
+                                                        </li>
+                                                        <li role="presentation" class="divider"></li>
+                                                        <li role="presentation"><a role="menuitem" tabindex="-1"
+                                                                                   href="https://twitter.com/fat">Separated
+                                                            link</a>
+                                                        </li>
+                                                    </ul>
+                                                </li>
+                                                <li role="presentation" class="dropdown">
+                                                    <a id="drop5" href="#" class="dropdown-toggle"
+                                                       data-toggle="dropdown"
+                                                       aria-haspopup="true" role="button" aria-expanded="false">
+                                                        Dropdown
+                                                        <span class="caret"></span>
+                                                    </a>
+                                                    <ul id="menu2" class="dropdown-menu animated fadeInDown" role="menu"
+                                                        aria-labelledby="drop5">
+                                                        <li role="presentation"><a role="menuitem" tabindex="-1"
+                                                                                   href="https://twitter.com/fat">Action</a>
+                                                        </li>
+                                                        <li role="presentation"><a role="menuitem" tabindex="-1"
+                                                                                   href="https://twitter.com/fat">Another
+                                                            action</a>
+                                                        </li>
+                                                        <li role="presentation"><a role="menuitem" tabindex="-1"
+                                                                                   href="https://twitter.com/fat">Something
+                                                            else
+                                                            here</a>
+                                                        </li>
+                                                        <li role="presentation" class="divider"></li>
+                                                        <li role="presentation"><a role="menuitem" tabindex="-1"
+                                                                                   href="https://twitter.com/fat">Separated
+                                                            link</a>
+                                                        </li>
+                                                    </ul>
+                                                </li>
+                                                <li role="presentation" class="dropdown">
+                                                    <a id="drop6" href="#" class="dropdown-toggle"
+                                                       data-toggle="dropdown"
+                                                       aria-haspopup="true" role="button" aria-expanded="false">
+                                                        Dropdown
+                                                        <span class="caret"></span>
+                                                    </a>
+                                                    <ul id="menu3" class="dropdown-menu animated fadeInDown" role="menu"
+                                                        aria-labelledby="drop6">
+                                                        <li role="presentation"><a role="menuitem" tabindex="-1"
+                                                                                   href="https://twitter.com/fat">Action</a>
+                                                        </li>
+                                                        <li role="presentation"><a role="menuitem" tabindex="-1"
+                                                                                   href="https://twitter.com/fat">Another
+                                                            action</a>
+                                                        </li>
+                                                        <li role="presentation"><a role="menuitem" tabindex="-1"
+                                                                                   href="https://twitter.com/fat">Something
+                                                            else
+                                                            here</a>
+                                                        </li>
+                                                        <li role="presentation" class="divider"></li>
+                                                        <li role="presentation"><a role="menuitem" tabindex="-1"
+                                                                                   href="https://twitter.com/fat">Separated
+                                                            link</a>
+                                                        </li>
+                                                    </ul>
+                                                </li>
+                                            </ul>
 
-                    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip left">Tooltip left</button>
+                                        </div>
+                                    </div>
+                                </div>
 
-                    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip top">Tooltip top</button>
+                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                    <div class="x_panel">
+                                        <div class="x_title">
+                                            <h2><i class="fa fa-square-o"></i> Modals</h2>
+                                            <ul class="nav navbar-right panel_toolbox">
+                                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
+                                                </li>
+                                                <li class="dropdown">
+                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
+                                                       role="button"
+                                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
+                                                    <ul class="dropdown-menu" role="menu">
+                                                        <li><a href="#">Settings 1</a>
+                                                        </li>
+                                                        <li><a href="#">Settings 2</a>
+                                                        </li>
+                                                    </ul>
+                                                </li>
+                                                <li><a class="close-link"><i class="fa fa-close"></i></a>
+                                                </li>
+                                            </ul>
+                                            <div class="clearfix"></div>
+                                        </div>
+                                        <div class="x_content">
 
-                    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip bottom">Tooltip bottom</button>
+                                            <!-- modals -->
+                                            <!-- Large modal -->
+                                            <button type="button" class="btn btn-primary" data-toggle="modal"
+                                                    data-target=".bs-example-modal-lg">Large modal
+                                            </button>
 
-                    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip right">Tooltip right</button>
+                                            <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
+                                                 aria-hidden="true">
+                                                <div class="modal-dialog modal-lg">
+                                                    <div class="modal-content">
 
-                  </div>
-                </div>
-              </div>
-            </div>
+                                                        <div class="modal-header">
+                                                            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
+                                                            <button type="button" class="close"
+                                                                    data-dismiss="modal"><span
+                                                                    aria-hidden="true">×</span>
+                                                            </button>
+                                                        </div>
+                                                        <div class="modal-body">
+                                                            <h4>Text in a modal</h4>
+                                                            <p>Praesent commodo cursus magna, vel scelerisque nisl
+                                                                consectetur et.
+                                                                Vivamus sagittis lacus vel augue laoreet rutrum faucibus
+                                                                dolor
+                                                                auctor.</p>
+                                                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent
+                                                                commodo
+                                                                cursus magna, vel scelerisque nisl consectetur et. Donec
+                                                                sed
+                                                                odio
+                                                                dui. Donec ullamcorper nulla non metus auctor
+                                                                fringilla.</p>
+                                                        </div>
+                                                        <div class="modal-footer">
+                                                            <button type="button" class="btn btn-light"
+                                                                    data-dismiss="modal">
+                                                                Close
+                                                            </button>
+                                                            <button type="button" class="btn btn-primary">Save changes
+                                                            </button>
+                                                        </div>
 
-            <div class="col-md-6 col-sm-6 col-xs-12">
-              <div class="x_panel">
-                <div class="x_title">
-                  <h2>Daily active users <small>Sessions</small></h2>
-                  <ul class="nav navbar-right panel_toolbox">
-                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
-                    </li>
-                    <li class="dropdown">
-                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
-                      <ul class="dropdown-menu" role="menu">
-                        <li><a href="#">Settings 1</a>
-                        </li>
-                        <li><a href="#">Settings 2</a>
-                        </li>
-                      </ul>
-                    </li>
-                    <li><a class="close-link"><i class="fa fa-close"></i></a>
-                    </li>
-                  </ul>
-                  <div class="clearfix"></div>
-                </div>
-                <div class="x_content">
-                  <ul class="list-unstyled timeline">
-                    <li>
-                      <div class="block">
-                        <div class="tags">
-                          <a href="" class="tag">
-                            <span>Entertainment</span>
-                          </a>
-                        </div>
-                        <div class="block_content">
-                          <h2 class="title">
-                                          <a>Who Needs Sundance When You’ve Got&nbsp;Crowdfunding?</a>
-                                      </h2>
-                          <div class="byline">
-                            <span>13 hours ago</span> by <a>Jane Smith</a>
-                          </div>
-                          <p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they’d pay to Fast-forward and… <a>Read&nbsp;More</a>
-                          </p>
-                        </div>
-                      </div>
-                    </li>
-                    <li>
-                      <div class="block">
-                        <div class="tags">
-                          <a href="" class="tag">
-                            <span>Entertainment</span>
-                          </a>
-                        </div>
-                        <div class="block_content">
-                          <h2 class="title">
-                                          <a>Who Needs Sundance When You’ve Got&nbsp;Crowdfunding?</a>
-                                      </h2>
-                          <div class="byline">
-                            <span>13 hours ago</span> by <a>Jane Smith</a>
-                          </div>
-                          <p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they’d pay to Fast-forward and… <a>Read&nbsp;More</a>
-                          </p>
-                        </div>
-                      </div>
-                    </li>
-                    <li>
-                      <div class="block">
-                        <div class="tags">
-                          <a href="" class="tag">
-                            <span>Entertainment</span>
-                          </a>
-                        </div>
-                        <div class="block_content">
-                          <h2 class="title">
-                                          <a>Who Needs Sundance When You’ve Got&nbsp;Crowdfunding?</a>
-                                      </h2>
-                          <div class="byline">
-                            <span>13 hours ago</span> by <a>Jane Smith</a>
-                          </div>
-                          <p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they’d pay to Fast-forward and… <a>Read&nbsp;More</a>
-                          </p>
-                        </div>
-                      </div>
-                    </li>
-                  </ul>
+                                                    </div>
+                                                </div>
+                                            </div>
 
-                </div>
-              </div>
-            </div>
+                                            <!-- Small modal -->
+                                            <button type="button" class="btn btn-primary" data-toggle="modal"
+                                                    data-target=".bs-example-modal-sm">Small modal
+                                            </button>
 
-            <div class="col-md-6 col-sm-6 col-xs-12">
-              <div class="x_panel">
-                <div class="x_title">
-                  <h2>Daily active users <small>Sessions</small></h2>
-                  <ul class="nav navbar-right panel_toolbox">
-                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
-                    </li>
-                    <li class="dropdown">
-                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
-                      <ul class="dropdown-menu" role="menu">
-                        <li><a href="#">Settings 1</a>
-                        </li>
-                        <li><a href="#">Settings 2</a>
-                        </li>
-                      </ul>
-                    </li>
-                    <li><a class="close-link"><i class="fa fa-close"></i></a>
-                    </li>
-                  </ul>
-                  <div class="clearfix"></div>
-                </div>
-                <div class="x_content">
+                                            <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog"
+                                                 aria-hidden="true">
+                                                <div class="modal-dialog modal-sm">
+                                                    <div class="modal-content">
 
-                  <div class="bs-example" data-example-id="simple-jumbotron">
-                    <div class="jumbotron">
-                      <h1>Hello, world!</h1>
-                      <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
-                    </div>
-                  </div>
+                                                        <div class="modal-header">
+                                                            <h4 class="modal-title" id="myModalLabel2">Modal title</h4>
+                                                            <button type="button" class="close" data-dismiss="modal"
+                                                                    aria-label="Close"><span aria-hidden="true">×</span>
+                                                            </button>
+                                                        </div>
+                                                        <div class="modal-body">
+                                                            <h4>Text in a modal</h4>
+                                                            <p>Praesent commodo cursus magna, vel scelerisque nisl
+                                                                consectetur et.
+                                                                Vivamus sagittis lacus vel augue laoreet rutrum faucibus
+                                                                dolor
+                                                                auctor.</p>
+                                                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent
+                                                                commodo
+                                                                cursus magna, vel scelerisque nisl consectetur et. Donec
+                                                                sed
+                                                                odio
+                                                                dui. Donec ullamcorper nulla non metus auctor
+                                                                fringilla.</p>
+                                                        </div>
+                                                        <div class="modal-footer">
+                                                            <button type="button" class="btn btn-light"
+                                                                    data-dismiss="modal">
+                                                                Close
+                                                            </button>
+                                                            <button type="button" class="btn btn-primary">Save changes
+                                                            </button>
+                                                        </div>
 
-                </div>
-              </div>
-            </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <!-- /modals -->
+                                        </div>
+                                    </div>
+                                </div>
 
-            <div class="col-md-6 col-sm-6 col-xs-12">
-              <div class="x_panel">
-                <div class="x_title">
-                  <h2><i class="fa fa-chevron-down"></i> Dropdowns <small>Multiple dropdown designs</small></h2>
-                  <ul class="nav navbar-right panel_toolbox">
-                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
-                    </li>
-                    <li class="dropdown">
-                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
-                      <ul class="dropdown-menu" role="menu">
-                        <li><a href="#">Settings 1</a>
-                        </li>
-                        <li><a href="#">Settings 2</a>
-                        </li>
-                      </ul>
-                    </li>
-                    <li><a class="close-link"><i class="fa fa-close"></i></a>
-                    </li>
-                  </ul>
-                  <div class="clearfix"></div>
-                </div>
-                <div class="x_content">
+                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                    <div class="x_panel">
+                                        <div class="x_title">
+                                            <h2><i class="fa fa-bell"></i> Notifications
+                                                <small>Styled & Custom notifications</small>
+                                            </h2>
+                                            <ul class="nav navbar-right panel_toolbox">
+                                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
+                                                </li>
+                                                <li class="dropdown">
+                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
+                                                       role="button"
+                                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
+                                                    <ul class="dropdown-menu" role="menu">
+                                                        <li><a href="#">Settings 1</a>
+                                                        </li>
+                                                        <li><a href="#">Settings 2</a>
+                                                        </li>
+                                                    </ul>
+                                                </li>
+                                                <li><a class="close-link"><i class="fa fa-close"></i></a>
+                                                </li>
+                                            </ul>
+                                            <div class="clearfix"></div>
+                                        </div>
+                                        <div class="x_content">
 
-                  <p>Gentelella provides you with several dropdown designs for your choosing.</p>
-                  <ul class="nav nav-pills" role="tablist">
-                    <li role="presentation"><a href="#">Regular link</a>
-                    </li>
-                    <li role="presentation" class="dropdown">
-                      <a id="drop4" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
-                                  Dropdown
-                                  <span class="caret"></span>
-                              </a>
-                      <ul id="menu6" class="dropdown-menu animated fadeInDown" role="menu">
-                        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a>
-                        </li>
-                        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a>
-                        </li>
-                        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a>
-                        </li>
-                        <li role="presentation" class="divider"></li>
-                        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a>
-                        </li>
-                      </ul>
-                    </li>
-                    <li role="presentation" class="dropdown">
-                      <a id="drop5" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
-                                  Dropdown
-                                  <span class="caret"></span>
-                              </a>
-                      <ul id="menu2" class="dropdown-menu animated fadeInDown" role="menu" aria-labelledby="drop5">
-                        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a>
-                        </li>
-                        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a>
-                        </li>
-                        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a>
-                        </li>
-                        <li role="presentation" class="divider"></li>
-                        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a>
-                        </li>
-                      </ul>
-                    </li>
-                    <li role="presentation" class="dropdown">
-                      <a id="drop6" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
-                                  Dropdown
-                                  <span class="caret"></span>
-                              </a>
-                      <ul id="menu3" class="dropdown-menu animated fadeInDown" role="menu" aria-labelledby="drop6">
-                        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a>
-                        </li>
-                        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a>
-                        </li>
-                        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a>
-                        </li>
-                        <li role="presentation" class="divider"></li>
-                        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a>
-                        </li>
-                      </ul>
-                    </li>
-                  </ul>
-
-                </div>
-              </div>
-            </div>
-
-            <div class="col-md-6 col-sm-6 col-xs-12">
-              <div class="x_panel">
-                <div class="x_title">
-                  <h2><i class="fa fa-square-o"></i> Modals</h2>
-                  <ul class="nav navbar-right panel_toolbox">
-                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
-                    </li>
-                    <li class="dropdown">
-                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
-                      <ul class="dropdown-menu" role="menu">
-                        <li><a href="#">Settings 1</a>
-                        </li>
-                        <li><a href="#">Settings 2</a>
-                        </li>
-                      </ul>
-                    </li>
-                    <li><a class="close-link"><i class="fa fa-close"></i></a>
-                    </li>
-                  </ul>
-                  <div class="clearfix"></div>
-                </div>
-                <div class="x_content">
-
-                  <!-- modals -->
-                  <!-- Large modal -->
-                  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
-
-                  <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
-                    <div class="modal-dialog modal-lg">
-                      <div class="modal-content">
-
-                        <div class="modal-header">
-                          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
-                          </button>
-                          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
-                        </div>
-                        <div class="modal-body">
-                          <h4>Text in a modal</h4>
-                          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
-                          <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
-                        </div>
-                        <div class="modal-footer">
-                          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-                          <button type="button" class="btn btn-primary">Save changes</button>
-                        </div>
-
-                      </div>
-                    </div>
-                  </div>
-
-                  <!-- Small modal -->
-                  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
-
-                  <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
-                    <div class="modal-dialog modal-sm">
-                      <div class="modal-content">
-
-                        <div class="modal-header">
-                          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
-                          </button>
-                          <h4 class="modal-title" id="myModalLabel2">Modal title</h4>
-                        </div>
-                        <div class="modal-body">
-                          <h4>Text in a modal</h4>
-                          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
-                          <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
-                        </div>
-                        <div class="modal-footer">
-                          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-                          <button type="button" class="btn btn-primary">Save changes</button>
-                        </div>
-
-                      </div>
-                    </div>
-                  </div>
-                  <!-- /modals -->
-                </div>
-              </div>
-            </div>
-
-
-
-            <div class="col-md-6 col-sm-6 col-xs-12">
-              <div class="x_panel">
-                <div class="x_title">
-                  <h2><i class="fa fa-bell"></i> Notifications <small>Styled & Custom notifications</small></h2>
-                  <ul class="nav navbar-right panel_toolbox">
-                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
-                    </li>
-                    <li class="dropdown">
-                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
-                      <ul class="dropdown-menu" role="menu">
-                        <li><a href="#">Settings 1</a>
-                        </li>
-                        <li><a href="#">Settings 2</a>
-                        </li>
-                      </ul>
-                    </li>
-                    <li><a class="close-link"><i class="fa fa-close"></i></a>
-                    </li>
-                  </ul>
-                  <div class="clearfix"></div>
-                </div>
-                <div class="x_content">
-
-                  <p>Regular notifications</p>
-                  <button class="btn btn-default source" onclick="new PNotify({
+                                            <p>Regular notifications</p>
+                                            <button class="btn btn-light source" onclick="new PNotify({
                                   title: 'Regular Success',
                                   text: 'That thing that you were trying to do worked!',
                                   type: 'success',
                                   styling: 'bootstrap3'
-                              });">Success</button>
+                              });">Success
+                                            </button>
 
-                  <button class="btn btn-default source" onclick="new PNotify({
+                                            <button class="btn btn-light source" onclick="new PNotify({
                                   title: 'New Thing',
                                   text: 'Just to let you know, something happened.',
                                   type: 'info',
                                   styling: 'bootstrap3'
-                              });">Info</button>
+                              });">Info
+                                            </button>
 
-                  <button class="btn btn-default source" onclick="new PNotify({
+                                            <button class="btn btn-light source" onclick="new PNotify({
                                   title: 'Regular Notice',
                                   text: 'Check me out! I\'m a notice.',
                                   styling: 'bootstrap3'
-                              });">Notice</button>
+                              });">Notice
+                                            </button>
 
-                  <button class="btn btn-default source" onclick="new PNotify({
+                                            <button class="btn btn-light source" onclick="new PNotify({
                                   title: 'Oh No!',
                                   text: 'Something terrible happened.',
                                   type: 'error',
                                   styling: 'bootstrap3'
-                              });">Error</button>
+                              });">Error
+                                            </button>
 
-                  <button class="btn btn-default source" onclick="new PNotify({
+                                            <button class="btn btn-light source" onclick="new PNotify({
                                   title: 'Oh No!',
                                   text: 'Something terrible happened.',
                                   type: 'info',
                                   styling: 'bootstrap3',
                                   addclass: 'dark'
-                              });">Dark</button>
+                              });">Dark
+                                            </button>
 
-                  <hr />
+                                            <hr/>
 
-                  <p>Sticky notifications.. these wont close unless user closes them.</p>
-                  <button class="btn btn-default source" onclick="new PNotify({
+                                            <p>Sticky notifications.. these wont close unless user closes them.</p>
+                                            <button class="btn btn-light source" onclick="new PNotify({
                                   title: 'Sticky Success',
                                   text: 'Sticky success... I\'m not even gonna make a joke.',
                                   type: 'success',
                                   hide: false,
                                   styling: 'bootstrap3'
-                              });">Success</button>
+                              });">Success
+                                            </button>
 
 
-                  <button class="btn btn-default source" onclick="new PNotify({
+                                            <button class="btn btn-light source" onclick="new PNotify({
                                   title: 'Sticky Info',
                                   text: 'Sticky Info... I\'m not even gonna make a joke.',
                                   type: 'info',
                                   hide: false,
                                   styling: 'bootstrap3'
-                              });">Info</button>
+                              });">Info
+                                            </button>
 
 
-                  <button class="btn btn-default source" onclick="new PNotify({
+                                            <button class="btn btn-light source" onclick="new PNotify({
                                   title: 'Sticky Warning',
                                   text: 'Sticky Warning... I\'m not even gonna make a joke.',
                                   hide: false,
                                   styling: 'bootstrap3'
-                              });">Warning</button>
+                              });">Warning
+                                            </button>
 
 
-                  <button class="btn btn-default source" onclick="new PNotify({
+                                            <button class="btn btn-light source" onclick="new PNotify({
                                   title: 'Sticky Danger',
                                   text: 'Sticky Danger... I\'m not even gonna make a joke.',
                                   type: 'error',
                                   hide: false,
                                   styling: 'bootstrap3'
-                              });">Error</button>
+                              });">Error
+                                            </button>
 
 
-                  <button class="btn btn-default source" onclick="new PNotify({
+                                            <button class="btn btn-light source" onclick="new PNotify({
                                   title: 'Sticky Success',
                                   text: 'Sticky success... I\'m not even gonna make a joke.',
                                   type: 'info',
                                   hide: false,
                                   styling: 'bootstrap3',
                                   addclass: 'dark'
-                              });">Dark</button>
+                              });">Dark
+                                            </button>
 
-                  <hr/>
+                                            <hr/>
 
-                  <button class="btn btn-default source" onclick="new PNotify({
+                                            <button class="btn btn-light source" onclick="new PNotify({
                                   title: 'Non-Blocking Notice',
                                   type: 'info',
                                   text: 'When you hover over me I\'ll fade to show the elements underneath. Feel free to click any of them just like I wasn\'t even here.',
@@ -1208,455 +1619,549 @@
                                   },
                                   styling: 'bootstrap3',
                                   addclass: 'dark'
-                              });">Non-Blocking Notice</button>
+                              });">Non-Blocking Notice
+                                            </button>
 
-                  <hr />
+                                            <hr/>
 
-                  <div id="antoox">
-                    <div>
-                      <div></div>
-                      <div></div>
-                      <div></div>
-                    </div>
+                                            <div id="antoox">
+                                                <div>
+                                                    <div></div>
+                                                    <div></div>
+                                                    <div></div>
+                                                </div>
 
-                  </div>
+                                            </div>
 
-                  <button class="btn btn-default source" onclick="new TabbedNotification({
+                                            <button class="btn btn-light source" onclick="new TabbedNotification({
                                   title: 'Tabbed Notificat',
                                   text: 'Sticky success... Raw denim you probably haven\'t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. ',
                                   type: 'success',
                                   sound: false
-                              })">Success</button>
+                              })">Success
+                                            </button>
 
-                  <button class="btn btn-default source" onclick="new TabbedNotification({
+                                            <button class="btn btn-light source" onclick="new TabbedNotification({
                                   title: 'Tabbed Notificat',
                                   text: 'Custom Info... Raw denim you probably haven\'t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.',
                                   type: 'info',
                                   sound: false
-                              })">Info</button>
+                              })">Info
+                                            </button>
 
-                  <button class="btn btn-default source" onclick="new TabbedNotification({
+                                            <button class="btn btn-light source" onclick="new TabbedNotification({
                                   title: 'Tabbed Notificat',
                                   text: 'Custom Warning... Raw denim you probably haven\'t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. ',
                                   type: 'warning',
                                   sound: false
-                              })">Warning</button>
+                              })">Warning
+                                            </button>
 
-                  <button class="btn btn-default source" onclick="new TabbedNotification({
+                                            <button class="btn btn-light source" onclick="new TabbedNotification({
                                   title: 'Custom Notification error',
                                   text: 'Custom Error... Raw denim you probably haven\'t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. ',
                                   type: 'error',
                                   sound: false
-                              })">Error</button>
+                              })">Error
+                                            </button>
 
-                  <button class="btn btn-default source" onclick="new TabbedNotification({
+                                            <button class="btn btn-light source" onclick="new TabbedNotification({
                                   title: 'Tabbed notification dark',
                                   text: 'Custom Dark... Raw denim you probably haven\'t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. ',
                                   type: 'dark',
                                   sound: false
-                              })">Dark</button>
+                              })">Dark
+                                            </button>
 
 
-                </div>
-              </div>
-            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="col-md-6">
+                                    <div class="x_panel">
+                                        <div class="x_title">
+                                            <h2>Pop Overs
+                                                <small>Sessions</small>
+                                            </h2>
+                                            <ul class="nav navbar-right panel_toolbox">
+                                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
+                                                </li>
+                                                <li class="dropdown">
+                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
+                                                       role="button"
+                                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
+                                                    <ul class="dropdown-menu" role="menu">
+                                                        <li><a href="#">Settings 1</a>
+                                                        </li>
+                                                        <li><a href="#">Settings 2</a>
+                                                        </li>
+                                                    </ul>
+                                                </li>
+                                                <li><a class="close-link"><i class="fa fa-close"></i></a>
+                                                </li>
+                                            </ul>
+                                            <div class="clearfix"></div>
+                                        </div>
+                                        <div class="x_content bs-example-popovers">
+
+                                            <div class="alert alert-success alert-dismissible fade in" role="alert">
+                                                <button type="button" class="close" data-dismiss="alert"
+                                                        aria-label="Close"><span
+                                                        aria-hidden="true">×</span>
+                                                </button>
+                                                <strong>Holy guacamole!</strong> Best check yo self, you're not looking
+                                                too
+                                                good.
+                                            </div>
+                                            <div class="alert alert-info alert-dismissible fade in" role="alert">
+                                                <button type="button" class="close" data-dismiss="alert"
+                                                        aria-label="Close"><span
+                                                        aria-hidden="true">×</span>
+                                                </button>
+                                                <strong>Holy guacamole!</strong> Best check yo self, you're not looking
+                                                too
+                                                good.
+                                            </div>
+                                            <div class="alert alert-warning alert-dismissible fade in" role="alert">
+                                                <button type="button" class="close" data-dismiss="alert"
+                                                        aria-label="Close"><span
+                                                        aria-hidden="true">×</span>
+                                                </button>
+                                                <strong>Holy guacamole!</strong> Best check yo self, you're not looking
+                                                too
+                                                good.
+                                            </div>
+                                            <div class="alert alert-danger alert-dismissible fade in" role="alert">
+                                                <button type="button" class="close" data-dismiss="alert"
+                                                        aria-label="Close"><span
+                                                        aria-hidden="true">×</span>
+                                                </button>
+                                                <strong>Holy guacamole!</strong> Best check yo self, you're not looking
+                                                too
+                                                good.
+                                            </div>
+
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="col-md-6">
+                                    <div class="x_panel">
+                                        <div class="x_title">
+                                            <h2><i class="fa fa-align-left"></i> Progress bar
+                                                <small>Sessions</small>
+                                            </h2>
+                                            <ul class="nav navbar-right panel_toolbox">
+                                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
+                                                </li>
+                                                <li class="dropdown">
+                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
+                                                       role="button"
+                                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
+                                                    <ul class="dropdown-menu" role="menu">
+                                                        <li><a href="#">Settings 1</a>
+                                                        </li>
+                                                        <li><a href="#">Settings 2</a>
+                                                        </li>
+                                                    </ul>
+                                                </li>
+                                                <li><a class="close-link"><i class="fa fa-close"></i></a>
+                                                </li>
+                                            </ul>
+                                            <div class="clearfix"></div>
+                                        </div>
+                                        <div class="x_content">
+
+                                            <p>Bootstrap progress bar with animated loading bar, add right to .progress
+                                                to
+                                                align
+                                                right</p>
+                                            <div class="row">
+                                                <div class="col-md-6">
+                                                    <div class="progress right">
+                                                        <div class="progress-bar progress-bar-danger"
+                                                             data-transitiongoal="25"></div>
+                                                    </div>
+                                                    <div class="progress right">
+                                                        <div class="progress-bar progress-bar-warning"
+                                                             data-transitiongoal="45"></div>
+                                                    </div>
+                                                    <div class="progress right">
+                                                        <div class="progress-bar progress-bar-info"
+                                                             data-transitiongoal="65"></div>
+                                                    </div>
+                                                    <div class="progress right">
+                                                        <div class="progress-bar progress-bar-success"
+                                                             data-transitiongoal="95"></div>
+                                                    </div>
+                                                </div>
+                                                <div class="col-md-6">
+                                                    <div class="progress">
+                                                        <div class="progress-bar progress-bar-danger"
+                                                             data-transitiongoal="25"></div>
+                                                    </div>
+                                                    <div class="progress">
+                                                        <div class="progress-bar progress-bar-warning"
+                                                             data-transitiongoal="45"></div>
+                                                    </div>
+                                                    <div class="progress">
+                                                        <div class="progress-bar progress-bar-info"
+                                                             data-transitiongoal="65"></div>
+                                                    </div>
+                                                    <div class="progress">
+                                                        <div class="progress-bar progress-bar-success"
+                                                             data-transitiongoal="95"></div>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                            <div class="row">
+                                                <div class="col-md-6 col-sm-12">
+                                                    <ul class="verticle_bars list-inline">
+                                                        <li>
+                                                            <div class="progress progress-striped vertical progress_wide bottom">
+                                                                <div class="progress-bar progress-bar-danger"
+                                                                     role="progressbar"
+                                                                     data-transitiongoal="25"></div>
+                                                            </div>
+                                                        </li>
+                                                        <li>
+                                                            <div class="progress progress-striped vertical progress_wide bottom">
+                                                                <div class="progress-bar progress-bar-warning"
+                                                                     role="progressbar"
+                                                                     data-transitiongoal="45"></div>
+                                                            </div>
+                                                        </li>
+                                                        <li>
+                                                            <div class="progress vertical progress_wide bottom">
+                                                                <div class="progress-bar progress-bar-info"
+                                                                     role="progressbar"
+                                                                     data-transitiongoal="65"></div>
+                                                            </div>
+                                                        </li>
+                                                        <li>
+                                                            <div class="progress vertical progress_wide bottom">
+                                                                <div class="progress-bar  progress-bar-success"
+                                                                     role="progressbar"
+                                                                     data-transitiongoal="85"></div>
+                                                            </div>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                                <div class="col-md-6 col-sm-12 fixed_height_200">
+                                                    <ul class="verticle_bars list-inline">
+                                                        <li>
+                                                            <div class="progress vertical bottom">
+                                                                <div class="progress-bar  progress-bar-success"
+                                                                     role="progressbar"
+                                                                     data-transitiongoal="85"></div>
+                                                            </div>
+                                                        </li>
+                                                        <li>
+                                                            <div class="progress vertical bottom">
+                                                                <div class="progress-bar progress-bar-info"
+                                                                     role="progressbar"
+                                                                     data-transitiongoal="65"></div>
+                                                            </div>
+                                                        </li>
+                                                        <li>
+                                                            <div class="progress vertical bottom">
+                                                                <div class="progress-bar progress-bar-warning"
+                                                                     role="progressbar"
+                                                                     data-transitiongoal="45"></div>
+                                                            </div>
+                                                        </li>
+                                                        <li>
+                                                            <div class="progress vertical bottom">
+                                                                <div class="progress-bar progress-bar-danger"
+                                                                     role="progressbar"
+                                                                     data-transitiongoal="25"></div>
+                                                            </div>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+                                            <div class="row">
+                                                <div class="col-md-6 col-sm-12">
+                                                    <ul class="verticle_bars list-inline">
+                                                        <li>
+                                                            <div class="progress vertical progress_wide">
+                                                                <div class="progress-bar progress-bar-danger progress-bar-striped"
+                                                                     role="progressbar" data-transitiongoal="25"></div>
+                                                            </div>
+                                                        </li>
+                                                        <li>
+                                                            <div class="progress vertical progress_wide">
+                                                                <div class="progress-bar progress-bar-warning progress-bar-striped"
+                                                                     role="progressbar" data-transitiongoal="45"></div>
+                                                            </div>
+                                                        </li>
+                                                        <li>
+                                                            <div class="progress vertical progress_wide">
+                                                                <div class="progress-bar progress-bar-info"
+                                                                     role="progressbar"
+                                                                     data-transitiongoal="65"></div>
+                                                            </div>
+                                                        </li>
+                                                        <li>
+                                                            <div class="progress vertical progress_wide">
+                                                                <div class="progress-bar  progress-bar-success"
+                                                                     role="progressbar"
+                                                                     data-transitiongoal="85"></div>
+                                                            </div>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                                <div class="col-md-6 col-sm-12 fixed_height_200">
+                                                    <ul class="verticle_bars list-inline">
+                                                        <li>
+                                                            <div class="progress vertical">
+                                                                <div class="progress-bar  progress-bar-success"
+                                                                     role="progressbar"
+                                                                     data-transitiongoal="85"></div>
+                                                            </div>
+                                                        </li>
+                                                        <li>
+                                                            <div class="progress vertical">
+                                                                <div class="progress-bar progress-bar-info"
+                                                                     role="progressbar"
+                                                                     data-transitiongoal="65"></div>
+                                                            </div>
+                                                        </li>
+                                                        <li>
+                                                            <div class="progress vertical">
+                                                                <div class="progress-bar progress-bar-warning"
+                                                                     role="progressbar"
+                                                                     data-transitiongoal="45"></div>
+                                                            </div>
+                                                        </li>
+                                                        <li>
+                                                            <div class="progress vertical">
+                                                                <div class="progress-bar progress-bar-danger"
+                                                                     role="progressbar"
+                                                                     data-transitiongoal="25"></div>
+                                                            </div>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
 
 
-            <div class="col-md-6">
-              <div class="x_panel">
-                <div class="x_title">
-                  <h2>Pop Overs <small>Sessions</small></h2>
-                  <ul class="nav navbar-right panel_toolbox">
-                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
-                    </li>
-                    <li class="dropdown">
-                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
-                      <ul class="dropdown-menu" role="menu">
-                        <li><a href="#">Settings 1</a>
-                        </li>
-                        <li><a href="#">Settings 2</a>
-                        </li>
-                      </ul>
-                    </li>
-                    <li><a class="close-link"><i class="fa fa-close"></i></a>
-                    </li>
-                  </ul>
-                  <div class="clearfix"></div>
-                </div>
-                <div class="x_content bs-example-popovers">
+                                        </div>
+                                    </div>
+                                </div>
 
-                  <div class="alert alert-success alert-dismissible fade in" role="alert">
-                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span>
-                    </button>
-                    <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
-                  </div>
-                  <div class="alert alert-info alert-dismissible fade in" role="alert">
-                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span>
-                    </button>
-                    <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
-                  </div>
-                  <div class="alert alert-warning alert-dismissible fade in" role="alert">
-                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span>
-                    </button>
-                    <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
-                  </div>
-                  <div class="alert alert-danger alert-dismissible fade in" role="alert">
-                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span>
-                    </button>
-                    <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
-                  </div>
+                                <!-- Start to do list -->
+                                <div class="col-md-6 col-sm-6 col-xs-12">
+                                    <div class="x_panel">
+                                        <div class="x_title">
+                                            <h2>To Do List
+                                                <small>Sample tasks</small>
+                                            </h2>
+                                            <ul class="nav navbar-right panel_toolbox">
+                                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
+                                                </li>
+                                                <li class="dropdown">
+                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
+                                                       role="button"
+                                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
+                                                    <ul class="dropdown-menu" role="menu">
+                                                        <li><a href="#">Settings 1</a>
+                                                        </li>
+                                                        <li><a href="#">Settings 2</a>
+                                                        </li>
+                                                    </ul>
+                                                </li>
+                                                <li><a class="close-link"><i class="fa fa-close"></i></a>
+                                                </li>
+                                            </ul>
+                                            <div class="clearfix"></div>
+                                        </div>
+                                        <div class="x_content">
 
-                </div>
-              </div>
-            </div>
+                                            <div class="">
+                                                <ul class="to_do">
+                                                    <li>
+                                                        <p>
+                                                            <input type="checkbox" class="flat"> Schedule meeting with
+                                                            new
+                                                            client
+                                                        </p>
+                                                    </li>
+                                                    <li>
+                                                        <p>
+                                                            <input type="checkbox" class="flat"> Create email address
+                                                            for
+                                                            new intern
+                                                        </p>
+                                                    </li>
+                                                    <li>
+                                                        <p>
+                                                            <input type="checkbox" class="flat"> Have IT fix the network
+                                                            printer</p>
+                                                    </li>
+                                                    <li>
+                                                        <p>
+                                                            <input type="checkbox" class="flat"> Copy backups to offsite
+                                                            location
+                                                        </p>
+                                                    </li>
+                                                    <li>
+                                                        <p>
+                                                            <input type="checkbox" class="flat"> Food truck fixie
+                                                            locavors
+                                                            mcsweeney
+                                                        </p>
+                                                    </li>
+                                                    <li>
+                                                        <p>
+                                                            <input type="checkbox" class="flat"> Food truck fixie
+                                                            locavors
+                                                            mcsweeney
+                                                        </p>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- End to do list -->
 
-
-
-            <div class="col-md-6">
-              <div class="x_panel">
-                <div class="x_title">
-                  <h2><i class="fa fa-align-left"></i> Progress bar<small>Sessions</small></h2>
-                  <ul class="nav navbar-right panel_toolbox">
-                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
-                    </li>
-                    <li class="dropdown">
-                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
-                      <ul class="dropdown-menu" role="menu">
-                        <li><a href="#">Settings 1</a>
-                        </li>
-                        <li><a href="#">Settings 2</a>
-                        </li>
-                      </ul>
-                    </li>
-                    <li><a class="close-link"><i class="fa fa-close"></i></a>
-                    </li>
-                  </ul>
-                  <div class="clearfix"></div>
-                </div>
-                <div class="x_content">
-
-                  <p>Bootstrap progress bar with animated loading bar, add right to .progress to align right</p>
-                  <div class="row">
-                    <div class="col-md-6">
-                      <div class="progress right">
-                        <div class="progress-bar progress-bar-danger" data-transitiongoal="25"></div>
-                      </div>
-                      <div class="progress right">
-                        <div class="progress-bar progress-bar-warning" data-transitiongoal="45"></div>
-                      </div>
-                      <div class="progress right">
-                        <div class="progress-bar progress-bar-info" data-transitiongoal="65"></div>
-                      </div>
-                      <div class="progress right">
-                        <div class="progress-bar progress-bar-success" data-transitiongoal="95"></div>
-                      </div>
-                    </div>
-                    <div class="col-md-6">
-                      <div class="progress">
-                        <div class="progress-bar progress-bar-danger" data-transitiongoal="25"></div>
-                      </div>
-                      <div class="progress">
-                        <div class="progress-bar progress-bar-warning" data-transitiongoal="45"></div>
-                      </div>
-                      <div class="progress">
-                        <div class="progress-bar progress-bar-info" data-transitiongoal="65"></div>
-                      </div>
-                      <div class="progress">
-                        <div class="progress-bar progress-bar-success" data-transitiongoal="95"></div>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div class="row">
-                    <div class="col-md-6 col-sm-12">
-                      <ul class="verticle_bars list-inline">
-                        <li>
-                          <div class="progress progress-striped vertical progress_wide bottom">
-                            <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="25"></div>
-                          </div>
-                        </li>
-                        <li>
-                          <div class="progress progress-striped vertical progress_wide bottom">
-                            <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="45"></div>
-                          </div>
-                        </li>
-                        <li>
-                          <div class="progress vertical progress_wide bottom">
-                            <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="65"></div>
-                          </div>
-                        </li>
-                        <li>
-                          <div class="progress vertical progress_wide bottom">
-                            <div class="progress-bar  progress-bar-success" role="progressbar" data-transitiongoal="85"></div>
-                          </div>
-                        </li>
-                      </ul>
-                    </div>
-                    <div class="col-md-6 col-sm-12 fixed_height_200">
-                      <ul class="verticle_bars list-inline">
-                        <li>
-                          <div class="progress vertical bottom">
-                            <div class="progress-bar  progress-bar-success" role="progressbar" data-transitiongoal="85"></div>
-                          </div>
-                        </li>
-                        <li>
-                          <div class="progress vertical bottom">
-                            <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="65"></div>
-                          </div>
-                        </li>
-                        <li>
-                          <div class="progress vertical bottom">
-                            <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="45"></div>
-                          </div>
-                        </li>
-                        <li>
-                          <div class="progress vertical bottom">
-                            <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="25"></div>
-                          </div>
-                        </li>
-                      </ul>
-                    </div>
-                  </div>
-                  <div class="row">
-                    <div class="col-md-6 col-sm-12">
-                      <ul class="verticle_bars list-inline">
-                        <li>
-                          <div class="progress vertical progress_wide">
-                            <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" data-transitiongoal="25"></div>
-                          </div>
-                        </li>
-                        <li>
-                          <div class="progress vertical progress_wide">
-                            <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" data-transitiongoal="45"></div>
-                          </div>
-                        </li>
-                        <li>
-                          <div class="progress vertical progress_wide">
-                            <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="65"></div>
-                          </div>
-                        </li>
-                        <li>
-                          <div class="progress vertical progress_wide">
-                            <div class="progress-bar  progress-bar-success" role="progressbar" data-transitiongoal="85"></div>
-                          </div>
-                        </li>
-                      </ul>
-                    </div>
-                    <div class="col-md-6 col-sm-12 fixed_height_200">
-                      <ul class="verticle_bars list-inline">
-                        <li>
-                          <div class="progress vertical">
-                            <div class="progress-bar  progress-bar-success" role="progressbar" data-transitiongoal="85"></div>
-                          </div>
-                        </li>
-                        <li>
-                          <div class="progress vertical">
-                            <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="65"></div>
-                          </div>
-                        </li>
-                        <li>
-                          <div class="progress vertical">
-                            <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="45"></div>
-                          </div>
-                        </li>
-                        <li>
-                          <div class="progress vertical">
-                            <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="25"></div>
-                          </div>
-                        </li>
-                      </ul>
-                    </div>
-                  </div>
-
-
-
-                </div>
-              </div>
-            </div>
-
-            <!-- Start to do list -->
-            <div class="col-md-6 col-sm-6 col-xs-12">
-              <div class="x_panel">
-                <div class="x_title">
-                  <h2>To Do List <small>Sample tasks</small></h2>
-                  <ul class="nav navbar-right panel_toolbox">
-                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
-                    </li>
-                    <li class="dropdown">
-                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
-                      <ul class="dropdown-menu" role="menu">
-                        <li><a href="#">Settings 1</a>
-                        </li>
-                        <li><a href="#">Settings 2</a>
-                        </li>
-                      </ul>
-                    </li>
-                    <li><a class="close-link"><i class="fa fa-close"></i></a>
-                    </li>
-                  </ul>
-                  <div class="clearfix"></div>
-                </div>
-                <div class="x_content">
-
-                  <div class="">
-                    <ul class="to_do">
-                      <li>
-                        <p>
-                          <input type="checkbox" class="flat"> Schedule meeting with new client </p>
-                      </li>
-                      <li>
-                        <p>
-                          <input type="checkbox" class="flat"> Create email address for new intern</p>
-                      </li>
-                      <li>
-                        <p>
-                          <input type="checkbox" class="flat"> Have IT fix the network printer</p>
-                      </li>
-                      <li>
-                        <p>
-                          <input type="checkbox" class="flat"> Copy backups to offsite location</p>
-                      </li>
-                      <li>
-                        <p>
-                          <input type="checkbox" class="flat"> Food truck fixie locavors mcsweeney</p>
-                      </li>
-                      <li>
-                        <p>
-                          <input type="checkbox" class="flat"> Food truck fixie locavors mcsweeney</p>
-                      </li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <!-- End to do list -->
-
-
-            <div class="col-md-6">
-              <div class="x_panel">
-                <div class="x_title">
-                  <h2>Daily active users <small>Sessions</small></h2>
-                  <ul class="nav navbar-right panel_toolbox">
-                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
-                    </li>
-                    <li class="dropdown">
-                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
-                      <ul class="dropdown-menu" role="menu">
-                        <li><a href="#">Settings 1</a>
-                        </li>
-                        <li><a href="#">Settings 2</a>
-                        </li>
-                      </ul>
-                    </li>
-                    <li><a class="close-link"><i class="fa fa-close"></i></a>
-                    </li>
-                  </ul>
-                  <div class="clearfix"></div>
-                </div>
-                <div class="x_content">
-                  <ul class="list-unstyled msg_list">
-                    <li>
-                      <a>
+                                <div class="col-md-6">
+                                    <div class="x_panel">
+                                        <div class="x_title">
+                                            <h2>Daily active users
+                                                <small>Sessions</small>
+                                            </h2>
+                                            <ul class="nav navbar-right panel_toolbox">
+                                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
+                                                </li>
+                                                <li class="dropdown">
+                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
+                                                       role="button"
+                                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
+                                                    <ul class="dropdown-menu" role="menu">
+                                                        <li><a href="#">Settings 1</a>
+                                                        </li>
+                                                        <li><a href="#">Settings 2</a>
+                                                        </li>
+                                                    </ul>
+                                                </li>
+                                                <li><a class="close-link"><i class="fa fa-close"></i></a>
+                                                </li>
+                                            </ul>
+                                            <div class="clearfix"></div>
+                                        </div>
+                                        <div class="x_content">
+                                            <ul class="list-unstyled msg_list">
+                                                <li>
+                                                    <a>
                         <span class="image">
-                          <img src="images/img.jpg" alt="img" />
+                          <img src="images/img.jpg" alt="img"/>
                         </span>
-                        <span>
+                                                        <span>
                           <span>John Smith</span>
                           <span class="time">3 mins ago</span>
                         </span>
-                        <span class="message">
+                                                        <span class="message">
                           Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that
                         </span>
-                      </a>
-                    </li>
-                    <li>
-                      <a>
+                                                    </a>
+                                                </li>
+                                                <li>
+                                                    <a>
                         <span class="image">
-                          <img src="images/img.jpg" alt="img" />
+                          <img src="images/img.jpg" alt="img"/>
                         </span>
-                        <span>
+                                                        <span>
                           <span>John Smith</span>
                           <span class="time">3 mins ago</span>
                         </span>
-                        <span class="message">
+                                                        <span class="message">
                           Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that
                         </span>
-                      </a>
-                    </li>
-                    <li>
-                      <a>
+                                                    </a>
+                                                </li>
+                                                <li>
+                                                    <a>
                         <span class="image">
-                          <img src="images/img.jpg" alt="img" />
+                          <img src="images/img.jpg" alt="img"/>
                         </span>
-                        <span>
+                                                        <span>
                           <span>John Smith</span>
                           <span class="time">3 mins ago</span>
                         </span>
-                        <span class="message">
+                                                        <span class="message">
                           Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that
                         </span>
-                      </a>
-                    </li>
-                    <li>
-                      <a>
+                                                    </a>
+                                                </li>
+                                                <li>
+                                                    <a>
                         <span class="image">
-                          <img src="images/img.jpg" alt="img" />
+                          <img src="images/img.jpg" alt="img"/>
                         </span>
-                        <span>
+                                                        <span>
                           <span>John Smith</span>
                           <span class="time">3 mins ago</span>
                         </span>
-                        <span class="message">
+                                                        <span class="message">
                           Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that
                         </span>
-                      </a>
-                    </li>
-                  </ul>
+                                                    </a>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- /page content -->
+
+                    <!-- footer content -->
+                    <footer class="col-lg-12">
+                        <div class="pull-right">
+                            Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
+                        </div>
+                        <div class="clearfix"></div>
+                    </footer>
+                    <!-- /footer content -->
                 </div>
-              </div>
             </div>
-          </div>
-          <div class="clearfix"></div>
         </div>
-        <!-- /page content -->
-
-        <!-- footer content -->
-        <footer>
-          <div class="pull-right">
-            Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
-          </div>
-          <div class="clearfix"></div>
-        </footer>
-        <!-- /footer content -->
-      </div>
     </div>
+</div>
 
-    <div id="custom_notifications" class="custom-notifications dsp_none">
-      <ul class="list-unstyled notifications clearfix" data-tabbed_notifications="notif-group">
-      </ul>
-      <div class="clearfix"></div>
-      <div id="notif-group" class="tabbed_notifications"></div>
-    </div>
+<div id="custom_notifications" class="custom-notifications dsp_none">
+    <ul class="list-unstyled notifications clearfix" data-tabbed_notifications="notif-group">
+    </ul>
+    <div class="clearfix"></div>
+    <div id="notif-group" class="tabbed_notifications"></div>
+</div>
 
-    <!-- jQuery -->
-    <script src="../vendors/jquery/dist/jquery.min.js"></script>
-    <!-- Bootstrap -->
-    <script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
-    <!-- FastClick -->
-    <script src="../vendors/fastclick/lib/fastclick.js"></script>
-    <!-- NProgress -->
-    <script src="../vendors/nprogress/nprogress.js"></script>
-    <!-- bootstrap-progressbar -->
-    <script src="../vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
-    <!-- iCheck -->
-    <script src="../vendors/iCheck/icheck.min.js"></script>
-    <!-- PNotify -->
-    <script src="../vendors/pnotify/dist/pnotify.js"></script>
-    <script src="../vendors/pnotify/dist/pnotify.buttons.js"></script>
-    <script src="../vendors/pnotify/dist/pnotify.nonblock.js"></script>
+<!-- jQuery -->
+<script src="../vendors/jquery/dist/jquery.min.js"></script>
+<!-- Popper -->
+<script src="../vendors/popper/popper.min.js"></script>
+<!-- Bootstrap -->
+<script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
+<!-- FastClick -->
+<script src="../vendors/fastclick/lib/fastclick.js"></script>
+<!-- NProgress -->
+<script src="../vendors/nprogress/nprogress.js"></script>
+<!-- bootstrap-progressbar -->
+<script src="../vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
+<!-- iCheck -->
+<script src="../vendors/iCheck/icheck.min.js"></script>
+<!-- PNotify -->
+<script src="../vendors/pnotify/dist/pnotify.js"></script>
+<script src="../vendors/pnotify/dist/pnotify.buttons.js"></script>
+<script src="../vendors/pnotify/dist/pnotify.nonblock.js"></script>
 
-    <!-- Custom Theme Scripts -->
-    <script src="../build/js/custom.min.js"></script>
-	
-  </body>
+<!-- Custom Theme Scripts -->
+<script src="../build/js/custom.js"></script>
+
+</body>
 </html>
\ No newline at end of file