E-Commerce Pro

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

product-image
Apple watch
$299.00
<div class="row">
    <div class="col-12 col-sm-6">
        <!-- card -->
        <div class="card border-light">
            <img src="../../assets/img/shop/item-1.png" alt="product-image">
            <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>
        <!-- / card -->
    </div>
</div>

Add to cart

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

product-image
Apple watch
apple watch white
$299.00 Add to cart 
<div class="row">
    <div class="col-12 col-sm-6">
        <!-- card -->
        <div class="card border-light">
            <img src="../../assets/img/shop/item-1.png" alt="product-image">
            <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-primary mr-2">apple</span>
                    <span class="badge badge-primary mr-2">watch</span>
                    <span class="badge badge-primary">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>
        <!-- card -->
    </div>
</div>

Reviews

Use this example to showcase the reviews a product has:

product-image
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-8">
        <!-- card -->
        <div class="card border-light">
            <img src="../../assets/img/shop/item-1.png" alt="product-image">
            <div class="card-footer border-top border-light p-4">
                <a href="#" class="h5">Apple Watch Series 3</a>
                <h6 class="font-weight-light text-gray mt-2">Space Gray Aluminum Case with Black Sport Band</h6>
                <div class="d-flex mt-3">
                    <i class="star fas fa-star text-warning mr-1"></i>
                    <i class="star fas fa-star text-warning mr-1"></i>
                    <i class="star fas fa-star text-warning mr-1"></i>
                    <i class="star fas fa-star text-warning mr-1"></i>
                    <i class="star fas fa-star text-warning"></i>
                    <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>
        <!-- card -->
    </div>
</div>

Discount

Use this example if you want to indicate a discount:

product-image
Beats Pill
Black Beats Pill + Portable Speaker
4.7
$299.00 $199.00 
<div class="row">
    <div class="col-12 col-sm-8">
        <!-- card -->
        <div class="card border-light">
            <div class="card-header">
                <img src="../../assets/img/shop/item-2.png" alt="product-image">
            </div>
            <div class="card-body border-top border-light">
                <a href="#" class="h5">Beats Pill</a>
                <h6 class="font-weight-light text-gray mt-2">Black Beats Pill + Portable Speaker</h6>
                <div class="d-flex mt-3">
                    <i class="star fas fa-star text-warning mr-1"></i>
                    <i class="star fas fa-star text-warning mr-1"></i>
                    <i class="star fas fa-star text-warning mr-1"></i>
                    <i class="star fas fa-star text-warning mr-1"></i>
                    <i class="star fas fa-star text-warning"></i>
                    <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">
                            <span class="btn-inner-icon"><i class="fas fa-cart-plus"></i></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- card -->
    </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 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="product-image">
                    </a>
                </aside> <!-- col.// -->
                <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">
                            <i class="star fas fa-star text-warning mr-1"></i>
                            <i class="star fas fa-star text-warning mr-1"></i>
                            <i class="star fas fa-star text-warning mr-1"></i>
                            <i class="star fas fa-star text-warning mr-1"></i>
                            <i class="star fas fa-star text-warning"></i>
                            <span class="badge badge-pill badge-gray ml-2">4.7</span>
                            <span class="small text-success ml-3"><i class="fas fa-shopping-cart mr-1"></i>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"><i class="fas fa-shipping-fast mr-1"></i>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"><i class="fa fa-heart"></i>
                            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-sm-6">
        <div class="card border-light">
            <div class="card-body">
                <h5 class="card-title">Price range</h5>
                <!-- 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>Min</label>
                        <input class="form-control" placeholder="$0" type="number">
                    </div>
                    <div class="form-group text-right col-md-6">
                        <label>Max</label>
                        <input class="form-control" placeholder="$1,0000" type="number">
                    </div>
                </div>
                <button class="btn btn-block btn-primary">Apply</button>
            </div>
        </div>
    </div>
</div>

Radio filtering

Colors

Reset 
<div class="row">
    <div class="col-12 col-sm-6">
        <div class="card 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>
                <a href="#" class="btn btn-primary btn-sm mt-4">Reset</a>
            </div>
        </div>
    </div>
</div>

Checkbox filtering

Categories

<div class="row">
    <div class="col-12 col-sm-6">
        <div class="card border-light">
            <div class="card-body">
                <h3 class="h5 card-title">Categories</h3>
                <div class="row">
                    <div class="col-12">
                        <div class="form-check mb-1">
                            <input class="form-check-input" type="checkbox" value="" id="cartCheck6">
                            <label class="form-check-label" for="cartCheck6">
                                All Products
                            </label>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="form-check mb-1">
                            <input class="form-check-input" type="checkbox" value="" id="cartCheck7">
                            <label class="form-check-label" for="cartCheck7">
                                Headphones
                            </label>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="form-check mb-1">
                            <input class="form-check-input" type="checkbox" value="" id="cartCheck8">
                            <label class="form-check-label" for="cartCheck8">
                                Speakers
                            </label>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="form-check mb-1">
                            <input class="form-check-input" type="checkbox" value="" id="cartCheck9">
                            <label class="form-check-label" for="cartCheck9">
                                Mouse
                            </label>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="form-check mb-1">
                            <input class="form-check-input" type="checkbox" value="" id="cartCheck10">
                            <label class="form-check-label" for="cartCheck10">
                                Stands
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Category badges

Product type
<div class="row">
    <div class="col-12 col-sm-6">
        <div class="card border-light">
            <div class="card-body">
                <h5 class="card-title">Product type</h5>
                <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:

product-image
Apple Watch Series 3 $199.00
  • Transport: Free transport
  • Moneyback: 1 month
  • Warranty: 24 months
Remove 
<div class="row">
    <div class="col-12">
        <div class="card 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="product-image"> </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">
                        <select class="custom-select w-auto">
                            <option value="1">1</option>
                            <option value="1">2</option>
                            <option value="1">3</option>
                        </select>
                        <div class="ml-auto">
                            <a class="btn-link text-dark" href="#"><i class="far fa-trash-alt mr-2"></i>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-sm-8">
        <div class="card border-light p-4">
            <div class="card-body p-0">
                <h5>Cart Summary</h5>
                <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="checkout.html">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)
image
Apple Watch Series 3
  • Transport: Free transport
  • Moneyback: 1 month
  • Warranty: 24 months
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-sm-10">
        <div class="card border-light p-4">
            <h5 class="mb-4">Items (2)</h5>
            <div class="row mb-4">
                <div class="col-4">
                    <a href="#"> <img class="components-why-our-themes" src="../../assets/img/shop/item-1.png" alt="image"> </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 class="components-why-our-themes" src="../../assets/img/shop/item-2.png" alt=""> </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="checkout.html">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-1 active" id="nav-credit-card-tab" data-toggle="tab" href="#nav-credit-card" role="tab" aria-controls="nav-credit-card" aria-selected="true">
                    <i class="fad fa-credit-card-front"></i>Credit Card
                </a>
                <a class="nav-item nav-link mr-4 mr-md-1" id="nav-paypal-tab" data-toggle="tab" href="#nav-paypal" role="tab" aria-controls="nav-paypal" aria-selected="false">
                    <i class="fab fa-paypal mr-2"></i>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">
                    <i class="fad fa-money-check-edit"></i>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 border-light p-3 mb-4">
                    <div class="card-header border-light p-3">
                        <h5 class="mb-0">Billing details</h5> </div>
                    <div class="card-body p-4">
                        <div class="row justify-content-center">
                            <div class="col-12 col-lg-10">
                                <div class="form-group">
                                    <div class="input-group mb-4">
                                        <div class="input-group-prepend"> <span class="input-group-text"><i class="fas fa-envelope"></i></span> </div>
                                        <input class="form-control" id="EmailLabel" placeholder="Your Email *" type="email" required=""> </div>
                                </div>
                            </div>
                            <div class="col-12 col-lg-10">
                                <div class="form-group mb-4">
                                    <select class="custom-select" id="exampleFormControlSelect1">
                                        <option>Choose your country</option>
                                        <option>Romania</option>
                                        <option>France</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-lg-10">
                                <div class="form-group mb-4">
                                    <input class="form-control" id="AdressLabel" placeholder="Adress *" type="text" required=""> </div>
                            </div>
                            <div class="col-12 col-lg-10">
                                <div class="form-group mb-4">
                                    <input class="form-control" id="CityLabel" placeholder="City" type="text"> </div>
                            </div>
                            <div class="col-12 col-lg-10">
                                <div class="form-group mb-4">
                                    <input class="form-control" id="ZipLabel" placeholder="Zip / Postal code" type="number"> </div>
                            </div>
                            <div class="col-12 col-lg-10">
                                <div class="form-group mb-4">
                                    <input class="form-control" id="CompanyLabel" placeholder="Company *" type="text" required=""> </div>
                            </div>
                            <div class="col-12 col-lg-10">
                                <div class="form-group mb-4">
                                    <input class="form-control" id="VATLabel" placeholder="VAT ID" type="number"> </div>
                            </div>
                            <div class="col-12 col-lg-10">
                                <div class="form-group mb-4">
                                    <input class="form-control" id="Phoneabel" placeholder="Phone number" type="number"> </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card border-light p-3 mb-4">
                    <div class="card-header border-light p-3">
                        <h5 class="mb-0">Card details</h5>
                    </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"><i class="fas fa-credit-card"></i></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"><i class="fas fa-calendar-alt"></i></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 border-light p-3 mb-4">
                    <div class="card-header border-light p-3">
                        <h5 class="mb-0">Billing details</h5> </div>
                    <div class="card-body p-4">
                        <div class="row justify-content-center">
                            <div class="col-12 col-lg-10">
                                <div class="form-group">
                                    <div class="input-group mb-4">
                                        <div class="input-group-prepend"> <span class="input-group-text"><i class="fas fa-user-alt"></i></span> </div>
                                        <input class="form-control" id="PaypalNameLabel" placeholder="Your Name" type="text"> </div>
                                </div>
                            </div>
                            <div class="col-12 col-lg-10">
                                <div class="form-group">
                                    <div class="input-group mb-4">
                                        <div class="input-group-prepend"> <span class="input-group-text"><i class="fas fa-envelope"></i></span> </div>
                                        <input class="form-control" id="PaypalEmailLabel" placeholder="Your Email *" type="email" required=""> </div>
                                </div>
                            </div>
                            <div class="col-12 text-center">
                                <button type="submit" class="btn btn-paypal text-black"><i class="fab fa-paypal mr-1"></i>Check out with</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="nav-wire" role="tabpanel" aria-labelledby="nav-wire-tab">
                <div class="card border-light p-3 mb-4">
                    <div class="card-header border-light p-3">
                        <h5 class="mb-0">Billing details</h5> </div>
                    <div class="card-body p-4">
                        <div class="row justify-content-center">
                            <div class="col-12 col-lg-10">
                                <div class="form-group">
                                    <div class="input-group mb-4">
                                        <div class="input-group-prepend"> <span class="input-group-text"><i class="fas fa-user-alt"></i></span> </div>
                                        <input class="form-control" id="BillingNameLabel" placeholder="Your Name *" type="text" required=""> </div>
                                </div>
                            </div>
                            <div class="col-12 col-lg-10">
                                <div class="form-group">
                                    <div class="input-group mb-4">
                                        <div class="input-group-prepend"> <span class="input-group-text"><i class="fas fa-envelope"></i></span> </div>
                                        <input class="form-control" id="BillingEmailLabel" placeholder="Your Email *" type="email" required=""> </div>
                                </div>
                            </div>
                            <div class="col-12 col-lg-10">
                                <div class="form-group mb-4">
                                    <select class="custom-select" id="BillingexampleFormControlSelect1">
                                        <option>Choose your country</option>
                                        <option>Romania</option>
                                        <option>France</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-lg-10">
                                <div class="form-group mb-4">
                                    <input class="form-control" id="BillingAdressLabel" placeholder="Adress *" type="text" required=""> </div>
                            </div>
                            <div class="col-12 col-lg-10">
                                <div class="form-group mb-4">
                                    <input class="form-control" id="BillingCityLabel" placeholder="City" type="text"> </div>
                            </div>
                            <div class="col-12 col-lg-10">
                                <div class="form-group mb-4">
                                    <input class="form-control" id="BillingZipLabel" placeholder="Zip / Postal code" type="number"> </div>
                            </div>
                            <div class="col-12 col-lg-10">
                                <div class="form-group mb-4">
                                    <input class="form-control" id="BillingCompanyLabel" placeholder="Company *" type="text" required=""> </div>
                            </div>
                            <div class="col-12 col-lg-10">
                                <div class="form-group mb-4">
                                    <input class="form-control" id="BillingVATLabel" placeholder="VAT ID" type="number"> </div>
                            </div>
                            <div class="col-12 col-lg-10">
                                <div class="form-group mb-4">
                                    <input class="form-control" id="BillingPhoneabel" placeholder="Phone number" type="number"> </div>
                            </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>