API tools faq
paste
oyazhuryachna

dashboard_bootstrap

oyazhuryachna
Mar 9th, 2020
326
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 6.74 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6.     <meta name="description" content="">
  7.     <meta name="author" content="">
  8.     <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">
  9.  
  10.     <title>Dashboard Template for Bootstrap</title>
  11.  
  12.  
  13.     <!-- Bootstrap core CSS -->
  14.     <link href="/css/bootstrap.min.css" rel="stylesheet">
  15.  
  16.     <!-- Custom styles for this template -->
  17.     <link href="/css/dashboard.css" rel="stylesheet">
  18.   </head>
  19.  
  20.   <body>
  21.     <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
  22.       <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a>
  23.       <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
  24.       <ul class="navbar-nav px-3">
  25.         <li class="nav-item text-nowrap">
  26.           <a class="nav-link" href="#">Sign out</a>
  27.         </li>
  28.       </ul>
  29.     </nav>
  30.  
  31.     <div class="container-fluid">
  32.       <div class="row">
  33.         <nav class="col-md-2 d-none d-md-block bg-light sidebar">
  34.           <div class="sidebar-sticky">
  35.             <ul class="nav flex-column">
  36.               <li class="nav-item">
  37.                 <a class="nav-link active" href="#">
  38.                   <span data-feather="home"></span>
  39.                   Dashboard <span class="sr-only">(current)</span>
  40.                 </a>
  41.               </li>
  42.               <li class="nav-item">
  43.                 <a class="nav-link" href="#">
  44.                   <span data-feather="file"></span>
  45.                   Orders
  46.                 </a>
  47.               </li>
  48.               <li class="nav-item">
  49.                 <a class="nav-link" href="#">
  50.                   <span data-feather="shopping-cart"></span>
  51.                   Products
  52.                 </a>
  53.               </li>
  54.               <li class="nav-item">
  55.                 <a class="nav-link" href="#">
  56.                   <span data-feather="users"></span>
  57.                   Customers
  58.                 </a>
  59.               </li>
  60.               <li class="nav-item">
  61.                 <a class="nav-link" href="#">
  62.                   <span data-feather="bar-chart-2"></span>
  63.                   Reports
  64.                 </a>
  65.               </li>
  66.               <li class="nav-item">
  67.                 <a class="nav-link" href="#">
  68.                   <span data-feather="layers"></span>
  69.                   Integrations
  70.                 </a>
  71.               </li>
  72.             </ul>
  73.  
  74.             <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
  75.               <span>Saved reports</span>
  76.               <a class="d-flex align-items-center text-muted" href="#">
  77.                 <span data-feather="plus-circle"></span>
  78.               </a>
  79.             </h6>
  80.             <ul class="nav flex-column mb-2">
  81.               <li class="nav-item">
  82.                 <a class="nav-link" href="#">
  83.                   <span data-feather="file-text"></span>
  84.                   Current month
  85.                 </a>
  86.               </li>
  87.               <li class="nav-item">
  88.                 <a class="nav-link" href="#">
  89.                   <span data-feather="file-text"></span>
  90.                   Last quarter
  91.                 </a>
  92.               </li>
  93.               <li class="nav-item">
  94.                 <a class="nav-link" href="#">
  95.                   <span data-feather="file-text"></span>
  96.                   Social engagement
  97.                 </a>
  98.               </li>
  99.               <li class="nav-item">
  100.                 <a class="nav-link" href="#">
  101.                   <span data-feather="file-text"></span>
  102.                   Year-end sale
  103.                 </a>
  104.               </li>
  105.             </ul>
  106.           </div>
  107.         </nav>
  108.  
  109.         <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
  110.           <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
  111.             <h1 class="h2">Dashboard</h1>
  112.           </div>
  113.  
  114.  
  115.           <h2>Section title</h2>
  116.           <div class="table-responsive">
  117.             <table class="table table-striped table-sm">
  118.               <thead>
  119.                 <tr>
  120.                   <th>#</th>
  121.                   <th>Header</th>
  122.                   <th>Header</th>
  123.                   <th>Header</th>
  124.                   <th>Header</th>
  125.                 </tr>
  126.               </thead>
  127.               <tbody>
  128.                 <tr>
  129.                   <td>1,001</td>
  130.                   <td>Lorem</td>
  131.                   <td>ipsum</td>
  132.                   <td>dolor</td>
  133.                   <td>sit</td>
  134.                 </tr>
  135.                 <tr>
  136.                   <td>1,002</td>
  137.                   <td>amet</td>
  138.                   <td>consectetur</td>
  139.                   <td>adipiscing</td>
  140.                   <td>elit</td>
  141.                 </tr>
  142.                 <tr>
  143.                   <td>1,003</td>
  144.                   <td>Integer</td>
  145.                   <td>nec</td>
  146.                   <td>odio</td>
  147.                   <td>Praesent</td>
  148.                 </tr>
  149.                 <tr>
  150.                   <td>1,003</td>
  151.                   <td>libero</td>
  152.                   <td>Sed</td>
  153.                   <td>cursus</td>
  154.                   <td>ante</td>
  155.                 </tr>
  156.                 <tr>
  157.                   <td>1,004</td>
  158.                   <td>dapibus</td>
  159.                   <td>diam</td>
  160.                   <td>Sed</td>
  161.                   <td>nisi</td>
  162.                 </tr>
  163.                 <tr>
  164.                   <td>1,005</td>
  165.                   <td>Nulla</td>
  166.                   <td>quis</td>
  167.                   <td>sem</td>
  168.                   <td>at</td>
  169.                 </tr>
  170.                 <tr>
  171.                   <td>1,006</td>
  172.                   <td>nibh</td>
  173.                   <td>elementum</td>
  174.                   <td>imperdiet</td>
  175.                   <td>Duis</td>
  176.                 </tr>
  177.               </tbody>
  178.             </table>
  179.           </div>
  180.         </main>
  181.       </div>
  182.     </div>
  183.  
  184.     <!-- Bootstrap core JavaScript
  185.    ================================================== -->
  186.     <!-- Placed at the end of the document so the pages load faster -->
  187.     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  188.     <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
  189.     <script src="/js/bootstrap.min.js"></script>
  190.  
  191.     <!-- Icons -->
  192.     <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
  193.     <script>
  194.       feather.replace()
  195.     </script>
  196.  
  197.  
  198.   </body>
  199. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!