<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 ----------> <div class="container"> <div class="card-body"> <button style="height:40px; margin:0px 0px 10px 0px;" type="button" class="btn btn-success" data-toggle="modal" data-target="#adduser" ><img src="img/logo/plus.png" style="height:20px;">│Add User </button> <button style="height:40px; margin:0px 0px 10px 0px;" type="button" class="btn btn-warning" ><img src="img/logo/black-print.png" style="height:20px;" >│Print</button> <table class="table"> <thead class="thead-dark"> <tr> <th scope="col">#</th> <th scope="col">Name</th> <th scope="col">Mission</th> <th scope="col">Options</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Computer Enginer</td> <td><button style="height:40px;" type="button" class="btn btn-danger"><img src="img/logo/trash.png" style="height:20px;" ></button></td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Computer Enginer</td> <td><button style="height:40px;" type="button" class="btn btn-danger"><img src="img/logo/trash.png" style="height:20px;" ></button></td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>Computer Enginer</td> <td><button style="height:40px;" type="button" class="btn btn-danger"><img src="img/logo/trash.png" style="height:20px;" ></button> </td> </tr> </tbody> </table> </div> <!--Modal--> <div class="modal fade" id="adduser" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="staticBackdropLabel">Add A User</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="row"> <div class="input-group input-group-sm mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-sm">User Name</span> </div> <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm"> </div> <div class="input-group input-group-sm mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-sm"> User Mission</span> </div> <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm"> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-success" data-toggle="modal" data-target="#error">Save a changes</button> </div> </div> </div> </div>