"Untitled"
Bootstrap 4.1.1 Snippet by vince1johnson

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../../../favicon.ico"> <title>Album example for Bootstrap</title> <!-- Bootstrap core CSS --> <link href="../../css/editor.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="album.css" rel="stylesheet"> </head> <body> <header> <div class="collapse bg-dark" id="navbarHeader"> <div class="container"> <div class="row"> <div class="col-sm-8 col-md-7 py-4"> <h4 class="text-white">User Dashboard</h4> <p class="text-muted">Add some information about the aUser Dashboard here</p> </div> <div class="col-sm-4 offset-md-1 py-4"> <h4 class="text-white">Log Out</h4> <ul class="list-unstyled"> <li><a href="#" class="text-white">User Guides, FAQ and Forms</a></li> <li><a href="#" class="text-white">Contact</a></li> <li><a href="#" class="text-white">About</a></li> </ul> </div> </div> </div> </div> <div class="navbar navbar-dark bg-dark box-shadow"> <div class="container d-flex justify-content-between"> <a href="#" class="navbar-brand d-flex align-items-center"> <strong>User Dashboard</strong> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </div> </div> </header> <main role="main"> <section class="jumbotron text-center"> <div class="container"> <p class="lead text-muted">Common Access Registration User Dashboard</p> <p> <a href="#" class="btn btn-primary my-2 btn-lg">Create New Request</a> </p> </div> <ul class="list-group" style=""> </ul></section> <div class="album py-5 bg-light"><div class="container" style=""></div> <div class="container"> <div class="row"> <div class=" col-md-12 col-lg-12"> <div class="card mb-4 box-shadow"> <div class="card-body"> <p class="card-text"></p><h4 style="">My Accounts<div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> </div> </div> <div class="container" style="padding-right: 0px; line-height: 20px; text-align: left; font-family: Arial, Helvetica, sans-serif;"> <div class="m-5"> <div class="row" style=""> <div class="col-sm-4"><h5 style="margin-top: 12px;">FirstName.Lastname.SA</h5></div> <div class="col-sm-2 col-md-2 col-lg-2"> <h5 style="color: rgb(25, 163, 15); margin-top: 12px;">Enabled</h5> </div> <div class=" col-sm-6 col-md-6 col-lg-6"> <a href="#" class="btn btn-secondary my-2 btn-sm btn-outline disabled">Enable</a> <a href="#" class="btn btn-secondary my-2 btn-sm" style="margin-right: 3px;">Change Password</a> <a href="#" class="btn btn-secondary btn-sm btn-primary" style="margin-right: 3px;">View Associated Roles</a> </div> </div> <div class="row"> <div class="col-sm-4"> <h5 style="margin-top: 12px;">1234567890.civ</h5></div> <div class="col-sm-2 col-md-2 col-lg-2"> <h5 style="color: rgb(255, 0, 0); margin-top: 12px;">Disabled</h5> </div> <div class=" col-sm-6 col-md-6 col-lg-6"> <a href="#" class="btn btn-secondary my-2 btn-sm btn-outline-success">Enable</a> <a href="#" class="btn btn-secondary my-2 btn-sm" style="margin-right: 3px;">Change Password</a> <a href="#" class="btn btn-secondary my-2 btn-sm" style="margin-right: 3px;">View Associated Roles</a> </div> </div> </div> </div> </h4> <h4><hr style="">Pending Requests:</h4> <table class="table" style=""> <thead> <tr> <th>System</th> <th>Role</th> <th>Review Step</th> </tr> </thead> <tbody> <tr> <td>GFEBS</td> <td>Linux Admin</td> <td>Information Owner</td> </tr> <tr> <td>GFEBS</td> <td>Windows Admin</td> <td>Supervisor</td> </tr> <tr> <td>18th ABC</td> <td>Linux Admin</td> <td>Security Officer</td> </tr> </tbody> </table><small class="text-muted" style="text-align: right; float: right;">Last Updated: 2021/08/21 10:05 AM</small> </div> </div> </div> <div class="d-flex justify-content-between align-items-center" style="float: right;"> </div> </div> </div> </div> </main> <footer class="text-muted"> <div class="container"> <p class="float-right"> <a href="#" style="color: rgb(255, 255, 255); margin-right: 5px;">508 Compliance</a> </p> <p style="text-align: center; background-color: rgb(26, 117, 41); color: rgb(255, 255, 255);">UNCLASSIFIED</p> </div> </footer> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="../../js/vendor/popper.min.js"></script> <script src="../../js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/holderjs@2.9.4/holder.js"></script> <svg xmlns="http://www.w3.org/2000/svg" width="348" height="225" viewBox="0 0 348 225" preserveAspectRatio="none" style="display: none; visibility: hidden; position: absolute; top: -100%; left: -100%;"><defs><style type="text/css"></style></defs><text x="0" y="17" style="font-weight:bold;font-size:17pt;font-family:Arial, Helvetica, Open Sans, sans-serif">Thumbnail</text></svg></body> </html>

Related: See More

Light Bootstrap Dashboard Pro Angular

Questions / Comments: