"Untitled"
Bootstrap 4.1.1 Snippet by prabuanan

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> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="css/style.css"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <title>About</title> </head> <body> <!-- Begin page content --> <section> <!-- Begin page content --> <!-- Modal start --> <button type="button" class="btn btn-primary open_modal" data-toggle="modal" data-target="#myModal"> Open modal </button> <!-- The Modal --> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header bg-warning"> <h4 class="modal-title text-white header_title">Test Case Run</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> <div class="col-sm-12"> <div class="row border-bottom-1"> <div class="col-sm-6 p-0"> <div class="float-left tc_text"> <img src="images/leftarrow.png" class="leftarrow" /> <span>TC - 094</span> </div> </div> <div class="col-sm-6"> <div class="d-flex float-right"> <button class="btn btn-primary bg-transparent text-dark ex_btn"> <img src="images/ex.png" />End Execute </button> <p class="p_space"> <a href="#" class="status"> | Status <img src="images/status.png" /> </a></p> <p class="p_space"> <a href="#" class="info"> | <img src="images/info.png" /> Info </a></p> </div> </div> </div> </div> <!-- question start --> <div class="question_scroll"> <div class="container"> <p class="steps_goal">Seps Goals</p> <div class="row bg-grey-color"> <div class="col-sm-6"> <div class="questions"> <p>DEscription</p> <p>Verify user would alredady enterd blood</p> </div> </div> <div class="col-sm-6"> <div class="float-right"> <img src="images/grey.png" /> </div> </div> </div> <div class="row bg-grey-color"> <div class="col-sm-12"> <div class="questions"> <p>DEscription</p> <p>Verify user would alredady enterd blood</p> </div> </div> </div> <div class="row bg-grey-color"> <div class="col-sm-12"> <div class="questions"> <p>About</p> <p><textarea cols="100" rows="4"></textarea></p> </div> </div> </div> </div> <!-- question end --> <!-- question two start --> <div class="container"> <p class="steps_goal">Seps Goals</p> <div class="row bg-grey-color"> <div class="col-sm-6"> <div class="questions"> <p>DEscription</p> <p>Verify user would alredady enterd blood</p> </div> </div> <div class="col-sm-6"> <div class="float-right"> <img src="images/grey.png" /> </div> </div> </div> <div class="row bg-grey-color"> <div class="col-sm-12"> <div class="questions"> <p>DEscription</p> <p>Verify user would alredady enterd blood</p> </div> </div> </div> </div> <!-- question two end --> </div> <!-- Modal footer --> <div class="modal-footer"> <div class="col-sm-12 col-md-12 col-12 col-lg-12 p-0"> <div class="float-left"> <p class="total_res">Total Reslut</p> <div class="progress" id="progress"> <div class="progress-bar bg-success"> </div> <div class="progress-bar bg-warning"> </div> <div class="progress-bar bg-danger"> </div> </div> </div> <div class="float-right"> <button type="button" class="btn btn-primary save_changes" data-dismiss="modal">Save changes</button> </div> </div> </div> </div> </div> </div> </div> <!-- Modal end --> </section> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <style> </style> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
.header_title { font-size: 14px; line-height: 29px; } #myModal .modal-header { border-radius: 0px; } .open_modal { margin: auto; display: block; margin-top: 6%; } #myModal .modal-content { border-radius: 0px; } #myModal .modal-header .close { color: #fff; } .tc_text { font-size: 12px; } .questions p { margin-bottom: 0px; font-size: 12px; line-height: 21px; } .questions { margin-bottom: 4px; margin-top: 4px; } .steps_goal { font-size: 12px; margin-bottom: 10px; margin-top: 10px; } .leftarrow { width: 18px; margin-top: 8px; margin: 6px 3px; } .border-bottom-1 { border-bottom: 1px solid #eee; } .bg-grey-color { background-color: #eee; border-bottom: 1px solid #cfcaca; } .save_changes { font-size: 12px; padding: 1px 9px; } .progress { width: 328%; height: 12px; } #progress .bg-success , #progress .bg-warning, #progress .bg-danger { width: 82%; height: 12px; } .total_res { font-size: 12px; margin-bottom: 0px; } .ex_btn { font-size: 12px; border: 1px solid #eee; padding: 4px 8px; line-height: 17px; height: 28px; margin-right: 8px; margin-top: 5px; margin-bottom: 5px; } .ex_btn img { width: 12px; height: 12px; margin-right: 7px; } .status { color: #c5c1c1; font-size: 12px; margin: 0 7px; } .p_space { margin-bottom: 0px; line-height: 32px; } .status img { width: 25px; } .info { color: #c5c1c1; font-size: 12px; } /* width */ .question_scroll::-webkit-scrollbar { width: 10px; } /* Track */ .question_scroll::-webkit-scrollbar-track { background: #f1f1f1; } /* Handle */ .question_scroll::-webkit-scrollbar-thumb { background: rgb(184, 180, 180); } /* Handle on hover */ .question_scroll::-webkit-scrollbar-thumb:hover { background: #555; } .question_scroll { overflow: hidden; overflow-y: scroll; height: 353px; } .info img { width: 9px; } #myModal .modal-body { padding: 0; } @media (min-width: 576px) { .modal-dialog { max-width: 645px; margin: 1.75rem auto; } }

Related: See More

Material Dashboard React

Questions / Comments: