Payment Forms

Bootstrap 5 Payment Forms

Responsive Payment Forms built with the latest Bootstrap 5. Credit card, PayPal, Stripe, eCommerce checkout, multi-step payment, donation form & more examples.

Basic example

Multi-step checkout template with discount details, order details, tax information and credit card form with switchable option.

$85.00
Diabites Pump & Supplies
Insurance Responsibility
$71.76
Add Insurer card

Insurance claim and all neccessary dependencies will be submitted to your insurer for the covered portion of this order.

Aetna - Open Access Aetna - OAP

Patient Balance
$13.24
Add Payment card

Insurance claim and all neccessary dependencies will be submitted to your insurer for the covered portion of this order.

Proceed to payment
Order Recap
contracted Price $186.86
Amount Deductible $0.0
Coinsurance(0%) + $0.0
Copayment + 40.00

Total Deductible,
Coinsurance and copay
$40.00
Maximum out-of-pocket
on insurance policy
$40.00

Insurance Responsibility $71.76
Patient Balance $13.24

Total $85.00
        
            
          <section>
            <div class="d-flex justify-content-between align-items-center mb-5">
              <div class="d-flex flex-row align-items-center">
                <h4 class="text-uppercase mt-1">Eligible</h4>
                <span class="ms-2 me-3">Pay</span>
              </div>
              <a href="#!">Cancel and return to the website</a>
            </div>

            <div class="row">
              <div class="col-md-7 col-lg-7 col-xl-6 mb-4 mb-md-0">
                <h5 class="mb-0 text-success">$85.00</h5>
                <h5 class="mb-3">Diabites Pump & Supplies</h5>
                <div>
                  <div class="d-flex justify-content-between">
                    <div class="d-flex flex-row mt-1">
                      <h6>Insurance Responsibility</h6>
                      <h6 class="fw-bold text-success ms-1">$71.76</h6>
                    </div>
                    <div class="d-flex flex-row align-items-center text-primary">
                      <span class="ms-1">Add Insurer card</span>
                    </div>
                  </div>
                  <p>
                    Insurance claim and all neccessary dependencies will be submitted to your
                    insurer for the covered portion of this order.
                  </p>
                  <div class="p-2 d-flex justify-content-between align-items-center" style="background-color: #eee;">
                    <span>Aetna - Open Access</span>
                    <span>Aetna - OAP</span>
                  </div>
                  <hr />
                  <div class="d-flex justify-content-between align-items-center">
                    <div class="d-flex flex-row mt-1">
                      <h6>Patient Balance</h6>
                      <h6 class="fw-bold text-success ms-1">$13.24</h6>
                    </div>
                    <div class="d-flex flex-row align-items-center text-primary">
                      <span class="ms-1">Add Payment card</span>
                    </div>
                  </div>
                  <p>
                    Insurance claim and all neccessary dependencies will be submitted to your
                    insurer for the covered portion of this order.
                  </p>
                  <div class="d-flex flex-column mb-3">
                    <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
                      <input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" />
                      <label class="btn btn-outline-primary btn-lg" for="option1">
                        <div class="d-flex justify-content-between">
                          <span>VISA </span>
                          <span>**** 5436</span>
                        </div>
                      </label>

                      <input type="radio" class="btn-check" name="options" id="option2" autocomplete="off" checked />
                      <label class="btn btn-outline-primary btn-lg" for="option2">
                        <div class="d-flex justify-content-between">
                          <span>MASTER CARD </span>
                          <span>**** 5038</span>
                        </div>
                      </label>
                    </div>
                  </div>
                  <div class="btn btn-success btn-lg btn-block">Proceed to payment</div>
                </div>
              </div>
              <div class="col-md-5 col-lg-4 col-xl-4 offset-lg-1 offset-xl-2">
                <div class="p-3" style="background-color: #eee;">
                  <span class="fw-bold">Order Recap</span>
                  <div class="d-flex justify-content-between mt-2">
                    <span>contracted Price</span> <span>$186.86</span>
                  </div>
                  <div class="d-flex justify-content-between mt-2">
                    <span>Amount Deductible</span> <span>$0.0</span>
                  </div>
                  <div class="d-flex justify-content-between mt-2">
                    <span>Coinsurance(0%)</span> <span>+ $0.0</span>
                  </div>
                  <div class="d-flex justify-content-between mt-2">
                    <span>Copayment </span> <span>+ 40.00</span>
                  </div>
                  <hr />
                  <div class="d-flex justify-content-between mt-2">
                    <span class="lh-sm">Total Deductible,<br />
                      Coinsurance and copay
                    </span>
                    <span>$40.00</span>
                  </div>
                  <div class="d-flex justify-content-between mt-2">
                    <span class="lh-sm">Maximum out-of-pocket <br />
                      on insurance policy</span>
                    <span>$40.00</span>
                  </div>
                  <hr />
                  <div class="d-flex justify-content-between mt-2">
                    <span>Insurance Responsibility </span> <span>$71.76</span>
                  </div>
                  <div class="d-flex justify-content-between mt-2">
                    <span>Patient Balance </span> <span>$13.24</span>
                  </div>
                  <hr />
                  <div class="d-flex justify-content-between mt-2">
                    <span>Total </span> <span class="text-success">$85.00</span>
                  </div>
                </div>
              </div>
            </div>
          </section>
          
        
    
        
            
          .btn-group-vertical>.btn:not(:first-child),
          .btn-group-vertical>.btn-group:not(:first-child) {
          margin-top: 0;
          }
          
        
    

Ecommerce checkout page

A variation of a checkout page template - using radio buttons for debit card choice, and highlighting crucial payment information with different typography and icons.

ELIGIBLE |
Pay

$85.00

Diabetes Pump & Supplies

Insurance Responsibility $71.76

Add insurance card

Insurance claims and all necessary dependencies will be submitted to your insurer for the coverred portion of this order

Aetna-Open Access
OAP

Patient Balance $13.24

Add payment card

This is an estimate for the portion of your order (not covered by insurance) due today . once insurance finalizes their review refunds and/or balances will reconcile automatically.

Visa Debit Card

************3456

Mastercard Office

************1038

Order Recap

Contracted Price
$186.76
Amount toward deductible
$0.00
Coinsurance( 0% )
+ $0.00
Copayment
+ $40.00
Total Deductible, Coinsurance, and Copay
$40.00
Maximum out-of-pocket on Insurance Policy (not reached)
$6500.00
Insurance Responsibility
$71.76
Patient Balance
$71.76
Total
$85.00
        
            
          <section style="background-color: #eee;">
            <div class="container py-5">
              <div class="card">
                <div class="card-body">
                  <div class="row d-flex justify-content-center pb-5">
                    <div class="col-md-7 col-xl-5 mb-4 mb-md-0">
                      <div class="py-4 d-flex flex-row">
                        <h5><span class="far fa-check-square pe-2"></span><b>ELIGIBLE</b> |</h5>
                        <span class="ps-2">Pay</span>
                      </div>
                      <h4 class="text-success">$85.00</h4>
                      <h4>Diabetes Pump & Supplies</h4>
                      <div class="d-flex pt-2">
                        <div>
                          <p>
                            <b>Insurance Responsibility <span class="text-success">$71.76</span></b>
                          </p>
                        </div>
                        <div class="ms-auto">
                          <p class="text-primary">
                            <i class="fas fa-plus-circle text-primary pe-1"></i>Add insurance card
                          </p>
                        </div>
                      </div>
                      <p>
                        Insurance claims and all necessary dependencies will be submitted to your
                        insurer for the coverred portion of this order
                      </p>
                      <div class="rounded d-flex" style="background-color: #f8f9fa;">
                        <div class="p-2">Aetna-Open Access</div>
                        <div class="ms-auto p-2">OAP</div>
                      </div>
                      <hr />
                      <div class="pt-2">
                        <div class="d-flex pb-2">
                          <div>
                            <p>
                              <b>Patient Balance <span class="text-success">$13.24</span></b>
                            </p>
                          </div>
                          <div class="ms-auto">
                            <p class="text-primary">
                              <i class="fas fa-plus-circle text-primary pe-1"></i>Add payment card
                            </p>
                          </div>
                        </div>
                        <p>
                          This is an estimate for the portion of your order (not covered by
                          insurance) due today . once insurance finalizes their review refunds
                          and/or balances will reconcile automatically.
                        </p>
                        <form class="pb-3">
                          <div class="d-flex flex-row pb-3">
                            <div class="d-flex align-items-center pe-2">
                              <input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1"
                                value="" aria-label="..." checked />
                            </div>
                            <div class="rounded border d-flex w-100 p-3 align-items-center">
                              <p class="mb-0">
                                <i class="fab fa-cc-visa fa-lg text-primary pe-2"></i>Visa Debit
                                Card
                              </p>
                              <div class="ms-auto">************3456</div>
                            </div>
                          </div>

                          <div class="d-flex flex-row">
                            <div class="d-flex align-items-center pe-2">
                              <input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel2"
                                value="" aria-label="..." />
                            </div>
                            <div class="rounded border d-flex w-100 p-3 align-items-center">
                              <p class="mb-0">
                                <i class="fab fa-cc-mastercard fa-lg text-dark pe-2"></i>Mastercard
                                Office
                              </p>
                              <div class="ms-auto">************1038</div>
                            </div>
                          </div>
                        </form>
                        <input type="button" value="Proceed to payment" class="btn btn-primary btn-block btn-lg" />
                      </div>
                    </div>

                    <div class="col-md-5 col-xl-4 offset-xl-1">
                      <div class="py-4 d-flex justify-content-end">
                        <h6><a href="#!">Cancel and return to website</a></h6>
                      </div>
                      <div class="rounded d-flex flex-column p-2" style="background-color: #f8f9fa;">
                        <div class="p-2 me-3">
                          <h4>Order Recap</h4>
                        </div>
                        <div class="p-2 d-flex">
                          <div class="col-8">Contracted Price</div>
                          <div class="ms-auto">$186.76</div>
                        </div>
                        <div class="p-2 d-flex">
                          <div class="col-8">Amount toward deductible</div>
                          <div class="ms-auto">$0.00</div>
                        </div>
                        <div class="p-2 d-flex">
                          <div class="col-8">Coinsurance( 0% )</div>
                          <div class="ms-auto">+ $0.00</div>
                        </div>
                        <div class="p-2 d-flex">
                          <div class="col-8">Copayment</div>
                          <div class="ms-auto">+ $40.00</div>
                        </div>
                        <div class="border-top px-2 mx-2"></div>
                        <div class="p-2 d-flex pt-3">
                          <div class="col-8">Total Deductible, Coinsurance, and Copay</div>
                          <div class="ms-auto">$40.00</div>
                        </div>
                        <div class="p-2 d-flex">
                          <div class="col-8">
                            Maximum out-of-pocket on Insurance Policy (not reached)
                          </div>
                          <div class="ms-auto">$6500.00</div>
                        </div>
                        <div class="border-top px-2 mx-2"></div>
                        <div class="p-2 d-flex pt-3">
                          <div class="col-8">Insurance Responsibility</div>
                          <div class="ms-auto"><b>$71.76</b></div>
                        </div>
                        <div class="p-2 d-flex">
                          <div class="col-8">
                            Patient Balance <span class="fa fa-question-circle text-dark"></span>
                          </div>
                          <div class="ms-auto"><b>$71.76</b></div>
                        </div>
                        <div class="border-top px-2 mx-2"></div>
                        <div class="p-2 d-flex pt-3">
                          <div class="col-8"><b>Total</b></div>
                          <div class="ms-auto"><b class="text-success">$85.00</b></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          
        
    

Payment card / Donation form

A simple payment form with credit card number and basic dollar amount input for customized amounts of payments / donations.

Martina Thomas**** 8880

Total amount due

$8245

Other amount

$
Go back
        
            
          <section style="background-color: #eee;">
            <div class="container py-5">
              <div class="row d-flex justify-content-center">
                <div class="col-md-8 col-lg-6 col-xl-4">
                  <div class="card rounded-3">
                    <div class="card-body mx-1 my-2">
                      <div class="d-flex align-items-center">
                        <div>
                          <i class="fab fa-cc-visa fa-4x text-black pe-3"></i>
                        </div>
                        <div>
                          <p class="d-flex flex-column mb-0">
                            <b>Martina Thomas</b><span class="small text-muted">**** 8880</span>
                          </p>
                        </div>
                      </div>

                      <div class="pt-3">
                        <div class="d-flex flex-row pb-3">
                          <div class="rounded border border-primary border-2 d-flex w-100 p-3 align-items-center"
                            style="background-color: rgba(18, 101, 241, 0.07);">
                            <div class="d-flex align-items-center pe-3">
                              <input class="form-check-input" type="radio" name="radioNoLabelX" id="radioNoLabel11"
                                value="" aria-label="..." checked />
                            </div>
                            <div class="d-flex flex-column">
                              <p class="mb-1 small text-primary">Total amount due</p>
                              <h6 class="mb-0 text-primary">$8245</h6>
                            </div>
                          </div>
                        </div>

                        <div class="d-flex flex-row pb-3">
                          <div class="rounded border d-flex w-100 px-3 py-2 align-items-center">
                            <div class="d-flex align-items-center pe-3">
                              <input class="form-check-input" type="radio" name="radioNoLabelX" id="radioNoLabel22"
                                value="" aria-label="..." />
                            </div>
                            <div class="d-flex flex-column py-1">
                              <p class="mb-1 small text-primary">Other amount</p>
                              <div class="d-flex flex-row align-items-center">
                                <h6 class="mb-0 text-primary pe-1">$</h6>
                                <input type="text" class="form-control form-control-sm" id="numberExample"
                                  style="width: 55px;" />
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="d-flex justify-content-between align-items-center pb-1">
                        <a href="#!" class="text-muted">Go back</a>
                        <button type="button" class="btn btn-primary btn-lg">Pay amount</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          
        
    

Pricing plan with credit card payment details

Upgrade payment form with basic pricing plan card and a credit card form input.

Upgrade your plan

Please make the payment to start enjoying all the features of our premium plan as soon as possible

Small Business CHANGE PLAN
$ 8,350 / year

Payment details

Credit Card 1234 XXXX XXXX 2570
Credit Card 2344 XXXX XXXX 8880
ADD PAYMENT METHOD
        
            
          <section style="background-color: #eee;">
            <div class="container py-5">
              <div class="row d-flex justify-content-center">
                <div class="col-md-12 col-lg-10 col-xl-8">
                  <div class="card">
                    <div class="card-body p-md-5">
                      <div>
                        <h4>Upgrade your plan</h4>
                        <p class="text-muted pb-2">
                          Please make the payment to start enjoying all the features of our premium
                          plan as soon as possible
                        </p>
                      </div>

                      <div class="px-3 py-4 border border-primary border-2 rounded mt-4 d-flex justify-content-between">
                        <div class="d-flex flex-row align-items-center">
                          <img src="https://i.imgur.com/S17BrTx.webp" class="rounded" width="60" />
                          <div class="d-flex flex-column ms-4">
                            <span class="h5 mb-1">Small Business</span>
                            <span class="small text-muted">CHANGE PLAN</span>
                          </div>
                        </div>
                        <div class="d-flex flex-row align-items-center">
                          <sup class="dollar font-weight-bold text-muted">$</sup>
                          <span class="h2 mx-1 mb-0">8,350</span>
                          <span class="text-muted font-weight-bold mt-2">/ year</span>
                        </div>
                      </div>

                      <h4 class="mt-5">Payment details</h4>

                      <div class="mt-4 d-flex justify-content-between align-items-center">
                        <div class="d-flex flex-row align-items-center">
                          <img src="https://i.imgur.com/qHX7vY1.webp" class="rounded" width="70" />
                          <div class="d-flex flex-column ms-3">
                            <span class="h5 mb-1">Credit Card</span>
                            <span class="small text-muted">1234 XXXX XXXX 2570</span>
                          </div>
                        </div>
                        <div>
                          <input type="text" class="form-control" placeholder="CVC" style="width: 70px;" />
                        </div>
                      </div>

                      <div class="mt-2 d-flex justify-content-between align-items-center">
                        <div class="d-flex flex-row align-items-center">
                          <img src="https://i.imgur.com/qHX7vY1.webp" class="rounded" width="70" />
                          <div class="d-flex flex-column ms-3">
                            <span class="h5 mb-1">Credit Card</span>
                            <span class="small text-muted">2344 XXXX XXXX 8880</span>
                          </div>
                        </div>
                        <div>
                          <input type="text" class="form-control" placeholder="CVC" style="width: 70px;" />
                        </div>
                      </div>

                      <h6 class="mt-4 mb-3 text-primary text-uppercase">ADD PAYMENT METHOD</h6>

                      <div class="form-outline">
                        <input type="text" id="formControlLg" class="form-control form-control-lg" />
                        <label class="form-label" for="formControlLg">Email address</label>
                      </div>
                      <div class="mt-3">
                        <button class="btn btn-primary btn-block btn-lg">
                          Proceed to payment <i class="fas fa-long-arrow-alt-right"></i>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          
        
    

Credit card payment form

Simplistic card details payment step. This template is ideal if you have your shopping cart on a separate page.

visa
        
            
          <section class="gradient-custom">
            <div class="container my-5 py-5">
              <div class="row d-flex justify-content-center py-5">
                <div class="col-md-7 col-lg-5 col-xl-4">
                  <div class="card" style="border-radius: 15px;">
                    <div class="card-body p-4">
                      <form>
                        <div class="d-flex justify-content-between align-items-center mb-3">
                          <div class="form-outline">
                            <input type="text" id="typeText" class="form-control form-control-lg" siez="17"
                              placeholder="1234 5678 9012 3457" minlength="19" maxlength="19" />
                            <label class="form-label" for="typeText">Card Number</label>
                          </div>
                          <img src="https://img.icons8.com/color/48/000000/visa.png" alt="visa" width="64px" />
                        </div>

                        <div class="d-flex justify-content-between align-items-center mb-4">
                          <div class="form-outline">
                            <input type="text" id="typeName" class="form-control form-control-lg" siez="17"
                              placeholder="Cardholder's Name" />
                            <label class="form-label" for="typeName">Cardholder's Name</label>
                          </div>
                        </div>

                        <div class="d-flex justify-content-between align-items-center pb-2">
                          <div class="form-outline">
                            <input type="text" id="typeExp" class="form-control form-control-lg" placeholder="MM/YYYY"
                              size="7" id="exp" minlength="7" maxlength="7" />
                            <label class="form-label" for="typeExp">Expiration</label>
                          </div>
                          <div class="form-outline">
                            <input type="password" id="typeText2" class="form-control form-control-lg"
                              placeholder="&#9679;&#9679;&#9679;" size="1" minlength="3" maxlength="3" />
                            <label class="form-label" for="typeText2">Cvv</label>
                          </div>
                          <button type="button" class="btn btn-info btn-lg btn-rounded">
                            <i class="fas fa-arrow-right"></i>
                          </button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          
        
    
        
            
          .gradient-custom {
            background: radial-gradient(50% 123.47% at 50% 50%, #00ff94 0%, #720059 100%),
              linear-gradient(121.28deg, #669600 0%, #ff0000 100%),
              linear-gradient(360deg, #0029ff 0%, #8fff00 100%),
              radial-gradient(100% 164.72% at 100% 100%, #6100ff 0%, #00ff57 100%),
              radial-gradient(100% 148.07% at 0% 0%, #fff500 0%, #51d500 100%);
            background-blend-mode: screen, color-dodge, overlay, difference, normal;
          }
          
        
    

Credit card payment settings form template

Credit card configuration panel with an option to save your credit card numbers.

Settings

Payment

Saved cards:

Remove card
Remove card

Add new card:

        
            
          <section class="p-4 p-md-5" style="
              background-image: url(https://mdbcdn.b-cdn.net/img/Photos/Others/background3.webp);
            ">
            <div class="row d-flex justify-content-center">
              <div class="col-md-10 col-lg-8 col-xl-5">
                <div class="card rounded-3">
                  <div class="card-body p-4">
                    <div class="text-center mb-4">
                      <h3>Settings</h3>
                      <h6>Payment</h6>
                    </div>
                    <form action="">
                      <p class="fw-bold mb-4 pb-2">Saved cards:</p>

                      <div class="d-flex flex-row align-items-center mb-4 pb-1">
                        <img class="img-fluid" src="https://img.icons8.com/color/48/000000/mastercard-logo.png" />
                        <div class="flex-fill mx-3">
                          <div class="form-outline">
                            <input type="text" id="formControlLgXc" class="form-control form-control-lg"
                              value="**** **** **** 3193" />
                            <label class="form-label" for="formControlLgXc">Card Number</label>
                          </div>
                        </div>
                        <a href="#!">Remove card</a>
                      </div>

                      <div class="d-flex flex-row align-items-center mb-4 pb-1">
                        <img class="img-fluid" src="https://img.icons8.com/color/48/000000/visa.png" />
                        <div class="flex-fill mx-3">
                          <div class="form-outline">
                            <input type="text" id="formControlLgXs" class="form-control form-control-lg"
                              value="**** **** **** 4296" />
                            <label class="form-label" for="formControlLgXs">Card Number</label>
                          </div>
                        </div>
                        <a href="#!">Remove card</a>
                      </div>

                      <p class="fw-bold mb-4">Add new card:</p>

                      <div class="form-outline mb-4">
                        <input type="text" id="formControlLgXsd" class="form-control form-control-lg"
                          value="Anna Doe" />
                        <label class="form-label" for="formControlLgXsd">Cardholder's Name</label>
                      </div>

                      <div class="row mb-4">
                        <div class="col-7">
                          <div class="form-outline">
                            <input type="text" id="formControlLgXM" class="form-control form-control-lg"
                              value="1234 5678 1234 5678" />
                            <label class="form-label" for="formControlLgXM">Card Number</label>
                          </div>
                        </div>
                        <div class="col-3">
                          <div class="form-outline">
                            <input type="password" id="formControlLgExpk" class="form-control form-control-lg"
                              placeholder="MM/YYYY" />
                            <label class="form-label" for="formControlLgExpk">Expire</label>
                          </div>
                        </div>
                        <div class="col-2">
                          <div class="form-outline">
                            <input type="password" id="formControlLgcvv" class="form-control form-control-lg"
                              placeholder="Cvv" />
                            <label class="form-label" for="formControlLgcvv">Cvv</label>
                          </div>
                        </div>
                      </div>

                      <button class="btn btn-success btn-lg btn-block">Add card</button>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </section>
          
        
    

Payment form

Payment form as a product card, it's possible to integrate this form with an eCommerce gallery.

Black Chair

Retro Chair

$760

Your payment details

        
            
          <section style="background-color: #f9c9aa;">
            <div class="container py-5">
              <div class="row d-flex justify-content-center">
                <div class="col-md-9 col-lg-7 col-xl-5">
                  <div class="card">
                    <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-forms/img1.webp"
                      class="card-img-top" alt="Black Chair" />
                    <div class="card-body">
                      <div class="card-title d-flex justify-content-between mb-0">
                        <p class="text-muted mb-0">Retro Chair</p>
                        <p class="mb-0">$760</p>
                      </div>
                    </div>
                    <div class="rounded-bottom" style="background-color: #eee;">
                      <div class="card-body">
                        <p class="mb-4">Your payment details</p>

                        <div class="form-outline mb-3">
                          <input type="text" id="formControlLgXM8" class="form-control"
                            placeholder="1234 5678 1234 5678" />
                          <label class="form-label" for="formControlLgXM8">Card Number</label>
                        </div>

                        <div class="row mb-3">
                          <div class="col-6">
                            <div class="form-outline">
                              <input type="password" id="formControlLgExpk8" class="form-control"
                                placeholder="MM/YYYY" />
                              <label class="form-label" for="formControlLgExpk8">Expire</label>
                            </div>
                          </div>
                          <div class="col-6">
                            <div class="form-outline">
                              <input type="password" id="formControlLgcvv8" class="form-control" placeholder="Cvv" />
                              <label class="form-label" for="formControlLgcvv8">Cvv</label>
                            </div>
                          </div>
                        </div>

                        <button class="btn btn-info btn-block">Order now</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>