"ModalType Details"
Bootstrap 4.0.0 Snippet by episcore

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <!-- sample: https://help.ecatholic.com/article/222-tables --> <div class="container"> <h2>Modal Example</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <!-- h4 class="modal-title">Modal Header</h4 --> </div> <div class="modal-body"> <!-- card --> <article class="card"> <div class="card-body p-5"> <ul class="nav bg-light nav-pills rounded nav-fill mb-3" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="pill" href="#nav-tab-card"> <i class="fa fa-credit-card"></i> TypeName Details</a></li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#nav-tab-paypal"> <i class="fab fa-paypal"></i> Paypal</a></li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#nav-tab-bank"> <i class="fa fa-university"></i> Bank Transfer</a></li> </ul> <div class="tab-content"> <div class="tab-pane fade show active" id="nav-tab-card"> <p class="alert alert-success">Some text success or error</p> <form role="form"> <div class="form-group"> <label><span class="hidden-xs">Type</span> </label> <div class="form-inline"> <select class="form-control" style="width:45%"> <option> -- </option> <option>String</option> <option>Number</option> <option>Object</option> <option>Array</option> </select> </div> </div> <!-- form-group.// --> <div class="form-group"> <label for="description">Description</label> <input type="text" class="form-control" name="description" placeholder="" required=""> </div> <!-- form-group.// --> <div class="form-group"> <label for="example">Example</label> <input type="text" class="form-control" name="example" placeholder="" required=""> </div> <!-- form-group.// --> <button class="subscribe btn btn-secondary btn-block" type="button"> Cancel </button> <button class="subscribe btn btn-primary btn-block" type="button"> Confirm </button> </form> </div> <!-- tab-pane.// --> <div class="tab-pane fade" id="nav-tab-paypal"> <p>Paypal is easiest way to pay online</p> <p> <button type="button" class="btn btn-primary"> <i class="fab fa-paypal"></i> Log in my Paypal </button> </p> <p><strong>Note:</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> <div class="tab-pane fade" id="nav-tab-bank"> <p>Bank accaunt details</p> <dl class="param"> <dt>BANK: </dt> <dd> THE WORLD BANK</dd> </dl> <dl class="param"> <dt>Accaunt number: </dt> <dd> 12345678912345</dd> </dl> <dl class="param"> <dt>IBAN: </dt> <dd> 123456789</dd> </dl> <p><strong>Note:</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> <!-- tab-pane.// --> </div> <!-- tab-content .// --> </div> <!-- card-body.// --> </article> <!-- card.// --> </div> </div> </div> </div><!-- Modal --> </div> </body> </html>

Related: See More

Paper Bootstrap Wizard
Artists Details Listing
Product list with details in modal pop-up
Address Details Modal Form

Questions / Comments: