"Scenario UI"
Bootstrap 3.3.0 Snippet by bswarrior

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> </head> <body> <h1>Scenarios</h1> <!-- Table --> <table class="table"> <thead> <tr> <th>Product</th> <th>Scenario</th> <th>Servicability</th> <th> </th> </tr> </thead> <tbody> <tr> <td>Ultimate Home Loan</td> <td> <div class="row"> <div class="col-sm-3"> <div class="input-group" > <input type="text" class="form-control" placeholder="Assets" > <span class="input-group-btn"> <button class="btn btn-default" type="button" data-toggle="modal" data-target="#assetsModal"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></button> </span> </div> </div> <div class="col-sm-3"> <div class="input-group"> <input type="text" class="form-control" placeholder="Liabilities"> <span class="input-group-btn"> <button class="btn btn-default" type="button" data-toggle="modal" data-target="#liabilitiesModal"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></button> </span> </div> </div> <div class="col-sm-3"> <div class="input-group"> <input type="text" class="form-control" placeholder="Income"> <span class="input-group-btn"> <button class="btn btn-default" type="button" data-toggle="modal" data-target="#incomeModal"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></button> </span> </div> </div> <div class="col-sm-3"> <div class="input-group"> <input type="text" class="form-control" placeholder="Expenses"> <span class="input-group-btn"> <button class="btn btn-default" type="button" data-toggle="modal" data-target="#expensesModal"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></button> </span> </div> </div> </div> </td> <td> <button class="btn btn-success" type="button"> NSR <span class="badge">40%</span> </button> <button class="btn btn-success" type="button"> LVR <span class="badge">30%</span> </button> </td> <td> <button class="btn btn-default" type="button" data-toggle="modal" data-target="#commentModal"><i class="fa fa-comment-o" aria-hidden="true"></i></button> <button class="btn btn-default" type="button"><i class="fa fa-trash-o" aria-hidden="true"></i></button></td> </tr> <tr> <td>Ultimate Home Loan</td> <td> <div class="row"> <div class="col-sm-3"> <div class="input-group" > <input type="text" class="form-control" placeholder="Assets" > <span class="input-group-btn"> <button class="btn btn-default" type="button" data-toggle="modal" data-target="#assetsModal"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></button> </span> </div> </div> <div class="col-sm-3"> <div class="input-group"> <input type="text" class="form-control" placeholder="Liabilities"> <span class="input-group-btn"> <button class="btn btn-default" type="button" data-toggle="modal" data-target="#liabilitiesModal"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></button> </span> </div> </div> <div class="col-sm-3"> <div class="input-group"> <input type="text" class="form-control" placeholder="Income"> <span class="input-group-btn"> <button class="btn btn-default" type="button" data-toggle="modal" data-target="#incomeModal"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></button> </span> </div> </div> <div class="col-sm-3"> <div class="input-group"> <input type="text" class="form-control" placeholder="Expenses"> <span class="input-group-btn"> <button class="btn btn-default" type="button" data-toggle="modal" data-target="#expensesModal"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></button> </span> </div> </div> </div> </td> <td> <button class="btn btn-warning" type="button"> NSR <span class="badge">75%</span> </button> <button class="btn btn-danger" type="button"> LVR <span class="badge">82%</span> </button> </td> <td> <button class="btn btn-default" type="button" data-toggle="modal" data-target="#commentModal"><i class="fa fa-comment-o" aria-hidden="true"></i></button> <button class="btn btn-default" type="button"><i class="fa fa-trash-o" aria-hidden="true"></i></button></td> </tr> </tbody> </table> <div class="row"> <div class="col-xs-12"> <button class="btn btn-default pull-right" type="button" data-toggle="modal" data-target="#scenarioModal">Add Scenario <i class="fa fa-plus" aria-hidden="true"></i></button> </div> </div> <!-- Modal --> <div class="modal fade" id="assetsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Edit Assets</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Update</button> </div> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="liabilitiesModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Edit Liabilities</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Update</button> </div> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="incomeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Edit Income</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Update</button> </div> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="expensesModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Edit Expenses</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Update</button> </div> </div> </div> </div> <div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Edit Comments</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Update</button> </div> </div> </div> </div> <div class="modal fade" id="scenarioModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">New Scenario</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save</button> </div> </div> </div> </div> </body> </html>
body { margin: 15px; } .input-group { width: 130px; }

Related: See More

Vue Argon Design System

Questions / Comments: