Bootstrap 5 checkout page with payment details

HTML CSS JS Tidy

<div class="container">
    <div class="row m-0">
        <div class="col-lg-7 pb-5 pe-lg-5">
            <div class="row">
                <div class="col-12 p-5"> <img src="https://images.unsplash.com/photo-1510166089176-b57564a542b1?q=80&w=2848&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""> </div>
                <div class="row m-0 bg-light">
                    <div class="col-md-4 col-6 ps-30 pe-0 my-4">
                        <p class="text-muted">RAM</p>
                        <p class="h5">4<span class="ps-1">GB</span></p>
                    </div>
                    <div class="col-md-4 col-6  ps-30 my-4">
                        <p class="text-muted">Storage</p>
                        <p class="h5 m-0">64 GB</p>
                    </div>
                    <div class="col-md-4 col-6 ps-30 my-4">
                        <p class="text-muted">Display</p>
                        <p class="h5 m-0">4.7</p>
                    </div>
                    <div class="col-md-4 col-6 ps-30 my-4">
                        <p class="text-muted">Chip</p>
                        <p class="h5 m-0">A15 Bionic chip</p>
                    </div>
                    <div class="col-md-4 col-6 ps-30 my-4">
                        <p class="text-muted">Color</p>
                        <p class="h5 m-0">White</p>
                    </div>
                    <div class="col-md-4 col-6 ps-30 my-4">
                        <p class="text-muted">Camera</p>
                        <p class="h5 m-0"> 12MP Main camera</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-5 p-0 ps-lg-4">
            <div class="row m-0">
                <div class="col-12 px-4">
                    <div class="d-flex align-items-end mt-4 mb-2">
                        <p class="h4 m-0"><span class="pe-1">Apple</span><span class="pe-1">iPhone</span><span class="pe-1">SE</span></p>   
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <p class="textmuted">Qty</p>
                        <p class="fs-14 fw-bold">1</p>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <p class="textmuted">Subtotal</p>
                        <p class="fs-14 fw-bold"><span class="fas fa-dollar-sign pe-1"></span>$450</p>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <p class="textmuted">Shipping</p>
                        <p class="fs-14 fw-bold">Free</p>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <p class="textmuted">Promo code</p>
                        <p class="fs-14 fw-bold">-<span class="fas fa-dollar-sign px-1"></span>$25</p>
                    </div>
                    <div class="d-flex justify-content-between mb-3">
                        <p class="textmuted fw-bold">Total</p>
                        <div class="d-flex align-text-top "> <span class="fas fa-dollar-sign mt-1 pe-1 fs-14 "></span><span class="h4">$425</span> </div>
                    </div>
                </div>
                <div class="col-12 px-0">
                    <div class="row bg-light m-0">
                        <div class="col-12 px-4 my-4">
                            <p class="fw-bold">Payment detail</p>
                        </div>
                        <div class="col-12 px-4">
                            <div class="d-flex  mb-4"> <span class="">
                                        <p class="text-muted">Card number</p>
                                        <input class="form-control" type="text" value="8888 2222 9999 3333"
                                            placeholder="8888 2222 9999 3333">
                                    </span>
                                <div class=" w-100 d-flex flex-column align-items-end">
                                    <p class="text-muted">Expires</p>
                                    <input class="form-control2" type="text" value="04/2024" placeholder="MM/YYYY"> </div>
                            </div>
                            <div class="d-flex mb-5"> <span class="me-5">
                                        <p class="text-muted">Cardholder name</p>
                                        <input class="form-control" type="text" value="Jon David"
                                            placeholder="Name">
                                    </span>
                                <div class="w-100 d-flex flex-column align-items-end">
                                    <p class="text-muted">CVC</p>
                                    <input class="form-control3" type="text" value="755" placeholder="XXX"> </div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-0">
                        <div class="col-12  mb-4 p-0">
                            <div class="btn btn-primary">Buy<span class="fas fa-arrow-right ps-2"></span> </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

HTML CSS JS Tidy

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&family=Work+Sans:wght@800&display=swap');
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    padding: 15px;
    background-color: #eef0f3;
}

.container {
    margin: 20px auto;
    max-width: 1000px;
    background-color: white;
    padding: 0;
}

.form-control {
    height: 25px;
    width: 150px;
    border: none;
    border-radius: 0;
    font-weight: 800;
    padding: 0 0 5px 0;
    background-color: transparent;
    box-shadow: none;
    outline: none;
    border-bottom: 2px solid #ccc;
    margin: 0;
    font-size: 14px;
}

.form-control:focus {
    box-shadow: none;
    border-bottom: 2px solid #ccc;
    background-color: transparent;
}

.form-control2 {
    font-size: 14px;
    height: 20px;
    width: 55px;
    border: none;
    border-radius: 0;
    font-weight: 800;
    padding: 0 0 5px 0;
    background-color: transparent;
    box-shadow: none;
    outline: none;
    border-bottom: 2px solid #ccc;
    margin: 0;
}

.form-control2:focus {
    box-shadow: none;
    border-bottom: 2px solid #ccc;
    background-color: transparent;
}

.form-control3 {
    font-size: 14px;
    height: 20px;
    width: 30px;
    border: none;
    border-radius: 0;
    font-weight: 800;
    padding: 0 0 5px 0;
    background-color: transparent;
    box-shadow: none;
    outline: none;
    border-bottom: 2px solid #ccc;
    margin: 0;
}

.form-control3:focus {
    box-shadow: none;
    border-bottom: 2px solid #ccc;
    background-color: transparent;
}

p {
    margin: 0;
}

img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.text-muted {
    font-size: 10px;
}

.textmuted {
    color: #6c757d;
    font-size: 13px;
}

.fs-14 {
    font-size: 14px;
}

.btn.btn-primary {
    width: 100%;
    height: 55px;
    border-radius: 0;
    padding: 13px 0;
    background-color: black;
    border: none;
    font-weight: 600;
}

.btn.btn-primary:hover .fas {
    transform: translateX(10px);
    transition: transform 0.5s ease
}

.fw-900 {
    font-weight: 900;
}

::placeholder {
    font-size: 12px;
}

.ps-30 {
    padding-left: 30px;
}

.h4 {
    font-family: 'Work Sans', sans-serif !important;
    font-weight: 800 !important;
}

.textmuted,
h5,
.text-muted {
    font-family: 'Poppins', sans-serif;
}

HTML CSS JS Tidy

Bootstrap 5 checkout page with payment details

>_Console

Leave a Comment Cancel reply

>_Console

File Setting

Code Playground Setting

Add External Stylesheets and Script

Leave a Comment Cancel reply