E-Commerce Pro component

Use these premium Bootstrap e-commerce components for building an online shop

Product cards

Use the following products cards for your e-commerce items:

Example

apple watch
Apple watch
$299.00
<div class="row">
    <div class="col-12 col-sm-6">
        <div class="card bg-primary shadow-soft border-light">
            <img src="../../assets/img/shop/item-1.png" alt="apple watch"> 
            <div class="card-footer border-top border-light p-4">
                <a href="#" class="h5">Apple watch</a>
                <div class="mt-2">$299.00</div> 
            </div>
        </div> 
    </div>
</div>

Add to cart

This is an example of a product card with the add to cart item:

watch large
Apple watch
apple watch white
$299.00 Add to cart 
<div class="row">
    <div class="col-12 col-sm-6">
        <div class="card bg-primary shadow-soft border-light">
            <img src="../../assets/img/shop/item-1.png" alt="watch large"> 
            <div class="card-footer border-top border-light p-4">
                <a href="#" class="h5">Apple watch</a>
                <div class="d-flex mt-2">
                    <span class="badge badge-dark mr-2">apple</span>
                    <span class="badge badge-dark mr-2">watch</span>
                    <span class="badge badge-dark">white</span>
                </div>
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <span class="h6 mb-0 text-gray">$299.00</span> 
                    <a class="btn btn-xs btn-primary" href="#">
                        <span class="fas fa-cart-plus mr-2"></span> Add to cart
                    </a>
                </div>
            </div>
        </div> 
    </div>
</div>

Reviews

Use this example to showcase the reviews a product has:

black watch
Apple Watch Series 3

Space Gray Aluminum Case with Black Sport Band

4.7
$299.00 Add to cart 
<div class="row">
    <div class="col-12 col-sm-6">
        <div class="card bg-primary shadow-soft border-light">
            <img src="../../assets/img/shop/item-1.png" alt="black watch"> 
            <div class="card-footer border-top border-light p-4">
                <a href="#" class="h5">Apple Watch Series 3</a>
                <h3 class="h6 font-weight-light text-gray mt-2">Space Gray Aluminum Case with Black Sport Band</h3>
                <div class="d-flex mt-3">
                    <span class="star fas fa-star text-warning mr-1"></span> 
                    <span class="star fas fa-star text-warning mr-1"></span> 
                    <span class="star fas fa-star text-warning mr-1"></span> 
                    <span class="star fas fa-star text-warning mr-1"></span> 
                    <span class="star fas fa-star text-warning"></span> 
                    <span class="badge badge-pill badge-gray ml-2">4.7</span>
                </div>
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <span class="h5 mb-0 text-gray">$299.00</span> 
                    <a class="btn btn-xs btn-primary" href="#">
                        <span class="fas fa-cart-plus mr-2"></span> Add to cart
                    </a>
                </div>
            </div>
        </div> 
    </div>
</div>

Discount

Use this example if you want to indicate a discount:

Beats speakers
Beats Pill

Black Beats Pill + Portable Speaker

4.7
$299.00 $199.00 
<div class="row">
    <div class="col-12 col-sm-6">
        <div class="card bg-primary shadow-soft border-light">
            <div class="card-header"> 
                <img src="../../assets/img/shop/item-2.png" alt="Beats speakers"> 
            </div>
            <div class="card-body border-top border-light">
                <a href="#" class="h5">Beats Pill</a>
                <h3 class="h6 font-weight-light text-gray mt-2">Black Beats Pill + Portable Speaker</h3>
                <div class="d-flex mt-3">
                    <span class="star fas fa-star text-warning mr-1"></span> 
                    <span class="star fas fa-star text-warning mr-1"></span> 
                    <span class="star fas fa-star text-warning mr-1"></span> 
                    <span class="star fas fa-star text-warning mr-1"></span> 
                    <span class="star fas fa-star text-warning"></span> 
                    <span class="badge badge-pill badge-gray ml-2">4.7</span>
                </div>
            </div>
            <div class="card-footer border-top border-light p-4">
                <div class="d-flex align-items-center">
                    <span class="h5 mb-0 text-gray text-through mr-2">
                        $299.00
                    </span>
                    <span class="h6 mb-0 text-danger">$199.00</span>
                    <div class="ml-auto">
                        <button class="btn btn-icon-only btn-primary" type="button" aria-label="add to cart button" title="add to cart button">
                            <span aria-hidden="true" class="fas fa-cart-plus"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div> 
    </div>
</div>

This is an example of a featured product item:

Apple Watch Series 3
4.7 150 orders

Monitor your health. Track your workouts. Get the motivation you need to achieve your fitness goals. And stay connected to the people and information you care about.

$299.00 $199.00
Free shipping
Details Wishlist 
<div class="row">
    <div class="col-12">
        <div class="card bg-primary shadow-soft border-light p-4">
            <div class="row align-items-center">
                <aside class="col-md-3">
                    <a href="#">
                        <img src="../../assets/img/shop/item-1.png" alt="premium watch">
                    </a>
                </aside>
                <div class="col-md-6">
                    <div class="info-main">
                        <a href="#" class="h5 title"> Apple Watch Series 3 </a>
                        <div class="d-flex my-3">
                            <span class="star fas fa-star text-warning mr-1"></span> 
                            <span class="star fas fa-star text-warning mr-1"></span> 
                            <span class="star fas fa-star text-warning mr-1"></span> 
                            <span class="star fas fa-star text-warning mr-1"></span> 
                            <span class="star fas fa-star text-warning"></span> 
                            <span class="badge badge-pill badge-gray ml-2">4.7</span>
                            <span class="small text-success ml-3"><span class="fas fa-shopping-cart mr-1"></span>150 orders</span>
                        </div>
                        <p>Monitor your health. Track your workouts. Get the motivation you need to achieve your fitness goals. And stay connected to the people and information you care about.</p>
                    </div>
                </div> 
                <div class="col-12 col-md-3">
                    <div class="d-flex align-items-center">
                        <span class="h5 mb-0 text-gray text-through mr-2">
                            $299.00
                        </span>
                        <span class="h6 mb-0 text-danger">$199.00</span>
                    </div> <!-- info-price-detail // -->
                    <span class="text-success small"><span class="fas fa-shipping-fast mr-1"></span>Free shipping</span>
                    <div class="mt-4">
                        <a class="btn btn-primary btn-sm btn-block mb-3" href="#">
                            Details
                        </a>
                        <a href="#" class="btn btn-primary btn-sm btn-block"><span class="fa fa-heart mr-1"></span> 
                            Wishlist
                        </a>
                    </div>
                </div> 
            </div> 
        </div>
    </div>
</div>

Filters

Use these components to use in your sidebar to filter out items.

Price range

Price range

<div class="row">
    <div class="col-12 col-md-6">
        <div class="card bg-primary shadow-soft border-light">
            <div class="card-body">
                <h3 class="h5 card-title">Price range</h3>	
                <!-- Simple slider -->
                <div class="input-slider-container">
                    <div id="input-slider-ecommerce" class="input-slider" data-range-value-min="100" data-range-value-max="500"></div>
                    <!-- Input slider values -->
                    <div class="row mt-3 d-none">
                        <div class="col-6">
                            <span id="input-slider-value" class="range-slider-value" data-range-value-low="200"></span>
                        </div>
                    </div>
                </div>
                <!-- End of Slider -->
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="priceRangeMin1">Min</label>
                        <input class="form-control" id="priceRangeMin1" placeholder="$0" type="number">
                    </div>
                    <div class="form-group text-right col-md-6">
                        <label for="priceRangeMax1">Max</label>
                        <input class="form-control" id="priceRangeMax1" placeholder="$1,0000" type="number">
                    </div>
                </div>
                <button class="btn btn-block btn-primary">Apply</button>
            </div>
        </div>
    </div>
</div>

Checkbox filtering

Colors

<div class="row">
    <div class="col-12 col-md-6">
        <form action="#" class="card bg-primary shadow-soft border-light">
            <div class="card-body">
                <h3 class="h5 card-title">Colors</h3>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="cartCheck1">
                            <label class="form-check-label" for="cartCheck1">
                                Red
                            </label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="cartCheck2">
                            <label class="form-check-label" for="cartCheck2">
                                Black
                            </label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="cartCheck3">
                            <label class="form-check-label" for="cartCheck3">
                                White
                            </label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="cartCheck4">
                            <label class="form-check-label" for="cartCheck4">
                                Green
                            </label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="cartCheck5">
                            <label class="form-check-label" for="cartCheck5">
                                Orange
                            </label>
                        </div>
                    </div>
                </div>
                <input type="reset" class="btn btn-primary btn-sm mt-4" value="Reset">
            </form>
        </div>
    </div>
</div>

Category badges

Product type

<div class="row">
    <div class="col-12 col-md-6">
        <div class="card bg-primary shadow-inset border-light p-3">
            <div class="card-body shadow-soft border border-light rounded p-3">
                <h3 class="h5 card-title">Product type</h3>
                <ul class="list-group text-gray">
                    <li class="list-group-item d-flex justify-content-between align-items-center border-0 py-1 px-0 font-small">
                        <a href="#">Watches</a>
                        <span class="badge badge-gray badge-pill">123</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center border-0 py-1 px-0 font-small">
                        <a href="#">Laptops</a>
                        <span class="badge badge-gray badge-pill">330</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center border-0 py-1 px-0 font-small">
                        <a href="#">Console</a>
                        <span class="badge badge-gray badge-pill">99</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center border-0 py-1 px-0 font-small">
                        <a href="#">TV</a>
                        <span class="badge badge-gray badge-pill">210</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center border-0 py-1 px-0 font-small">
                        <a href="#">Tablets</a>
                        <span class="badge badge-gray badge-pill">134</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Checkout

These components can be used for the checkout page.

Checkout item

Use the following component to show details about the selected products:

apple watch series
Apple Watch Series 3 $199.00
  • Transport: Free transport
  • Moneyback: 1 month
  • Warranty: 24 months
Remove
big speakers
Black Beats Pill $199.00
  • Transport: Free transport
  • Moneyback: 1 month
  • Warranty: 12 months
Remove 
<div class="row">
    <div class="col-12">
        <div class="card bg-primary shadow-soft border-light p-4 mb-5">
            <div class="row align-items-center">
                <div class="col-3">
                    <a href="#"> <img src="../../assets/img/shop/item-1.png" alt="apple watch series"> </a>
                </div>
                <div class="col">
                    <div class="d-flex mb-2 font-weight-bold"> <a class="h5" href="#">Apple Watch Series 3</a> <span class="h5 ml-auto">$199.00</span> </div>
                    <ul class="pl-3">
                        <li class="small">Transport: Free transport</li>
                        <li class="small">Moneyback: 1 month</li>
                        <li class="small">Warranty: 24 months</li>
                    </ul>
                    <div class="d-flex align-items-center">
                        <!-- Form -->
                        <div class="form-group">
                            <label class="h6" for="inlineFormCustomSelectPref3">Qty</label>
                            <select class="custom-select w-auto" id="inlineFormCustomSelectPref3">
                                <option selected>1</option>
                                <option value="1">2</option>
                                <option value="2">3</option>
                                <option value="3">4</option>
                            </select>
                        </div>
                        <!-- End of Form -->
                        <div class="ml-auto">
                            <a class="btn-link text-dark" href="#"><span class="far fa-trash-alt mr-2"></span>Remove </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card bg-primary shadow-soft border-light p-4 mb-5">
            <div class="row align-items-center">
                <div class="col-3">
                    <a href="#"> <img src="../../assets/img/shop/item-2.png" alt="big speakers"> </a>
                </div>
                <div class="col">
                    <div class="d-flex mb-2 font-weight-bold"> <a class="h5" href="#">Black Beats Pill</a> <span class="h5 ml-auto">$199.00</span> </div>
                    <ul class="pl-3">
                        <li class="small">Transport: Free transport</li>
                        <li class="small">Moneyback: 1 month</li>
                        <li class="small">Warranty: 12 months</li>
                    </ul>
                    <div class="d-flex align-items-center">
                        <!-- Form -->
                        <div class="form-group">
                            <label class="h6" for="inlineFormCustomSelectPref4">Qty</label>
                            <select class="custom-select w-auto" id="inlineFormCustomSelectPref4">
                                <option selected>1</option>
                                <option value="1">2</option>
                                <option value="2">3</option>
                                <option value="3">4</option>
                            </select>
                        </div>
                        <!-- End of Form -->
                        <div class="ml-auto">
                            <a class="btn-link text-dark" href="#"><span class="far fa-trash-alt mr-2"></span>Remove </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Checkout summary

Use the following component to show a summary of the checkout items:

Cart Summary

  • Subtotal $398.00
  • Total $398.00
Proceed to Checkout Taxes may apply before placing an order. 
<div class="row">
    <div class="col-12 col-md-6">
        <div class="card bg-primary shadow-inset border-light p-3">
            <div class="card-body shadow-soft border border-light rounded p-3">
                <h3 class="h5">Cart Summary</h3>
                <ul class="list-group list-group-sm mt-3">
                    <li class="list-group-item d-flex"> <span>Subtotal</span> <span class="ml-auto">$398.00</span> </li>
                    <li class="list-group-item d-flex font-weight-bold h5 rounded-bottom"> <span>Total</span> <span class="ml-auto">$398.00</span> </li> 
                </ul>
                <a class="btn btn-block btn-primary mt-4 mb-3" href="#">Proceed to Checkout</a> <small>Taxes may apply before placing an order.</small> 
            </div>
        </div>
    </div>
</div>

Checkout summary 2

This is an example of a checkout summary with the products:

Items (2)

black watch
Apple Watch Series 3
  • Transport: Free transport
  • Moneyback: 1 month
  • Warranty: 24 months
black speakers
Black Beats Pill
  • Transport: Free transport
  • Moneyback: 1 month
  • Warranty: 24 months
  • Subtotal $398.00
  • Tax $18.00
  • Total $416.00
Place Order By placing the order you are confirming that you are over 16 years of age and you agree with our Terms and Conditions. 
<div class="row">
    <div class="col-12 col-md-8">
        <div class="card bg-primary shadow-soft border-light p-4">
            <h3 class="h5 mb-4">Items (2)</h3>
            <div class="row mb-4">
                <div class="col-4">
                    <a href="#"> <img src="../../assets/img/shop/item-1.png" alt="black watch"> </a>
                </div>
                <div class="col">
                    <div class="d-flex mb-2 font-weight-bold"> <a class="h6" href="#">Apple Watch Series 3</a> </div>
                    <ul class="pl-3">
                        <li class="small">Transport: Free transport</li>
                        <li class="small">Moneyback: 1 month</li>
                        <li class="small">Warranty: 24 months</li>
                    </ul>
                </div>
            </div>
            <div class="row mb-4">
                <div class="col-4">
                    <a href="#"> <img src="../../assets/img/shop/item-2.png" alt="black speakers"> </a>
                </div>
                <div class="col">
                    <div class="d-flex mb-2 font-weight-bold"> <a class="h6" href="#">Black Beats Pill</a> </div>
                    <ul class="pl-3">
                        <li class="small">Transport: Free transport</li>
                        <li class="small">Moneyback: 1 month</li>
                        <li class="small">Warranty: 24 months</li>
                    </ul>
                </div>
            </div>
            <div class="card-body p-0">
                <ul class="list-group list-group-sm mt-3">
                    <li class="list-group-item d-flex"> <span>Subtotal</span> <span class="ml-auto">$398.00</span> </li>
                    <li class="list-group-item d-flex"> <span>Tax</span> <span class="ml-auto">$18.00</span> </li>
                    <li class="list-group-item d-flex font-weight-bold rounded-bottom h5"> <span>Total</span> <span class="ml-auto">$416.00</span></li> 
                </ul>
                <a class="btn btn-block btn-primary mt-4 mb-3" href="#">Place Order</a> 
                <small>By placing the order you are confirming that you are over 16 years of age and you agree with our <a href="#">Terms and Conditions</a>.</small>
            </div>
        </div>
    </div>
</div>

Payment & billing details

The following section can be used to get the billing and payment details:

<div class="row">
    <div class="col-12">
        <nav>                           
            <div class="nav nav-pills nav-fill flex-column flex-sm-row" id="nav-tab-ecommerce" role="tablist">
                <a class="nav-item nav-link mr-4 mr-md-3 active" id="nav-credit-card-tab" data-toggle="tab" href="#nav-credit-card" role="tab" aria-controls="nav-credit-card" aria-selected="true">
                    Credit Card
                </a>
                <a class="nav-item nav-link mr-4 mr-md-3" id="nav-paypal-tab" data-toggle="tab" href="#nav-paypal" role="tab" aria-controls="nav-paypal" aria-selected="false">
                    Paypal
                </a>
                <a class="nav-item nav-link" id="nav-wire-tab" data-toggle="tab" href="#nav-wire" role="tab" aria-controls="nav-wire" aria-selected="false">
                    Wire Transfer
                </a>
            </div>                           
        </nav>
        <div class="tab-content mt-4 mt-lg-5" id="nav-tabContent-ecommerce">
            <div class="tab-pane fade show active" id="nav-credit-card" role="tabpanel" aria-labelledby="nav-credit-card-tab">                      
                <div class="card bg-primary shadow-soft border-light p-3 mb-4">
                    <div class="card-header border-light p-3">
                        <h3 class="h5 mb-0">Billing details</h3> 
                    </div>
                    <div class="card-body p-4">
                        <div class="row justify-content-center">
                            <div class="col-12 col-lg-10">
                                <!-- Form -->
                                <div class="form-group mb-4">
                                    <label for="cartInputEmail1">Email address *</label>
                                    <input type="email" class="form-control" placeholder="[email protected]" id="cartInputEmail1" aria-describedby="cartInputEmail1" required>
                                </div>
                                <!-- End of Form -->
                            </div>
                            <div class="col-12 col-lg-10">
                                <!--Form-->
                                <div class="form-group">
                                    <label class="my-1 mr-2" for="cartFormCustomSelectPref1">Country</label>
                                    <select class="custom-select my-1 mr-sm-2" id="cartFormCustomSelectPref1">
                                        <option selected>Choose...</option>
                                        <option value="1">United States</option>
                                        <option value="2">Germany</option>
                                        <option value="3">Canada</option>
                                    </select>
                                </div>
                                <!-- End of Form -->
                            </div>
                            <div class="col-12 col-lg-10">
                                <!-- Form -->
                                <div class="form-group mb-4">
                                    <label for="cartInputAdress1">Adress</label>
                                    <input type="text" placeholder="e.g. Texas" class="form-control" id="cartInputAdress1" aria-describedby="cartInputAdress1">
                                </div>
                                <!-- End of Form -->
                            </div>
                            <div class="col-12 col-lg-10">
                                <!-- Form -->
                                <div class="form-group mb-4">
                                    <label for="cartInputCity1">City</label>
                                    <input type="text" placeholder="e.g. Dallas" class="form-control" id="cartInputCity1" aria-describedby="cartInputCity1">
                                </div>
                                <!-- End of Form -->
                            </div>
                            <div class="col-12 col-lg-10">
                                <!-- Form -->
                                <div class="form-group mb-4">
                                    <label for="cartInputZip1">Zip/Postal code</label>
                                    <input type="number" placeholder="e.g. 123456" class="form-control" id="cartInputZip1" aria-describedby="cartInputZip1">
                                </div>
                                <!-- End of Form -->
                            </div>
                            <div class="col-12 col-lg-10">
                                <!-- Form -->
                                <div class="form-group mb-4">
                                    <label for="cartInputCompany1">Company Name *</label>
                                    <input type="text" placeholder="e.g. Themesberg LLC" class="form-control" id="cartInputCompany1" aria-describedby="cartInputCompany1" required>
                                </div>
                                <!-- End of Form -->
                            </div>
                            <div class="col-12 col-lg-10">
                                <!-- Form -->
                                <div class="form-group mb-4">
                                    <label for="cartInputVAT1">VAT ID *</label>
                                    <input type="number" placeholder="e.g. US12345" class="form-control" id="cartInputVAT1" aria-describedby="cartInputVAT1" required>
                                </div>
                                <!-- End of Form -->
                            </div>
                            <div class="col-12 col-lg-10">
                                <!-- Form -->
                                <div class="form-group mb-4">
                                    <label for="cartInputPhone1">Phone Number</label>
                                    <input type="number" placeholder="e.g. +(12)345 6789" class="form-control" id="cartInputPhone1" aria-describedby="cartInputPhone1">
                                </div>
                                <!-- End of Form -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card bg-primary shadow-soft border-light p-3 mb-4">
                    <div class="card-header border-light p-3">
                        <h3 class="h5 mb-0">Card details</h3> 
                    </div>
                    <div class="card-body p-4">
                        <div class="row justify-content-center">
                            <div class="col-12 col-md-10">
                                <div class="form-group">
                                    <label class="form-label" for="cardNameLabel"><span class="small text-dark">(Full name as displayed on card)</span></label>
                                    <div class="input-group mb-4">
                                        <input class="form-control" id="cardNameLabel" placeholder="Name on Card *" type="text" required=""> </div>
                                </div>
                            </div>
                            <div class="col-12 col-lg-10">
                                <div class="form-group">
                                    <label class="form-label h6" for="cardNumberLabel">Card Number <span class="text-danger">*</span></label>
                                    <div class="input-group mb-4">
                                        <div class="input-group-prepend"> <span class="input-group-text"><span class="fas fa-credit-card"></span></span> </div>
                                        <input class="form-control" id="cardNumberLabel" placeholder="0000 0000 0000 0000" type="number" required=""> </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-5 mb-3">
                                <div class="form-group">
                                    <label class="form-label h6" for="cardCVCLabel">CVC <span class="text-danger">*</span></label>
                                    <input class="form-control" id="cardCVCLabel" placeholder="CVC" type="number" required=""> </div>
                            </div>
                            <div class="col-12 col-md-5 mb-3">
                                <div class="form-group">
                                    <label class="form-label h6" for="cardExpiryLabel">Card Expiry <span class="text-danger">*</span></label>
                                    <div class="input-group mb-4">
                                        <div class="input-group-prepend"> <span class="input-group-text"><span class="fas fa-calendar-alt"></span></span> </div>
                                        <input class="form-control" id="cardExpiryLabel" placeholder="MM / YY" type="number" required=""> </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>    
            </div>
            <div class="tab-pane fade" id="nav-paypal" role="tabpanel" aria-labelledby="nav-paypal-tab">
                <div class="card bg-primary shadow-soft border-light p-3 mb-4">
                    <div class="card-header border-light p-3">
                        <h3 class="h5 mb-0">Billing details</h3> 
                    </div>
                    <div class="card-body p-4">
                        <div class="row justify-content-center">
                            <div class="col-12 col-lg-10">
                                <!-- Form -->
                                <div class="form-group mb-4">
                                    <label for="cartInputName2">Full Name *</label>
                                    <input type="text" class="form-control" placeholder="e.g. Christopher Wood" id="cartInputName2" aria-describedby="cartInputName2" required>
                                </div>
                                <!-- End of Form -->
                            </div>
                            <div class="col-12 col-lg-10">
                                <!-- Form -->
                                <div class="form-group mb-4">
                                    <label for="cartInputEmail2">Email address *</label>
                                    <input type="email" class="form-control" placeholder="[email protected]" id="cartInputEmail2" aria-describedby="cartInputName2" required>
                                </div>
                                <!-- End of Form -->
                            </div>
                            <div class="col-12 text-center">
                                <button type="submit" class="btn btn-paypal text-black"><span class="fab fa-paypal mr-2"></span>Check out with Paypal</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="nav-wire" role="tabpanel" aria-labelledby="nav-wire-tab">
                <div class="card bg-primary shadow-soft border-light p-3 mb-4">
                    <div class="card-header border-light p-3">
                        <h3 class="h5 mb-0">Billing details</h3> 
                    </div>
                    <div class="card-body p-4">
                        <div class="row justify-content-center">
                            <div class="col-12 col-lg-10">
                                <!-- Form -->
                                <div class="form-group mb-4">
                                    <label for="cartInputEmail3">Email address *</label>
                                    <input type="email" class="form-control" placeholder="[email protected]" id="cartInputEmail3" aria-describedby="cartInputEmail3" required>
                                </div>
                                <!-- End of Form -->
                            </div>
                            <div class="col-12 col-lg-10">
                                <!--Form-->
                                <div class="form-group">
                                    <label class="my-1 mr-2" for="cartFormCustomSelectPref3">Country</label>
                                    <select class="custom-select my-1 mr-sm-2" id="cartFormCustomSelectPref3">
                                        <option selected>Choose...</option>
                                        <option value="1">United States</option>
                                        <option value="2">Germany</option>
                                        <option value="3">Canada</option>
                                    </select>
                                </div>
                                <!-- End of Form -->
                            </div>
                            <div class="col-12 col-lg-10">
                                <!-- Form -->
                                <div class="form-group mb-4">
                                    <label for="cartInputAdress3">Adress</label>
                                    <input type="text" placeholder="e.g. Texas" class="form-control" id="cartInputAdress3" aria-describedby="cartInputAdress3">
                                </div>
                                <!-- End of Form -->
                            </div>
                            <div class="col-12 col-lg-10">
                                <!-- Form -->
                                <div class="form-group mb-4">
                                    <label for="cartInputCity3">City</label>
                                    <input type="text" placeholder="e.g. Dallas" class="form-control" id="cartInputCity3" aria-describedby="cartInputCity3">
                                </div>
                                <!-- End of Form -->
                            </div>
                            <div class="col-12 col-lg-10">
                                <!-- Form -->
                                <div class="form-group mb-4">
                                    <label for="cartInputZip3">Zip/Postal code</label>
                                    <input type="number" placeholder="e.g. 123456" class="form-control" id="cartInputZip3" aria-describedby="cartInputZip3">
                                </div>
                                <!-- End of Form -->
                            </div>
                            <div class="col-12 col-lg-10">
                                <!-- Form -->
                                <div class="form-group mb-4">
                                    <label for="cartInputCompany3">Company Name *</label>
                                    <input type="text" placeholder="e.g. Themesberg LLC" class="form-control" id="cartInputCompany3" aria-describedby="cartInputCompany3" required>
                                </div>
                                <!-- End of Form -->
                            </div>
                            <div class="col-12 col-lg-10">
                                <!-- Form -->
                                <div class="form-group mb-4">
                                    <label for="cartInputVAT3">VAT ID *</label>
                                    <input type="number" placeholder="e.g. US12345" class="form-control" id="cartInputVAT3" aria-describedby="cartInputVAT3" required>
                                </div>
                                <!-- End of Form -->
                            </div>
                            <div class="col-12 col-lg-10">
                                <!-- Form -->
                                <div class="form-group mb-4">
                                    <label for="cartInputPhone3">Phone Number</label>
                                    <input type="number" placeholder="e.g. +(12)345 6789" class="form-control" id="cartInputPhone3" aria-describedby="cartInputPhone3">
                                </div>
                                <!-- End of Form -->
                            </div>
                            <div class="col-12 col-lg-10">
                                <p class="small mb-4">For Bank/Wire transfer, product delivery takes place only after payment is received in full. Paying by credit card usually offers you immediate access to the products you ordered.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>