"LAVAN-FULL"
Bootstrap 4.1.1 Snippet by lavan

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> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>SB Admin 2 - Blank</title> <!-- Custom fonts for this template--> <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> <!-- Custom styles for this template--> <link href="css/sb-admin-2.min.css" rel="stylesheet"> <link href="vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet"> <style> @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400); .font-roboto { font-family: 'roboto condensed'; } * { box-sizing: border-box; } .modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; } .modal-dialog { position: fixed; margin: 0; width: 100%; height: 100%; padding: 0; } .modal-content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 2px solid #3c7dcf; border-radius: 0; box-shadow: none; } .modal-header { position: absolute; top: 0; right: 0; left: 0; padding: 3px; background: #6598d9; border: 0; font-size: 12px; text-align: center; border-top-left-radius: 0px; border-top-right-radius: 0px; } .modal-title { font-weight: 300; font-size: 2em; color: #fff; line-height: 30px; } .modal-body { position: absolute; top: 50px; bottom: 60px; width: 100%; font-weight: 300; overflow: auto; padding: 0px; } .modal-footer { position: absolute; right: 0; bottom: 0; left: 0; height: 60px; padding: 10px; background: #f1f3f5; } .btn-modal { position: absolute; top: 6px; right: 6px; width: auto; } ::-webkit-scrollbar { -webkit-appearance: none; width: 10px; background: #f1f3f5; border-left: 1px solid darken(#f1f3f5, 10%); } ::-webkit-scrollbar-thumb { background: darken(#f1f3f5, 20%); } .button{ float: right; position: absolute; top: 6px; right: 6px; } </style> </head> <body id="page-top"> <!-- Page Wrapper --> <div id="wrapper"> <!-- Content Wrapper --> <div id="content-wrapper" class="d-flex flex-column"> <!-- Main Content --> <div id="content"> <!-- Begin Page Content --> <div class="container-fluid"> <!-- DataTales Example --> <div class="card shadow mb-4"> <div class="card-header py-3"> <h6 class="m-0 font-weight-bold text-primary">User Subscription Plans</h6> <a href="#" class="btn btn-success button btn-icon-split" data-toggle="modal" data-target="#fsModal"> <span class="icon text-white-50"> <i class="fas fa-plus fa-fw"></i> </span> <span class="text">New User Plan</span> </a> <!-- view modal --> <!-- modal --> <div id="fsModal" class="modal animated bounceIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <!-- dialog --> <div class="modal-dialog"> <!-- content --> <div class="modal-content"> <!-- header --> <div class="modal-header"> <h1 id="myModalLabel" class="modal-title"> Add New User Subscription </h1> </div> <!-- header --> <!-- body --> <div class="modal-body"> <div class="row col-md-12"> <div class="form-group bs-float-label col-md-6"> <label class="control-label">User Name</label> <input type="text" class="form-control" placeholder="User Name" required=""> </div> <div class="form-group bs-float-label col-md-6"> <label class="control-label">User ID</label> <input type="text" class="form-control" placeholder="User ID" required=""> </div> <div class="form-group bs-float-label col-md-6"> <label class="control-label">Device ID</label> <input type="text" class="form-control" placeholder="Device ID" required=""> </div> <div class="form-group bs-float-label col-md-6"> <label class="control-label">Subscription Plan</label> <select class="form-control"> <option>1</option> <option>3</option> <option>6</option> <option>1</option> </select> </div> <div class="form-group bs-float-label col-md-6"> <label class="control-label">Starting Date</label> <input type="text" class="form-control" placeholder="Starting Date" required=""> </div> <div class="form-group bs-float-label col-md-6"> <label class="control-label">Ending Date</label> <input type="text" class="form-control" placeholder="Ending Date" required=""> </div> </div> </div> <!-- body --> <!-- footer --> <div class="modal-footer"> <button class="btn btn-success"> Save </button> <button class="btn btn-danger" data-dismiss="modal">close</button> </div> <!-- footer --> </div> <!-- content --> </div> <!-- dialog --> </div> <!-- modal --> </div> <div class="card-body"> <div class="table-responsive"> <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0"> <thead> <tr> <th>User Name</th> <th>User Id</th> <th>Device Id</th> <th>Subscription Plan</th> <th>Starting Date</th> <th>Ending Date</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td> <a href="#" class="btn btn-warning btn-circle btn-sm"> <i class="fa fa-pen"></i> </a> <a href="#" class="btn btn-danger btn-circle btn-sm"> <i class="fas fa-trash"></i> </a> </td> </tr> </tbody> </table> </div> </div> </div> </div> <!-- /.container-fluid --> </div> <!-- End of Main Content --> <!-- Footer --> <footer class="sticky-footer bg-white"> <div class="container my-auto"> <div class="copyright text-center my-auto"> <span>Copyright © Your Website 2019</span> </div> </div> </footer> <!-- End of Footer --> </div> <!-- End of Content Wrapper --> </div> <!-- End of Page Wrapper --> <!-- Scroll to Top Button--> <a class="scroll-to-top rounded" href="#page-top"> <i class="fas fa-angle-up"></i> </a> <!-- Logout Modal--> <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5> <button class="close" type="button" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div> <div class="modal-footer"> <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button> <a class="btn btn-primary" href="login.html">Logout</a> </div> </div> </div> </div> <!-- Bootstrap core JavaScript--> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <!-- Core plugin JavaScript--> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <script src="vendor/datatables/jquery.dataTables.min.js"></script> <script src="vendor/datatables/dataTables.bootstrap4.min.js"></script> <script src="js/demo/datatables-demo.js"></script> <!-- Custom scripts for all pages--> <script src="js/sb-admin-2.min.js"></script> </body> </html>

Questions / Comments: