"Flutpy"
Bootstrap 4.1.1 Snippet by damifiles7

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> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../../../favicon.ico"> <title>Pay with Bank Transfer</title> <!-- Bootstrap core CSS --> <link href="../../css/editor.css" rel="stylesheet"> </head> <body style="margin-top: 200px; margin-bottom: 200px; margin-right: 200px;"> <div class="container"> <div class="card-deck mb-3 text-center"> <div class="card mb-4 box-shadow"> <div class="card-header"> <h4 class="my-0 font-weight-normal">Pay with Bank Transfer<br></h4> </div> <div class="card-body" style="background-color: rgb(254, 246, 233); padding-right:100px; padding-left:100px;"> <h4 class="card-title payment-card-title" style="font-weight: 700;">₦1290.00 <small class="text-muted">email@email.com</small><p class="checkout__container__option__body__paymentfield__instructions show-instruction ussd-instruction ussd-instruction--medium ussd-instruction--long text-center" style="margin-bottom: 60px; margin-top: 40px;">Please proceed to your banking app to complete this bank transfer.</p></h4> <ul class="list-unstyled mt-3 mb-4"> <li>Amount <span class="float-right" style="margin-right: 250px;">NGN 5000</span></li> <li><hr style="">Account Number <span class="float-right" style="margin-right: 250px;">8213450989</span></li> <li><hr style="">Bank name <span class="float-right" style="margin-right: 250px;">Wema</span></li> <li style="margin-bottom: 50px;"><hr>Beneficiary Name<span class="float-right" style="margin-right: 250px;">Odogwu</span></li> </ul> <button type="button" class="btn btn-lg btn-block btn-outline-primary banktransfer-confirm button" style="background-color: rgb(245, 166, 35); color: rgb(254, 246, 233);" onMouseOver="this.style.backgroundColor='#f5ba23'" onMouseOut="this.style.backgroundColor='#f5a623'">I have made this bank transfer</button> <div class="notice-message-section" style="position:relative;margin:20px auto;"> <h6><em>* The account details is only valid for this specific transaction.</em></h6> </div> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="../../js/vendor/popper.min.js"></script> <script src="../../js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/holderjs@2.9.4/holder.js"></script> <script> Holder.addTheme('thumb', { bg: '#55595c', fg: '#eceeef', text: 'Thumbnail' }); </script> </div></div></div></div></div></body> </html>

Related: See More

Vue Argon Design System

Questions / Comments: