src/ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/pages/UI/buttons.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta charset="utf-8">
   5   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   6   <title>AdminLTE 2 | Buttons</title>
   7   <!-- Tell the browser to be responsive to screen width -->
   8   <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
   9   <!-- Bootstrap 3.3.6 -->
  10   <link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
  11   <!-- Font Awesome -->
  12   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  13   <!-- Ionicons -->
  14   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
  15   <!-- Theme style -->
  16   <link rel="stylesheet" href="../../dist/css/AdminLTE.min.css">
  17   <!-- AdminLTE Skins. Choose a skin from the css/skins
  18        folder instead of downloading all of them to reduce the load. -->
  19   <link rel="stylesheet" href="../../dist/css/skins/_all-skins.min.css">
  20
  21   <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  22   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  23   <!--[if lt IE 9]>
  24   <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  25   <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  26   <![endif]-->
  27 </head>
  28 <body class="hold-transition skin-blue sidebar-mini">
  29 <div class="wrapper">
  30
  31   <header class="main-header">
  32     <!-- Logo -->
  33     <a href="../../index2.html" class="logo">
  34       <!-- mini logo for sidebar mini 50x50 pixels -->
  35       <span class="logo-mini"><b>A</b>LT</span>
  36       <!-- logo for regular state and mobile devices -->
  37       <span class="logo-lg"><b>Admin</b>LTE</span>
  38     </a>
  39     <!-- Header Navbar: style can be found in header.less -->
  40     <nav class="navbar navbar-static-top">
  41       <!-- Sidebar toggle button-->
  42       <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
  43         <span class="sr-only">Toggle navigation</span>
  44         <span class="icon-bar"></span>
  45         <span class="icon-bar"></span>
  46         <span class="icon-bar"></span>
  47       </a>
  48
  49       <div class="navbar-custom-menu">
  50         <ul class="nav navbar-nav">
  51           <!-- Messages: style can be found in dropdown.less-->
  52           <li class="dropdown messages-menu">
  53             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  54               <i class="fa fa-envelope-o"></i>
  55               <span class="label label-success">4</span>
  56             </a>
  57             <ul class="dropdown-menu">
  58               <li class="header">You have 4 messages</li>
  59               <li>
  60                 <!-- inner menu: contains the actual data -->
  61                 <ul class="menu">
  62                   <li><!-- start message -->
  63                     <a href="#">
  64                       <div class="pull-left">
  65                         <img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
  66                       </div>
  67                       <h4>
  68                         Support Team
  69                         <small><i class="fa fa-clock-o"></i> 5 mins</small>
  70                       </h4>
  71                       <p>Why not buy a new awesome theme?</p>
  72                     </a>
  73                   </li>
  74                   <!-- end message -->
  75                   <li>
  76                     <a href="#">
  77                       <div class="pull-left">
  78                         <img src="../../dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
  79                       </div>
  80                       <h4>
  81                         AdminLTE Design Team
  82                         <small><i class="fa fa-clock-o"></i> 2 hours</small>
  83                       </h4>
  84                       <p>Why not buy a new awesome theme?</p>
  85                     </a>
  86                   </li>
  87                   <li>
  88                     <a href="#">
  89                       <div class="pull-left">
  90                         <img src="../../dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
  91                       </div>
  92                       <h4>
  93                         Developers
  94                         <small><i class="fa fa-clock-o"></i> Today</small>
  95                       </h4>
  96                       <p>Why not buy a new awesome theme?</p>
  97                     </a>
  98                   </li>
  99                   <li>
 100                     <a href="#">
 101                       <div class="pull-left">
 102                         <img src="../../dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
 103                       </div>
 104                       <h4>
 105                         Sales Department
 106                         <small><i class="fa fa-clock-o"></i> Yesterday</small>
 107                       </h4>
 108                       <p>Why not buy a new awesome theme?</p>
 109                     </a>
 110                   </li>
 111                   <li>
 112                     <a href="#">
 113                       <div class="pull-left">
 114                         <img src="../../dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
 115                       </div>
 116                       <h4>
 117                         Reviewers
 118                         <small><i class="fa fa-clock-o"></i> 2 days</small>
 119                       </h4>
 120                       <p>Why not buy a new awesome theme?</p>
 121                     </a>
 122                   </li>
 123                 </ul>
 124               </li>
 125               <li class="footer"><a href="#">See All Messages</a></li>
 126             </ul>
 127           </li>
 128           <!-- Notifications: style can be found in dropdown.less -->
 129           <li class="dropdown notifications-menu">
 130             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 131               <i class="fa fa-bell-o"></i>
 132               <span class="label label-warning">10</span>
 133             </a>
 134             <ul class="dropdown-menu">
 135               <li class="header">You have 10 notifications</li>
 136               <li>
 137                 <!-- inner menu: contains the actual data -->
 138                 <ul class="menu">
 139                   <li>
 140                     <a href="#">
 141                       <i class="fa fa-users text-aqua"></i> 5 new members joined today
 142                     </a>
 143                   </li>
 144                   <li>
 145                     <a href="#">
 146                       <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the
 147                       page and may cause design problems
 148                     </a>
 149                   </li>
 150                   <li>
 151                     <a href="#">
 152                       <i class="fa fa-users text-red"></i> 5 new members joined
 153                     </a>
 154                   </li>
 155
 156                   <li>
 157                     <a href="#">
 158                       <i class="fa fa-shopping-cart text-green"></i> 25 sales made
 159                     </a>
 160                   </li>
 161                   <li>
 162                     <a href="#">
 163                       <i class="fa fa-user text-red"></i> You changed your username
 164                     </a>
 165                   </li>
 166                 </ul>
 167               </li>
 168               <li class="footer"><a href="#">View all</a></li>
 169             </ul>
 170           </li>
 171           <!-- Tasks: style can be found in dropdown.less -->
 172           <li class="dropdown tasks-menu">
 173             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 174               <i class="fa fa-flag-o"></i>
 175               <span class="label label-danger">9</span>
 176             </a>
 177             <ul class="dropdown-menu">
 178               <li class="header">You have 9 tasks</li>
 179               <li>
 180                 <!-- inner menu: contains the actual data -->
 181                 <ul class="menu">
 182                   <li><!-- Task item -->
 183                     <a href="#">
 184                       <h3>
 185                         Design some buttons
 186                         <small class="pull-right">20%</small>
 187                       </h3>
 188                       <div class="progress xs">
 189                         <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 190                           <span class="sr-only">20% Complete</span>
 191                         </div>
 192                       </div>
 193                     </a>
 194                   </li>
 195                   <!-- end task item -->
 196                   <li><!-- Task item -->
 197                     <a href="#">
 198                       <h3>
 199                         Create a nice theme
 200                         <small class="pull-right">40%</small>
 201                       </h3>
 202                       <div class="progress xs">
 203                         <div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 204                           <span class="sr-only">40% Complete</span>
 205                         </div>
 206                       </div>
 207                     </a>
 208                   </li>
 209                   <!-- end task item -->
 210                   <li><!-- Task item -->
 211                     <a href="#">
 212                       <h3>
 213                         Some task I need to do
 214                         <small class="pull-right">60%</small>
 215                       </h3>
 216                       <div class="progress xs">
 217                         <div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 218                           <span class="sr-only">60% Complete</span>
 219                         </div>
 220                       </div>
 221                     </a>
 222                   </li>
 223                   <!-- end task item -->
 224                   <li><!-- Task item -->
 225                     <a href="#">
 226                       <h3>
 227                         Make beautiful transitions
 228                         <small class="pull-right">80%</small>
 229                       </h3>
 230                       <div class="progress xs">
 231                         <div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 232                           <span class="sr-only">80% Complete</span>
 233                         </div>
 234                       </div>
 235                     </a>
 236                   </li>
 237                   <!-- end task item -->
 238                 </ul>
 239               </li>
 240               <li class="footer">
 241                 <a href="#">View all tasks</a>
 242               </li>
 243             </ul>
 244           </li>
 245           <!-- User Account: style can be found in dropdown.less -->
 246           <li class="dropdown user user-menu">
 247             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 248               <img src="../../dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
 249               <span class="hidden-xs">Alexander Pierce</span>
 250             </a>
 251             <ul class="dropdown-menu">
 252               <!-- User image -->
 253               <li class="user-header">
 254                 <img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
 255
 256                 <p>
 257                   Alexander Pierce - Web Developer
 258                   <small>Member since Nov. 2012</small>
 259                 </p>
 260               </li>
 261               <!-- Menu Body -->
 262               <li class="user-body">
 263                 <div class="row">
 264                   <div class="col-xs-4 text-center">
 265                     <a href="#">Followers</a>
 266                   </div>
 267                   <div class="col-xs-4 text-center">
 268                     <a href="#">Sales</a>
 269                   </div>
 270                   <div class="col-xs-4 text-center">
 271                     <a href="#">Friends</a>
 272                   </div>
 273                 </div>
 274                 <!-- /.row -->
 275               </li>
 276               <!-- Menu Footer-->
 277               <li class="user-footer">
 278                 <div class="pull-left">
 279                   <a href="#" class="btn btn-default btn-flat">Profile</a>
 280                 </div>
 281                 <div class="pull-right">
 282                   <a href="#" class="btn btn-default btn-flat">Sign out</a>
 283                 </div>
 284               </li>
 285             </ul>
 286           </li>
 287           <!-- Control Sidebar Toggle Button -->
 288           <li>
 289             <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
 290           </li>
 291         </ul>
 292       </div>
 293     </nav>
 294   </header>
 295   <!-- Left side column. contains the logo and sidebar -->
 296   <aside class="main-sidebar">
 297     <!-- sidebar: style can be found in sidebar.less -->
 298     <section class="sidebar">
 299       <!-- Sidebar user panel -->
 300       <div class="user-panel">
 301         <div class="pull-left image">
 302           <img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
 303         </div>
 304         <div class="pull-left info">
 305           <p>Alexander Pierce</p>
 306           <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
 307         </div>
 308       </div>
 309       <!-- search form -->
 310       <form action="#" method="get" class="sidebar-form">
 311         <div class="input-group">
 312           <input type="text" name="q" class="form-control" placeholder="Search...">
 313               <span class="input-group-btn">
 314                 <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
 315                 </button>
 316               </span>
 317         </div>
 318       </form>
 319       <!-- /.search form -->
 320       <!-- sidebar menu: : style can be found in sidebar.less -->
 321       <ul class="sidebar-menu">
 322         <li class="header">MAIN NAVIGATION</li>
 323         <li class="treeview">
 324           <a href="#">
 325             <i class="fa fa-dashboard"></i> <span>Dashboard</span>
 326             <span class="pull-right-container">
 327               <i class="fa fa-angle-left pull-right"></i>
 328             </span>
 329           </a>
 330           <ul class="treeview-menu">
 331             <li><a href="../../index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
 332             <li><a href="../../index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
 333           </ul>
 334         </li>
 335         <li class="treeview">
 336           <a href="#">
 337             <i class="fa fa-files-o"></i>
 338             <span>Layout Options</span>
 339             <span class="pull-right-container">
 340               <span class="label label-primary pull-right">4</span>
 341             </span>
 342           </a>
 343           <ul class="treeview-menu">
 344             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
 345             <li><a href="../layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
 346             <li><a href="../layout/fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li>
 347             <li><a href="../layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
 348           </ul>
 349         </li>
 350         <li>
 351           <a href="../widgets.html">
 352             <i class="fa fa-th"></i> <span>Widgets</span>
 353             <span class="pull-right-container">
 354               <small class="label pull-right bg-green">new</small>
 355             </span>
 356           </a>
 357         </li>
 358         <li class="treeview">
 359           <a href="#">
 360             <i class="fa fa-pie-chart"></i>
 361             <span>Charts</span>
 362             <span class="pull-right-container">
 363               <i class="fa fa-angle-left pull-right"></i>
 364             </span>
 365           </a>
 366           <ul class="treeview-menu">
 367             <li><a href="../charts/chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
 368             <li><a href="../charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
 369             <li><a href="../charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
 370             <li><a href="../charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
 371           </ul>
 372         </li>
 373         <li class="treeview active">
 374           <a href="#">
 375             <i class="fa fa-laptop"></i>
 376             <span>UI Elements</span>
 377             <span class="pull-right-container">
 378               <i class="fa fa-angle-left pull-right"></i>
 379             </span>
 380           </a>
 381           <ul class="treeview-menu">
 382             <li><a href="general.html"><i class="fa fa-circle-o"></i> General</a></li>
 383             <li><a href="icons.html"><i class="fa fa-circle-o"></i> Icons</a></li>
 384             <li class="active"><a href="buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li>
 385             <li><a href="sliders.html"><i class="fa fa-circle-o"></i> Sliders</a></li>
 386             <li><a href="timeline.html"><i class="fa fa-circle-o"></i> Timeline</a></li>
 387             <li><a href="modals.html"><i class="fa fa-circle-o"></i> Modals</a></li>
 388           </ul>
 389         </li>
 390         <li class="treeview">
 391           <a href="#">
 392             <i class="fa fa-edit"></i> <span>Forms</span>
 393             <span class="pull-right-container">
 394               <i class="fa fa-angle-left pull-right"></i>
 395             </span>
 396           </a>
 397           <ul class="treeview-menu">
 398             <li><a href="../forms/general.html"><i class="fa fa-circle-o"></i> General Elements</a></li>
 399             <li><a href="../forms/advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
 400             <li><a href="../forms/editors.html"><i class="fa fa-circle-o"></i> Editors</a></li>
 401           </ul>
 402         </li>
 403         <li class="treeview">
 404           <a href="#">
 405             <i class="fa fa-table"></i> <span>Tables</span>
 406             <span class="pull-right-container">
 407               <i class="fa fa-angle-left pull-right"></i>
 408             </span>
 409           </a>
 410           <ul class="treeview-menu">
 411             <li><a href="../tables/simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li>
 412             <li><a href="../tables/data.html"><i class="fa fa-circle-o"></i> Data tables</a></li>
 413           </ul>
 414         </li>
 415         <li>
 416           <a href="../calendar.html">
 417             <i class="fa fa-calendar"></i> <span>Calendar</span>
 418             <span class="pull-right-container">
 419               <small class="label pull-right bg-red">3</small>
 420               <small class="label pull-right bg-blue">17</small>
 421             </span>
 422           </a>
 423         </li>
 424         <li>
 425           <a href="../mailbox/mailbox.html">
 426             <i class="fa fa-envelope"></i> <span>Mailbox</span>
 427             <span class="pull-right-container">
 428               <small class="label pull-right bg-yellow">12</small>
 429               <small class="label pull-right bg-green">16</small>
 430               <small class="label pull-right bg-red">5</small>
 431             </span>
 432           </a>
 433         </li>
 434         <li class="treeview">
 435           <a href="#">
 436             <i class="fa fa-folder"></i> <span>Examples</span>
 437             <span class="pull-right-container">
 438               <i class="fa fa-angle-left pull-right"></i>
 439             </span>
 440           </a>
 441           <ul class="treeview-menu">
 442             <li><a href="../examples/invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
 443             <li><a href="../examples/profile.html"><i class="fa fa-circle-o"></i> Profile</a></li>
 444             <li><a href="../examples/login.html"><i class="fa fa-circle-o"></i> Login</a></li>
 445             <li><a href="../examples/register.html"><i class="fa fa-circle-o"></i> Register</a></li>
 446             <li><a href="../examples/lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
 447             <li><a href="../examples/404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
 448             <li><a href="../examples/500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
 449             <li><a href="../examples/blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
 450             <li><a href="../examples/pace.html"><i class="fa fa-circle-o"></i> Pace Page</a></li>
 451           </ul>
 452         </li>
 453         <li class="treeview">
 454           <a href="#">
 455             <i class="fa fa-share"></i> <span>Multilevel</span>
 456             <span class="pull-right-container">
 457               <i class="fa fa-angle-left pull-right"></i>
 458             </span>
 459           </a>
 460           <ul class="treeview-menu">
 461             <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
 462             <li>
 463               <a href="#"><i class="fa fa-circle-o"></i> Level One
 464                 <span class="pull-right-container">
 465                   <i class="fa fa-angle-left pull-right"></i>
 466                 </span>
 467               </a>
 468               <ul class="treeview-menu">
 469                 <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
 470                 <li>
 471                   <a href="#"><i class="fa fa-circle-o"></i> Level Two
 472                     <span class="pull-right-container">
 473                       <i class="fa fa-angle-left pull-right"></i>
 474                     </span>
 475                   </a>
 476                   <ul class="treeview-menu">
 477                     <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
 478                     <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
 479                   </ul>
 480                 </li>
 481               </ul>
 482             </li>
 483             <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
 484           </ul>
 485         </li>
 486         <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
 487         <li class="header">LABELS</li>
 488         <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
 489         <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
 490         <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
 491       </ul>
 492     </section>
 493     <!-- /.sidebar -->
 494   </aside>
 495
 496   <!-- Content Wrapper. Contains page content -->
 497   <div class="content-wrapper">
 498     <!-- Content Header (Page header) -->
 499     <section class="content-header">
 500       <h1>
 501         Buttons
 502         <small>Control panel</small>
 503       </h1>
 504       <ol class="breadcrumb">
 505         <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
 506         <li><a href="#">UI</a></li>
 507         <li class="active">Buttons</li>
 508       </ol>
 509     </section>
 510
 511     <!-- Main content -->
 512     <section class="content">
 513
 514       <div class="row">
 515         <div class="col-md-12">
 516           <div class="box box-primary">
 517             <div class="box-header">
 518               <i class="fa fa-edit"></i>
 519
 520               <h3 class="box-title">Buttons</h3>
 521             </div>
 522             <div class="box-body pad table-responsive">
 523               <p>Various types of buttons. Using the base class <code>.btn</code></p>
 524               <table class="table table-bordered text-center">
 525                 <tr>
 526                   <th>Normal</th>
 527                   <th>Large <code>.btn-lg</code></th>
 528                   <th>Small <code>.btn-sm</code></th>
 529                   <th>X-Small <code>.btn-xs</code></th>
 530                   <th>Flat <code>.btn-flat</code></th>
 531                   <th>Disabled <code>.disabled</code></th>
 532                 </tr>
 533                 <tr>
 534                   <td>
 535                     <button type="button" class="btn btn-block btn-default">Default</button>
 536                   </td>
 537                   <td>
 538                     <button type="button" class="btn btn-block btn-default btn-lg">Default</button>
 539                   </td>
 540                   <td>
 541                     <button type="button" class="btn btn-block btn-default btn-sm">Default</button>
 542                   </td>
 543                   <td>
 544                     <button type="button" class="btn btn-block btn-default btn-xs">Default</button>
 545                   </td>
 546                   <td>
 547                     <button type="button" class="btn btn-block btn-default btn-flat">Default</button>
 548                   </td>
 549                   <td>
 550                     <button type="button" class="btn btn-block btn-default disabled">Default</button>
 551                   </td>
 552                 </tr>
 553                 <tr>
 554                   <td>
 555                     <button type="button" class="btn btn-block btn-primary">Primary</button>
 556                   </td>
 557                   <td>
 558                     <button type="button" class="btn btn-block btn-primary btn-lg">Primary</button>
 559                   </td>
 560                   <td>
 561                     <button type="button" class="btn btn-block btn-primary btn-sm">Primary</button>
 562                   </td>
 563                   <td>
 564                     <button type="button" class="btn btn-block btn-primary btn-xs">Primary</button>
 565                   </td>
 566                   <td>
 567                     <button type="button" class="btn btn-block btn-primary btn-flat">Primary</button>
 568                   </td>
 569                   <td>
 570                     <button type="button" class="btn btn-block btn-primary disabled">Primary</button>
 571                   </td>
 572                 </tr>
 573                 <tr>
 574                   <td>
 575                     <button type="button" class="btn btn-block btn-success">Success</button>
 576                   </td>
 577                   <td>
 578                     <button type="button" class="btn btn-block btn-success btn-lg">Success</button>
 579                   </td>
 580                   <td>
 581                     <button type="button" class="btn btn-block btn-success btn-sm">Success</button>
 582                   </td>
 583                   <td>
 584                     <button type="button" class="btn btn-block btn-success btn-xs">Success</button>
 585                   </td>
 586                   <td>
 587                     <button type="button" class="btn btn-block btn-success btn-flat">Success</button>
 588                   </td>
 589                   <td>
 590                     <button type="button" class="btn btn-block btn-success disabled">Success</button>
 591                   </td>
 592                 </tr>
 593                 <tr>
 594                   <td>
 595                     <button type="button" class="btn btn-block btn-info">Info</button>
 596                   </td>
 597                   <td>
 598                     <button type="button" class="btn btn-block btn-info btn-lg">Info</button>
 599                   </td>
 600                   <td>
 601                     <button type="button" class="btn btn-block btn-info btn-sm">Info</button>
 602                   </td>
 603                   <td>
 604                     <button type="button" class="btn btn-block btn-info btn-xs">Info</button>
 605                   </td>
 606                   <td>
 607                     <button type="button" class="btn btn-block btn-info btn-flat">Info</button>
 608                   </td>
 609                   <td>
 610                     <button type="button" class="btn btn-block btn-info disabled">Info</button>
 611                   </td>
 612                 </tr>
 613                 <tr>
 614                   <td>
 615                     <button type="button" class="btn btn-block btn-danger">Danger</button>
 616                   </td>
 617                   <td>
 618                     <button type="button" class="btn btn-block btn-danger btn-lg">Danger</button>
 619                   </td>
 620                   <td>
 621                     <button type="button" class="btn btn-block btn-danger btn-sm">Danger</button>
 622                   </td>
 623                   <td>
 624                     <button type="button" class="btn btn-block btn-danger btn-xs">Danger</button>
 625                   </td>
 626                   <td>
 627                     <button type="button" class="btn btn-block btn-danger btn-flat">Danger</button>
 628                   </td>
 629                   <td>
 630                     <button type="button" class="btn btn-block btn-danger disabled">Danger</button>
 631                   </td>
 632                 </tr>
 633                 <tr>
 634                   <td>
 635                     <button type="button" class="btn btn-block btn-warning">Warning</button>
 636                   </td>
 637                   <td>
 638                     <button type="button" class="btn btn-block btn-warning btn-lg">Warning</button>
 639                   </td>
 640                   <td>
 641                     <button type="button" class="btn btn-block btn-warning btn-sm">Warning</button>
 642                   </td>
 643                   <td>
 644                     <button type="button" class="btn btn-block btn-warning btn-xs">Warning</button>
 645                   </td>
 646                   <td>
 647                     <button type="button" class="btn btn-block btn-warning btn-flat">Warning</button>
 648                   </td>
 649                   <td>
 650                     <button type="button" class="btn btn-block btn-warning disabled">Warning</button>
 651                   </td>
 652                 </tr>
 653               </table>
 654             </div>
 655             <!-- /.box -->
 656           </div>
 657         </div>
 658         <!-- /.col -->
 659       </div>
 660       <!-- ./row -->
 661       <div class="row">
 662         <div class="col-md-6">
 663           <!-- Block buttons -->
 664           <div class="box">
 665             <div class="box-header">
 666               <h3 class="box-title">Block Buttons</h3>
 667             </div>
 668             <div class="box-body">
 669               <button type="button" class="btn btn-default btn-block">.btn-block</button>
 670               <button type="button" class="btn btn-default btn-block btn-flat">.btn-block .btn-flat</button>
 671               <button type="button" class="btn btn-default btn-block btn-sm">.btn-block .btn-sm</button>
 672             </div>
 673           </div>
 674           <!-- /.box -->
 675
 676           <!-- Horizontal grouping -->
 677           <div class="box">
 678             <div class="box-header">
 679               <h3 class="box-title">Horizontal Button Group</h3>
 680             </div>
 681             <div class="box-body table-responsive pad">
 682               <p>
 683                 Horizontal button groups are easy to create with bootstrap. Just add your buttons
 684                 inside <code>&lt;div class="btn-group"&gt;&lt;/div&gt;</code>
 685               </p>
 686
 687               <table class="table table-bordered">
 688                 <tr>
 689                   <th>Button</th>
 690                   <th>Icons</th>
 691                   <th>Flat</th>
 692                   <th>Dropdown</th>
 693                 </tr>
 694                 <!-- Default -->
 695                 <tr>
 696                   <td>
 697                     <div class="btn-group">
 698                       <button type="button" class="btn btn-default">Left</button>
 699                       <button type="button" class="btn btn-default">Middle</button>
 700                       <button type="button" class="btn btn-default">Right</button>
 701                     </div>
 702                   </td>
 703                   <td>
 704                     <div class="btn-group">
 705                       <button type="button" class="btn btn-default"><i class="fa fa-align-left"></i></button>
 706                       <button type="button" class="btn btn-default"><i class="fa fa-align-center"></i></button>
 707                       <button type="button" class="btn btn-default"><i class="fa fa-align-right"></i></button>
 708                     </div>
 709                   </td>
 710                   <td>
 711                     <div class="btn-group">
 712                       <button type="button" class="btn btn-default btn-flat"><i class="fa fa-align-left"></i></button>
 713                       <button type="button" class="btn btn-default btn-flat"><i class="fa fa-align-center"></i></button>
 714                       <button type="button" class="btn btn-default btn-flat"><i class="fa fa-align-right"></i></button>
 715                     </div>
 716                   </td>
 717                   <td>
 718                     <div class="btn-group">
 719                       <button type="button" class="btn btn-default">1</button>
 720                       <button type="button" class="btn btn-default">2</button>
 721
 722                       <div class="btn-group">
 723                         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 724                           <span class="caret"></span>
 725                         </button>
 726                         <ul class="dropdown-menu">
 727                           <li><a href="#">Dropdown link</a></li>
 728                           <li><a href="#">Dropdown link</a></li>
 729                         </ul>
 730                       </div>
 731                     </div>
 732                   </td>
 733                 </tr>
 734                 <!-- ./default -->
 735                 <!-- Info -->
 736                 <tr>
 737                   <td>
 738                     <div class="btn-group">
 739                       <button type="button" class="btn btn-info">Left</button>
 740                       <button type="button" class="btn btn-info">Middle</button>
 741                       <button type="button" class="btn btn-info">Right</button>
 742                     </div>
 743                   </td>
 744                   <td>
 745                     <div class="btn-group">
 746                       <button type="button" class="btn btn-info"><i class="fa fa-align-left"></i></button>
 747                       <button type="button" class="btn btn-info"><i class="fa fa-align-center"></i></button>
 748                       <button type="button" class="btn btn-info"><i class="fa fa-align-right"></i></button>
 749                     </div>
 750                   </td>
 751                   <td>
 752                     <div class="btn-group">
 753                       <button type="button" class="btn btn-info btn-flat"><i class="fa fa-align-left"></i></button>
 754                       <button type="button" class="btn btn-info btn-flat"><i class="fa fa-align-center"></i></button>
 755                       <button type="button" class="btn btn-info btn-flat"><i class="fa fa-align-right"></i></button>
 756                     </div>
 757                   </td>
 758                   <td>
 759                     <div class="btn-group">
 760                       <button type="button" class="btn btn-info">1</button>
 761                       <button type="button" class="btn btn-info">2</button>
 762
 763                       <div class="btn-group">
 764                         <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
 765                           <span class="caret"></span>
 766                         </button>
 767                         <ul class="dropdown-menu">
 768                           <li><a href="#">Dropdown link</a></li>
 769                           <li><a href="#">Dropdown link</a></li>
 770                         </ul>
 771                       </div>
 772                     </div>
 773                   </td>
 774                 </tr>
 775                 <!-- /. info -->
 776                 <!-- /.danger -->
 777                 <tr>
 778                   <td>
 779                     <div class="btn-group">
 780                       <button type="button" class="btn btn-danger">Left</button>
 781                       <button type="button" class="btn btn-danger">Middle</button>
 782                       <button type="button" class="btn btn-danger">Right</button>
 783                     </div>
 784                   </td>
 785                   <td>
 786                     <div class="btn-group">
 787                       <button type="button" class="btn btn-danger"><i class="fa fa-align-left"></i></button>
 788                       <button type="button" class="btn btn-danger"><i class="fa fa-align-center"></i></button>
 789                       <button type="button" class="btn btn-danger"><i class="fa fa-align-right"></i></button>
 790                     </div>
 791                   </td>
 792                   <td>
 793                     <div class="btn-group">
 794                       <button type="button" class="btn btn-danger btn-flat"><i class="fa fa-align-left"></i></button>
 795                       <button type="button" class="btn btn-danger btn-flat"><i class="fa fa-align-center"></i></button>
 796                       <button type="button" class="btn btn-danger btn-flat"><i class="fa fa-align-right"></i></button>
 797                     </div>
 798                   </td>
 799                   <td>
 800                     <div class="btn-group">
 801                       <button type="button" class="btn btn-danger">1</button>
 802                       <button type="button" class="btn btn-danger">2</button>
 803
 804                       <div class="btn-group">
 805                         <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
 806                           <span class="caret"></span>
 807                         </button>
 808                         <ul class="dropdown-menu">
 809                           <li><a href="#">Dropdown link</a></li>
 810                           <li><a href="#">Dropdown link</a></li>
 811                         </ul>
 812                       </div>
 813                     </div>
 814                   </td>
 815                 </tr>
 816                 <!-- /.danger -->
 817                 <!-- warning -->
 818                 <tr>
 819                   <td>
 820                     <div class="btn-group">
 821                       <button type="button" class="btn btn-warning">Left</button>
 822                       <button type="button" class="btn btn-warning">Middle</button>
 823                       <button type="button" class="btn btn-warning">Right</button>
 824                     </div>
 825                   </td>
 826                   <td>
 827                     <div class="btn-group">
 828                       <button type="button" class="btn btn-warning"><i class="fa fa-align-left"></i></button>
 829                       <button type="button" class="btn btn-warning"><i class="fa fa-align-center"></i></button>
 830                       <button type="button" class="btn btn-warning"><i class="fa fa-align-right"></i></button>
 831                     </div>
 832                   </td>
 833                   <td>
 834                     <div class="btn-group">
 835                       <button type="button" class="btn btn-warning btn-flat"><i class="fa fa-align-left"></i></button>
 836                       <button type="button" class="btn btn-warning btn-flat"><i class="fa fa-align-center"></i></button>
 837                       <button type="button" class="btn btn-warning btn-flat"><i class="fa fa-align-right"></i></button>
 838                     </div>
 839                   </td>
 840                   <td>
 841                     <div class="btn-group">
 842                       <button type="button" class="btn btn-warning">1</button>
 843                       <button type="button" class="btn btn-warning">2</button>
 844
 845                       <div class="btn-group">
 846                         <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
 847                           <span class="caret"></span>
 848                         </button>
 849                         <ul class="dropdown-menu">
 850                           <li><a href="#">Dropdown link</a></li>
 851                           <li><a href="#">Dropdown link</a></li>
 852                         </ul>
 853                       </div>
 854                     </div>
 855                   </td>
 856                 </tr>
 857                 <!-- /.warning -->
 858                 <!-- success -->
 859                 <tr>
 860                   <td>
 861                     <div class="btn-group">
 862                       <button type="button" class="btn btn-success">Left</button>
 863                       <button type="button" class="btn btn-success">Middle</button>
 864                       <button type="button" class="btn btn-success">Right</button>
 865                     </div>
 866                   </td>
 867                   <td>
 868                     <div class="btn-group">
 869                       <button type="button" class="btn btn-success"><i class="fa fa-align-left"></i></button>
 870                       <button type="button" class="btn btn-success"><i class="fa fa-align-center"></i></button>
 871                       <button type="button" class="btn btn-success"><i class="fa fa-align-right"></i></button>
 872                     </div>
 873                   </td>
 874                   <td>
 875                     <div class="btn-group">
 876                       <button type="button" class="btn btn-success btn-flat"><i class="fa fa-align-left"></i></button>
 877                       <button type="button" class="btn btn-success btn-flat"><i class="fa fa-align-center"></i></button>
 878                       <button type="button" class="btn btn-success btn-flat"><i class="fa fa-align-right"></i></button>
 879                     </div>
 880                   </td>
 881                   <td>
 882                     <div class="btn-group">
 883                       <button type="button" class="btn btn-success">1</button>
 884                       <button type="button" class="btn btn-success">2</button>
 885
 886                       <div class="btn-group">
 887                         <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
 888                           <span class="caret"></span>
 889                         </button>
 890                         <ul class="dropdown-menu">
 891                           <li><a href="#">Dropdown link</a></li>
 892                           <li><a href="#">Dropdown link</a></li>
 893                         </ul>
 894                       </div>
 895                     </div>
 896                   </td>
 897                 </tr>
 898                 <!-- /.success -->
 899               </table>
 900             </div>
 901           </div>
 902           <!-- /.box -->
 903
 904           <div class="box">
 905             <div class="box-header">
 906               <h3 class="box-title">Button Addon</h3>
 907             </div>
 908             <div class="box-body">
 909               <p>With dropdown</p>
 910
 911               <div class="input-group margin">
 912                 <div class="input-group-btn">
 913                   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action
 914                     <span class="fa fa-caret-down"></span></button>
 915                   <ul class="dropdown-menu">
 916                     <li><a href="#">Action</a></li>
 917                     <li><a href="#">Another action</a></li>
 918                     <li><a href="#">Something else here</a></li>
 919                     <li class="divider"></li>
 920                     <li><a href="#">Separated link</a></li>
 921                   </ul>
 922                 </div>
 923                 <!-- /btn-group -->
 924                 <input type="text" class="form-control">
 925               </div>
 926               <!-- /input-group -->
 927               <p>Normal</p>
 928
 929               <div class="input-group margin">
 930                 <div class="input-group-btn">
 931                   <button type="button" class="btn btn-danger">Action</button>
 932                 </div>
 933                 <!-- /btn-group -->
 934                 <input type="text" class="form-control">
 935               </div>
 936               <!-- /input-group -->
 937               <p>Flat</p>
 938
 939               <div class="input-group margin">
 940                 <input type="text" class="form-control">
 941                     <span class="input-group-btn">
 942                       <button type="button" class="btn btn-info btn-flat">Go!</button>
 943                     </span>
 944               </div>
 945               <!-- /input-group -->
 946             </div>
 947             <!-- /.box-body -->
 948           </div>
 949           <!-- /.box -->
 950           <!-- split buttons box -->
 951           <div class="box">
 952             <div class="box-header">
 953               <h3 class="box-title">Split buttons</h3>
 954             </div>
 955             <div class="box-body">
 956               <!-- Split button -->
 957               <p>Normal split buttons:</p>
 958
 959               <div class="margin">
 960                 <div class="btn-group">
 961                   <button type="button" class="btn btn-default">Action</button>
 962                   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 963                     <span class="caret"></span>
 964                     <span class="sr-only">Toggle Dropdown</span>
 965                   </button>
 966                   <ul class="dropdown-menu" role="menu">
 967                     <li><a href="#">Action</a></li>
 968                     <li><a href="#">Another action</a></li>
 969                     <li><a href="#">Something else here</a></li>
 970                     <li class="divider"></li>
 971                     <li><a href="#">Separated link</a></li>
 972                   </ul>
 973                 </div>
 974                 <div class="btn-group">
 975                   <button type="button" class="btn btn-info">Action</button>
 976                   <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
 977                     <span class="caret"></span>
 978                     <span class="sr-only">Toggle Dropdown</span>
 979                   </button>
 980                   <ul class="dropdown-menu" role="menu">
 981                     <li><a href="#">Action</a></li>
 982                     <li><a href="#">Another action</a></li>
 983                     <li><a href="#">Something else here</a></li>
 984                     <li class="divider"></li>
 985                     <li><a href="#">Separated link</a></li>
 986                   </ul>
 987                 </div>
 988                 <div class="btn-group">
 989                   <button type="button" class="btn btn-danger">Action</button>
 990                   <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
 991                     <span class="caret"></span>
 992                     <span class="sr-only">Toggle Dropdown</span>
 993                   </button>
 994                   <ul class="dropdown-menu" role="menu">
 995                     <li><a href="#">Action</a></li>
 996                     <li><a href="#">Another action</a></li>
 997                     <li><a href="#">Something else here</a></li>
 998                     <li class="divider"></li>
 999                     <li><a href="#">Separated link</a></li>
1000                   </ul>
1001                 </div>
1002                 <div class="btn-group">
1003                   <button type="button" class="btn btn-success">Action</button>
1004                   <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
1005                     <span class="caret"></span>
1006                     <span class="sr-only">Toggle Dropdown</span>
1007                   </button>
1008                   <ul class="dropdown-menu" role="menu">
1009                     <li><a href="#">Action</a></li>
1010                     <li><a href="#">Another action</a></li>
1011                     <li><a href="#">Something else here</a></li>
1012                     <li class="divider"></li>
1013                     <li><a href="#">Separated link</a></li>
1014                   </ul>
1015                 </div>
1016                 <div class="btn-group">
1017                   <button type="button" class="btn btn-warning">Action</button>
1018                   <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
1019                     <span class="caret"></span>
1020                     <span class="sr-only">Toggle Dropdown</span>
1021                   </button>
1022                   <ul class="dropdown-menu" role="menu">
1023                     <li><a href="#">Action</a></li>
1024                     <li><a href="#">Another action</a></li>
1025                     <li><a href="#">Something else here</a></li>
1026                     <li class="divider"></li>
1027                     <li><a href="#">Separated link</a></li>
1028                   </ul>
1029                 </div>
1030               </div>
1031               <!-- flat split buttons -->
1032               <p>Flat split buttons:</p>
1033
1034               <div class="margin">
1035                 <div class="btn-group">
1036                   <button type="button" class="btn btn-default btn-flat">Action</button>
1037                   <button type="button" class="btn btn-default btn-flat dropdown-toggle" data-toggle="dropdown">
1038                     <span class="caret"></span>
1039                     <span class="sr-only">Toggle Dropdown</span>
1040                   </button>
1041                   <ul class="dropdown-menu" role="menu">
1042                     <li><a href="#">Action</a></li>
1043                     <li><a href="#">Another action</a></li>
1044                     <li><a href="#">Something else here</a></li>
1045                     <li class="divider"></li>
1046                     <li><a href="#">Separated link</a></li>
1047                   </ul>
1048                 </div>
1049                 <div class="btn-group">
1050                   <button type="button" class="btn btn-info btn-flat">Action</button>
1051                   <button type="button" class="btn btn-info btn-flat dropdown-toggle" data-toggle="dropdown">
1052                     <span class="caret"></span>
1053                     <span class="sr-only">Toggle Dropdown</span>
1054                   </button>
1055                   <ul class="dropdown-menu" role="menu">
1056                     <li><a href="#">Action</a></li>
1057                     <li><a href="#">Another action</a></li>
1058                     <li><a href="#">Something else here</a></li>
1059                     <li class="divider"></li>
1060                     <li><a href="#">Separated link</a></li>
1061                   </ul>
1062                 </div>
1063                 <div class="btn-group">
1064                   <button type="button" class="btn btn-danger btn-flat">Action</button>
1065                   <button type="button" class="btn btn-danger btn-flat dropdown-toggle" data-toggle="dropdown">
1066                     <span class="caret"></span>
1067                     <span class="sr-only">Toggle Dropdown</span>
1068                   </button>
1069                   <ul class="dropdown-menu" role="menu">
1070                     <li><a href="#">Action</a></li>
1071                     <li><a href="#">Another action</a></li>
1072                     <li><a href="#">Something else here</a></li>
1073                     <li class="divider"></li>
1074                     <li><a href="#">Separated link</a></li>
1075                   </ul>
1076                 </div>
1077                 <div class="btn-group">
1078                   <button type="button" class="btn btn-success btn-flat">Action</button>
1079                   <button type="button" class="btn btn-success btn-flat dropdown-toggle" data-toggle="dropdown">
1080                     <span class="caret"></span>
1081                     <span class="sr-only">Toggle Dropdown</span>
1082                   </button>
1083                   <ul class="dropdown-menu" role="menu">
1084                     <li><a href="#">Action</a></li>
1085                     <li><a href="#">Another action</a></li>
1086                     <li><a href="#">Something else here</a></li>
1087                     <li class="divider"></li>
1088                     <li><a href="#">Separated link</a></li>
1089                   </ul>
1090                 </div>
1091                 <div class="btn-group">
1092                   <button type="button" class="btn btn-warning btn-flat">Action</button>
1093                   <button type="button" class="btn btn-warning btn-flat dropdown-toggle" data-toggle="dropdown">
1094                     <span class="caret"></span>
1095                     <span class="sr-only">Toggle Dropdown</span>
1096                   </button>
1097                   <ul class="dropdown-menu" role="menu">
1098                     <li><a href="#">Action</a></li>
1099                     <li><a href="#">Another action</a></li>
1100                     <li><a href="#">Something else here</a></li>
1101                     <li class="divider"></li>
1102                     <li><a href="#">Separated link</a></li>
1103                   </ul>
1104                 </div>
1105               </div>
1106             </div>
1107             <!-- /.box-body -->
1108           </div>
1109           <!-- end split buttons box -->
1110
1111           <!-- social buttons -->
1112           <div class="box">
1113             <div class="box-header">
1114               <h3 class="box-title">Social Buttons (By <a href="https://github.com/lipis/bootstrap-social">Lipis</a>)
1115               </h3>
1116             </div>
1117             <div class="box-body">
1118               <a class="btn btn-block btn-social btn-bitbucket">
1119                 <i class="fa fa-bitbucket"></i> Sign in with Bitbucket
1120               </a>
1121               <a class="btn btn-block btn-social btn-dropbox">
1122                 <i class="fa fa-dropbox"></i> Sign in with Dropbox
1123               </a>
1124               <a class="btn btn-block btn-social btn-facebook">
1125                 <i class="fa fa-facebook"></i> Sign in with Facebook
1126               </a>
1127               <a class="btn btn-block btn-social btn-flickr">
1128                 <i class="fa fa-flickr"></i> Sign in with Flickr
1129               </a>
1130               <a class="btn btn-block btn-social btn-foursquare">
1131                 <i class="fa fa-foursquare"></i> Sign in with Foursquare
1132               </a>
1133               <a class="btn btn-block btn-social btn-github">
1134                 <i class="fa fa-github"></i> Sign in with GitHub
1135               </a>
1136               <a class="btn btn-block btn-social btn-google">
1137                 <i class="fa fa-google-plus"></i> Sign in with Google
1138               </a>
1139               <a class="btn btn-block btn-social btn-instagram">
1140                 <i class="fa fa-instagram"></i> Sign in with Instagram
1141               </a>
1142               <a class="btn btn-block btn-social btn-linkedin">
1143                 <i class="fa fa-linkedin"></i> Sign in with LinkedIn
1144               </a>
1145               <a class="btn btn-block btn-social btn-tumblr">
1146                 <i class="fa fa-tumblr"></i> Sign in with Tumblr
1147               </a>
1148               <a class="btn btn-block btn-social btn-twitter">
1149                 <i class="fa fa-twitter"></i> Sign in with Twitter
1150               </a>
1151               <a class="btn btn-block btn-social btn-vk">
1152                 <i class="fa fa-vk"></i> Sign in with VK
1153               </a>
1154               <br>
1155
1156               <div class="text-center">
1157                 <a class="btn btn-social-icon btn-bitbucket"><i class="fa fa-bitbucket"></i></a>
1158                 <a class="btn btn-social-icon btn-dropbox"><i class="fa fa-dropbox"></i></a>
1159                 <a class="btn btn-social-icon btn-facebook"><i class="fa fa-facebook"></i></a>
1160                 <a class="btn btn-social-icon btn-flickr"><i class="fa fa-flickr"></i></a>
1161                 <a class="btn btn-social-icon btn-foursquare"><i class="fa fa-foursquare"></i></a>
1162                 <a class="btn btn-social-icon btn-github"><i class="fa fa-github"></i></a>
1163                 <a class="btn btn-social-icon btn-google"><i class="fa fa-google-plus"></i></a>
1164                 <a class="btn btn-social-icon btn-instagram"><i class="fa fa-instagram"></i></a>
1165                 <a class="btn btn-social-icon btn-linkedin"><i class="fa fa-linkedin"></i></a>
1166                 <a class="btn btn-social-icon btn-tumblr"><i class="fa fa-tumblr"></i></a>
1167                 <a class="btn btn-social-icon btn-twitter"><i class="fa fa-twitter"></i></a>
1168                 <a class="btn btn-social-icon btn-vk"><i class="fa fa-vk"></i></a>
1169               </div>
1170             </div>
1171           </div>
1172           <!-- /.box -->
1173
1174         </div>
1175         <!-- /.col -->
1176         <div class="col-md-6">
1177           <!-- Application buttons -->
1178           <div class="box">
1179             <div class="box-header">
1180               <h3 class="box-title">Application Buttons</h3>
1181             </div>
1182             <div class="box-body">
1183               <p>Add the classes <code>.btn.btn-app</code> to an <code>&lt;a></code> tag to achieve the following:</p>
1184               <a class="btn btn-app">
1185                 <i class="fa fa-edit"></i> Edit
1186               </a>
1187               <a class="btn btn-app">
1188                 <i class="fa fa-play"></i> Play
1189               </a>
1190               <a class="btn btn-app">
1191                 <i class="fa fa-repeat"></i> Repeat
1192               </a>
1193               <a class="btn btn-app">
1194                 <i class="fa fa-pause"></i> Pause
1195               </a>
1196               <a class="btn btn-app">
1197                 <i class="fa fa-save"></i> Save
1198               </a>
1199               <a class="btn btn-app">
1200                 <span class="badge bg-yellow">3</span>
1201                 <i class="fa fa-bullhorn"></i> Notifications
1202               </a>
1203               <a class="btn btn-app">
1204                 <span class="badge bg-green">300</span>
1205                 <i class="fa fa-barcode"></i> Products
1206               </a>
1207               <a class="btn btn-app">
1208                 <span class="badge bg-purple">891</span>
1209                 <i class="fa fa-users"></i> Users
1210               </a>
1211               <a class="btn btn-app">
1212                 <span class="badge bg-teal">67</span>
1213                 <i class="fa fa-inbox"></i> Orders
1214               </a>
1215               <a class="btn btn-app">
1216                 <span class="badge bg-aqua">12</span>
1217                 <i class="fa fa-envelope"></i> Inbox
1218               </a>
1219               <a class="btn btn-app">
1220                 <span class="badge bg-red">531</span>
1221                 <i class="fa fa-heart-o"></i> Likes
1222               </a>
1223             </div>
1224             <!-- /.box-body -->
1225           </div>
1226           <!-- /.box -->
1227           <!-- Various colors -->
1228           <div class="box">
1229             <div class="box-header">
1230               <h3 class="box-title">Different colors</h3>
1231             </div>
1232             <div class="box-body">
1233               <p>Mix and match with various background colors. Use base class <code>.btn</code> and add any available
1234                 <code>.bg-*</code> class</p>
1235               <!-- You may notice a .margin class added
1236               here but that's only to make the content
1237               display correctly without having to use a table-->
1238               <p>
1239                 <button type="button" class="btn bg-maroon btn-flat margin">.btn.bg-maroon.btn-flat</button>
1240                 <button type="button" class="btn bg-purple btn-flat margin">.btn.bg-purple.btn-flat</button>
1241                 <button type="button" class="btn bg-navy btn-flat margin">.btn.bg-navy.btn-flat</button>
1242                 <button type="button" class="btn bg-orange btn-flat margin">.btn.bg-orange.btn-flat</button>
1243                 <button type="button" class="btn bg-olive btn-flat margin">.btn.bg-olive.btn-flat</button>
1244               </p>
1245
1246               <p>
1247                 <button type="button" class="btn bg-maroon margin">.btn.bg-maroon</button>
1248                 <button type="button" class="btn bg-purple margin">.btn.bg-purple</button>
1249                 <button type="button" class="btn bg-navy margin">.btn.bg-navy</button>
1250                 <button type="button" class="btn bg-orange margin">.btn.bg-orange</button>
1251                 <button type="button" class="btn bg-olive margin">.btn.bg-olive</button>
1252               </p>
1253             </div>
1254           </div>
1255           <!-- /.box -->
1256
1257           <!-- Vertical grouping -->
1258           <div class="box">
1259             <div class="box-header">
1260               <h3 class="box-title">Vertical Button Group</h3>
1261             </div>
1262             <div class="box-body table-responsive pad">
1263
1264               <p>
1265                 Vertical button groups are easy to create with bootstrap. Just add your buttons
1266                 inside <code>&lt;div class="btn-group-vertical"&gt;&lt;/div&gt;</code>
1267               </p>
1268
1269               <table class="table table-bordered">
1270                 <tr>
1271                   <th>Button</th>
1272                   <th>Icons</th>
1273                   <th>Flat</th>
1274                   <th>Dropdown</th>
1275                 </tr>
1276                 <!-- Default -->
1277                 <tr>
1278                   <td>
1279                     <div class="btn-group-vertical">
1280                       <button type="button" class="btn btn-default">Top</button>
1281                       <button type="button" class="btn btn-default">Middle</button>
1282                       <button type="button" class="btn btn-default">Bottom</button>
1283                     </div>
1284                   </td>
1285                   <td>
1286                     <div class="btn-group-vertical">
1287                       <button type="button" class="btn btn-default"><i class="fa fa-align-left"></i></button>
1288                       <button type="button" class="btn btn-default"><i class="fa fa-align-center"></i></button>
1289                       <button type="button" class="btn btn-default"><i class="fa fa-align-right"></i></button>
1290                     </div>
1291                   </td>
1292                   <td>
1293                     <div class="btn-group-vertical">
1294                       <button type="button" class="btn btn-default btn-flat"><i class="fa fa-align-left"></i></button>
1295                       <button type="button" class="btn btn-default btn-flat"><i class="fa fa-align-center"></i></button>
1296                       <button type="button" class="btn btn-default btn-flat"><i class="fa fa-align-right"></i></button>
1297                     </div>
1298                   </td>
1299                   <td>
1300                     <div class="btn-group-vertical">
1301                       <button type="button" class="btn btn-default">1</button>
1302                       <button type="button" class="btn btn-default">2</button>
1303
1304                       <div class="btn-group">
1305                         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
1306                           <span class="caret"></span>
1307                         </button>
1308                         <ul class="dropdown-menu">
1309                           <li><a href="#">Dropdown link</a></li>
1310                           <li><a href="#">Dropdown link</a></li>
1311                         </ul>
1312                       </div>
1313                     </div>
1314                   </td>
1315                 </tr>
1316                 <!-- ./default -->
1317                 <!-- Info -->
1318                 <tr>
1319                   <td>
1320                     <div class="btn-group-vertical">
1321                       <button type="button" class="btn btn-info">Top</button>
1322                       <button type="button" class="btn btn-info">Middle</button>
1323                       <button type="button" class="btn btn-info">Bottom</button>
1324                     </div>
1325                   </td>
1326                   <td>
1327                     <div class="btn-group-vertical">
1328                       <button type="button" class="btn btn-info"><i class="fa fa-align-left"></i></button>
1329                       <button type="button" class="btn btn-info"><i class="fa fa-align-center"></i></button>
1330                       <button type="button" class="btn btn-info"><i class="fa fa-align-right"></i></button>
1331                     </div>
1332                   </td>
1333                   <td>
1334                     <div class="btn-group-vertical">
1335                       <button type="button" class="btn btn-info btn-flat"><i class="fa fa-align-left"></i></button>
1336                       <button type="button" class="btn btn-info btn-flat"><i class="fa fa-align-center"></i></button>
1337                       <button type="button" class="btn btn-info btn-flat"><i class="fa fa-align-right"></i></button>
1338                     </div>
1339                   </td>
1340                   <td>
1341                     <div class="btn-group-vertical">
1342                       <button type="button" class="btn btn-info">1</button>
1343                       <button type="button" class="btn btn-info">2</button>
1344
1345                       <div class="btn-group">
1346                         <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
1347                           <span class="caret"></span>
1348                         </button>
1349                         <ul class="dropdown-menu">
1350                           <li><a href="#">Dropdown link</a></li>
1351                           <li><a href="#">Dropdown link</a></li>
1352                         </ul>
1353                       </div>
1354                     </div>
1355                   </td>
1356                 </tr>
1357                 <!-- /. info -->
1358                 <!-- /.danger -->
1359                 <tr>
1360                   <td>
1361                     <div class="btn-group-vertical">
1362                       <button type="button" class="btn btn-danger">Top</button>
1363                       <button type="button" class="btn btn-danger">Middle</button>
1364                       <button type="button" class="btn btn-danger">Bottom</button>
1365                     </div>
1366                   </td>
1367                   <td>
1368                     <div class="btn-group-vertical">
1369                       <button type="button" class="btn btn-danger"><i class="fa fa-align-left"></i></button>
1370                       <button type="button" class="btn btn-danger"><i class="fa fa-align-center"></i></button>
1371                       <button type="button" class="btn btn-danger"><i class="fa fa-align-right"></i></button>
1372                     </div>
1373                   </td>
1374                   <td>
1375                     <div class="btn-group-vertical">
1376                       <button type="button" class="btn btn-danger btn-flat"><i class="fa fa-align-left"></i></button>
1377                       <button type="button" class="btn btn-danger btn-flat"><i class="fa fa-align-center"></i></button>
1378                       <button type="button" class="btn btn-danger btn-flat"><i class="fa fa-align-right"></i></button>
1379                     </div>
1380                   </td>
1381                   <td>
1382                     <div class="btn-group-vertical">
1383                       <button type="button" class="btn btn-danger">1</button>
1384                       <button type="button" class="btn btn-danger">2</button>
1385
1386                       <div class="btn-group">
1387                         <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
1388                           <span class="caret"></span>
1389                         </button>
1390                         <ul class="dropdown-menu">
1391                           <li><a href="#">Dropdown link</a></li>
1392                           <li><a href="#">Dropdown link</a></li>
1393                         </ul>
1394                       </div>
1395                     </div>
1396                   </td>
1397                 </tr>
1398                 <!-- /.danger -->
1399                 <!-- warning -->
1400                 <tr>
1401                   <td>
1402                     <div class="btn-group-vertical">
1403                       <button type="button" class="btn btn-warning">Top</button>
1404                       <button type="button" class="btn btn-warning">Middle</button>
1405                       <button type="button" class="btn btn-warning">Bottom</button>
1406                     </div>
1407                   </td>
1408                   <td>
1409                     <div class="btn-group-vertical">
1410                       <button type="button" class="btn btn-warning"><i class="fa fa-align-left"></i></button>
1411                       <button type="button" class="btn btn-warning"><i class="fa fa-align-center"></i></button>
1412                       <button type="button" class="btn btn-warning"><i class="fa fa-align-right"></i></button>
1413                     </div>
1414                   </td>
1415                   <td>
1416                     <div class="btn-group-vertical">
1417                       <button type="button" class="btn btn-warning btn-flat"><i class="fa fa-align-left"></i></button>
1418                       <button type="button" class="btn btn-warning btn-flat"><i class="fa fa-align-center"></i></button>
1419                       <button type="button" class="btn btn-warning btn-flat"><i class="fa fa-align-right"></i></button>
1420                     </div>
1421                   </td>
1422                   <td>
1423                     <div class="btn-group-vertical">
1424                       <button type="button" class="btn btn-warning">1</button>
1425                       <button type="button" class="btn btn-warning">2</button>
1426
1427                       <div class="btn-group">
1428                         <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
1429                           <span class="caret"></span>
1430                         </button>
1431                         <ul class="dropdown-menu">
1432                           <li><a href="#">Dropdown link</a></li>
1433                           <li><a href="#">Dropdown link</a></li>
1434                         </ul>
1435                       </div>
1436                     </div>
1437                   </td>
1438                 </tr>
1439                 <!-- /.warning -->
1440                 <!-- success -->
1441                 <tr>
1442                   <td>
1443                     <div class="btn-group-vertical">
1444                       <button type="button" class="btn btn-success">Top</button>
1445                       <button type="button" class="btn btn-success">Middle</button>
1446                       <button type="button" class="btn btn-success">Bottom</button>
1447                     </div>
1448                   </td>
1449                   <td>
1450                     <div class="btn-group-vertical">
1451                       <button type="button" class="btn btn-success"><i class="fa fa-align-left"></i></button>
1452                       <button type="button" class="btn btn-success"><i class="fa fa-align-center"></i></button>
1453                       <button type="button" class="btn btn-success"><i class="fa fa-align-right"></i></button>
1454                     </div>
1455                   </td>
1456                   <td>
1457                     <div class="btn-group-vertical">
1458                       <button type="button" class="btn btn-success btn-flat"><i class="fa fa-align-left"></i></button>
1459                       <button type="button" class="btn btn-success btn-flat"><i class="fa fa-align-center"></i></button>
1460                       <button type="button" class="btn btn-success btn-flat"><i class="fa fa-align-right"></i></button>
1461                     </div>
1462                   </td>
1463                   <td>
1464                     <div class="btn-group-vertical">
1465                       <button type="button" class="btn btn-success">1</button>
1466                       <button type="button" class="btn btn-success">2</button>
1467
1468                       <div class="btn-group">
1469                         <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
1470                           <span class="caret"></span>
1471                         </button>
1472                         <ul class="dropdown-menu">
1473                           <li><a href="#">Dropdown link</a></li>
1474                           <li><a href="#">Dropdown link</a></li>
1475                         </ul>
1476                       </div>
1477                     </div>
1478                   </td>
1479                 </tr>
1480                 <!-- /.success -->
1481               </table>
1482             </div>
1483             <!-- /.box-body -->
1484           </div>
1485           <!-- /.box -->
1486         </div>
1487         <!-- /.col -->
1488       </div>
1489       <!-- /. row -->
1490     </section>
1491     <!-- /.content -->
1492   </div>
1493   <!-- /.content-wrapper -->
1494   <footer class="main-footer">
1495     <div class="pull-right hidden-xs">
1496       <b>Version</b> 2.3.7
1497     </div>
1498     <strong>Copyright &copy; 2014-2016 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights
1499     reserved.
1500   </footer>
1501
1502   <!-- Control Sidebar -->
1503   <aside class="control-sidebar control-sidebar-dark">
1504     <!-- Create the tabs -->
1505     <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
1506       <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
1507
1508       <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
1509     </ul>
1510     <!-- Tab panes -->
1511     <div class="tab-content">
1512       <!-- Home tab content -->
1513       <div class="tab-pane" id="control-sidebar-home-tab">
1514         <h3 class="control-sidebar-heading">Recent Activity</h3>
1515         <ul class="control-sidebar-menu">
1516           <li>
1517             <a href="javascript:void(0)">
1518               <i class="menu-icon fa fa-birthday-cake bg-red"></i>
1519
1520               <div class="menu-info">
1521                 <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
1522
1523                 <p>Will be 23 on April 24th</p>
1524               </div>
1525             </a>
1526           </li>
1527           <li>
1528             <a href="javascript:void(0)">
1529               <i class="menu-icon fa fa-user bg-yellow"></i>
1530
1531               <div class="menu-info">
1532                 <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
1533
1534                 <p>New phone +1(800)555-1234</p>
1535               </div>
1536             </a>
1537           </li>
1538           <li>
1539             <a href="javascript:void(0)">
1540               <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
1541
1542               <div class="menu-info">
1543                 <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
1544
1545                 <p>nora@example.com</p>
1546               </div>
1547             </a>
1548           </li>
1549           <li>
1550             <a href="javascript:void(0)">
1551               <i class="menu-icon fa fa-file-code-o bg-green"></i>
1552
1553               <div class="menu-info">
1554                 <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
1555
1556                 <p>Execution time 5 seconds</p>
1557               </div>
1558             </a>
1559           </li>
1560         </ul>
1561         <!-- /.control-sidebar-menu -->
1562
1563         <h3 class="control-sidebar-heading">Tasks Progress</h3>
1564         <ul class="control-sidebar-menu">
1565           <li>
1566             <a href="javascript:void(0)">
1567               <h4 class="control-sidebar-subheading">
1568                 Custom Template Design
1569                 <span class="label label-danger pull-right">70%</span>
1570               </h4>
1571
1572               <div class="progress progress-xxs">
1573                 <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
1574               </div>
1575             </a>
1576           </li>
1577           <li>
1578             <a href="javascript:void(0)">
1579               <h4 class="control-sidebar-subheading">
1580                 Update Resume
1581                 <span class="label label-success pull-right">95%</span>
1582               </h4>
1583
1584               <div class="progress progress-xxs">
1585                 <div class="progress-bar progress-bar-success" style="width: 95%"></div>
1586               </div>
1587             </a>
1588           </li>
1589           <li>
1590             <a href="javascript:void(0)">
1591               <h4 class="control-sidebar-subheading">
1592                 Laravel Integration
1593                 <span class="label label-warning pull-right">50%</span>
1594               </h4>
1595
1596               <div class="progress progress-xxs">
1597                 <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
1598               </div>
1599             </a>
1600           </li>
1601           <li>
1602             <a href="javascript:void(0)">
1603               <h4 class="control-sidebar-subheading">
1604                 Back End Framework
1605                 <span class="label label-primary pull-right">68%</span>
1606               </h4>
1607
1608               <div class="progress progress-xxs">
1609                 <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
1610               </div>
1611             </a>
1612           </li>
1613         </ul>
1614         <!-- /.control-sidebar-menu -->
1615
1616       </div>
1617       <!-- /.tab-pane -->
1618       <!-- Stats tab content -->
1619       <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
1620       <!-- /.tab-pane -->
1621       <!-- Settings tab content -->
1622       <div class="tab-pane" id="control-sidebar-settings-tab">
1623         <form method="post">
1624           <h3 class="control-sidebar-heading">General Settings</h3>
1625
1626           <div class="form-group">
1627             <label class="control-sidebar-subheading">
1628               Report panel usage
1629               <input type="checkbox" class="pull-right" checked>
1630             </label>
1631
1632             <p>
1633               Some information about this general settings option
1634             </p>
1635           </div>
1636           <!-- /.form-group -->
1637
1638           <div class="form-group">
1639             <label class="control-sidebar-subheading">
1640               Allow mail redirect
1641               <input type="checkbox" class="pull-right" checked>
1642             </label>
1643
1644             <p>
1645               Other sets of options are available
1646             </p>
1647           </div>
1648           <!-- /.form-group -->
1649
1650           <div class="form-group">
1651             <label class="control-sidebar-subheading">
1652               Expose author name in posts
1653               <input type="checkbox" class="pull-right" checked>
1654             </label>
1655
1656             <p>
1657               Allow the user to show his name in blog posts
1658             </p>
1659           </div>
1660           <!-- /.form-group -->
1661
1662           <h3 class="control-sidebar-heading">Chat Settings</h3>
1663
1664           <div class="form-group">
1665             <label class="control-sidebar-subheading">
1666               Show me as online
1667               <input type="checkbox" class="pull-right" checked>
1668             </label>
1669           </div>
1670           <!-- /.form-group -->
1671
1672           <div class="form-group">
1673             <label class="control-sidebar-subheading">
1674               Turn off notifications
1675               <input type="checkbox" class="pull-right">
1676             </label>
1677           </div>
1678           <!-- /.form-group -->
1679
1680           <div class="form-group">
1681             <label class="control-sidebar-subheading">
1682               Delete chat history
1683               <a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
1684             </label>
1685           </div>
1686           <!-- /.form-group -->
1687         </form>
1688       </div>
1689       <!-- /.tab-pane -->
1690     </div>
1691   </aside>
1692   <!-- /.control-sidebar -->
1693   <!-- Add the sidebar's background. This div must be placed
1694        immediately after the control sidebar -->
1695   <div class="control-sidebar-bg"></div>
1696 </div>
1697 <!-- ./wrapper -->
1698
1699 <!-- jQuery 2.2.3 -->
1700 <script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>
1701 <!-- Bootstrap 3.3.6 -->
1702 <script src="../../bootstrap/js/bootstrap.min.js"></script>
1703 <!-- FastClick -->
1704 <script src="../../plugins/fastclick/fastclick.js"></script>
1705 <!-- AdminLTE App -->
1706 <script src="../../dist/js/app.min.js"></script>
1707 <!-- AdminLTE for demo purposes -->
1708 <script src="../../dist/js/demo.js"></script>
1709 </body>
1710 </html>