Bootstrap 5 payment gateway template snippets

Forms Bootstrap 5Free+ CSS

Bootstrap 5 payment gateway template snippets: a hand-crafted, open-source Bootstrap 5 form. HTML & CSS included, ready to copy.

12.1k views198 downloads5 years ago

gosnippets.com/preview/bootstrap-5-payment-gateway-template-snippets

Source Code

1<div class="container mt-5 d-flex justify-content-center">
2    <div class="card p-4">
3        <div class="d-flex justify-content-between align-items-center">
4            <h5 class="total-amount">Total amount</h5>
5            <div class="amount-container"><span class="amount-text"><span class="dollar-sign">$</span>375</span></div>
6        </div>
7        <div class="pt-4"> <label class="d-flex justify-content-between"> <span class="label-text label-text-cc-number">CARD NUMBER</span><img src="https://img.icons8.com/dusk/64/000000/visa.png" width="30" class="visa-icon" /></label> <input type="tel" name="credit-number" class="form-control credit-card-number" maxlength="19" placeholder="Card number"> </div>
8        <div class="d-flex justify-content-between pt-4">
9            <div> <label><span class="label-text">EXPIRY</span> </label> <input type="date" name="expiry-date" class="form-control expiry-class" placeholder="MM / YY"> </div>
10            <div> <label><span class="label-text">CVV</span></label> <input type="tel" name="cvv-number" class="form-control cvv-class" maxlength="4" pattern="\d*"> </div>
11        </div>
12        <div class="d-flex justify-content-between pt-5 align-items-center"> <button type="button" class="btn cancel-btn">Cancel</button> <button type="button" class="btn payment-btn">Make Payment</button> </div>
13    </div>
14</div>

More Forms snippets

Bootstrap 5 simple login form with social login

Free Bootstrap 5 form snippet — Bootstrap 5 simple login form with social login. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

FormsView →

Bootstrap 5 Login Form UI Design snippets

Bootstrap 5 Login Form UI Design snippets: a hand-crafted, open-source Bootstrap 5 form. HTML & CSS included, ready to copy.

FormsView →

Bootstrap 5 Fancy user login form snippets

Free Bootstrap 5 form snippet — Bootstrap 5 Fancy user login form snippets. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

FormsView →

Comments(0)

No comments yet — be the first to start the discussion.

1<div class="container mt-5 d-flex justify-content-center"> 2 <div class="card p-4"> 3 <div class="d-flex justify-content-between align-items-center"> 4 <h5 class="total-amount">Total amount</h5> 5 <div class="amount-container"><span class="amount-text"><span class="dollar-sign">$</span>375</span></div> 6 </div> 7 <div class="pt-4"> <label class="d-flex justify-content-between"> <span class="label-text label-text-cc-number">CARD NUMBER</span><img src="https://img.icons8.com/dusk/64/000000/visa.png" width="30" class="visa-icon" /></label> <input type="tel" name="credit-number" class="form-control credit-card-number" maxlength="19" placeholder="Card number"> </div> 8 <div class="d-flex justify-content-between pt-4"> 9 <div> <label><span class="label-text">EXPIRY</span> </label> <input type="date" name="expiry-date" class="form-control expiry-class" placeholder="MM / YY"> </div> 10 <div> <label><span class="label-text">CVV</span></label> <input type="tel" name="cvv-number" class="form-control cvv-class" maxlength="4" pattern="\d*"> </div> 11 </div> 12 <div class="d-flex justify-content-between pt-5 align-items-center"> <button type="button" class="btn cancel-btn">Cancel</button> <button type="button" class="btn payment-btn">Make Payment</button> </div> 13 </div> 14</div>