E-commerce Product Card in Detail Template with Bootstrap 4

E-commerce Product Card in Detail Template with Bootstrap 4
Copy link
Oct. 6, 2024
Bootstrap, Bootstrap 4, Product Card, Responsive, Card, Ecommerce
Full Screen 


<!doctype html>
<html>

<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css' rel='stylesheet'>
    <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'>
    <style>
        body {
    background-color: #eee
}

.container {
    width: 900px
}

.card {
    background-color: #fff;
    border: none;
    border-radius: 10px;
    width: 190px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

.image-container {
    position: relative
}

.thumbnail-image {
    border-radius: 10px !important
}

.discount {
    background-color: red;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 4px;
    padding-right: 4px;
    font-size: 10px;
    border-radius: 6px;
    color: #fff
}

.wishlist {
    height: 25px;
    width: 25px;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

.first {
    position: absolute;
    width: 100%;
    padding: 9px
}

.dress-name {
    font-size: 13px;
    font-weight: bold;
    width: 75%
}

.new-price {
    font-size: 13px;
    font-weight: bold;
    color: red
}

.old-price {
    font-size: 8px;
    font-weight: bold;
    color: grey
}

.btn {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    padding: 3px
}

.creme {
    background-color: #fff;
    border: 2px solid grey
}

.creme:hover {
    border: 3px solid grey
}

.creme:focus {
    background-color: grey
}

.red {
    background-color: #fff;
    border: 2px solid red
}

.red:hover {
    border: 3px solid red
}

.red:focus {
    background-color: red
}

.blue {
    background-color: #fff;
    border: 2px solid #40C4FF
}

.blue:hover {
    border: 3px solid #40C4FF
}

.blue:focus {
    background-color: #40C4FF
}

.darkblue {
    background-color: #fff;
    border: 2px solid #01579B
}

.darkblue:hover {
    border: 3px solid #01579B
}

.darkblue:focus {
    background-color: #01579B
}

.yellow {
    background-color: #fff;
    border: 2px solid #FFCA28
}

.yellow:hover {
    border-radius: 3px solid #FFCA28
}

.yellow:focus {
    background-color: #FFCA28
}

.item-size {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid grey;
    color: grey;
    font-size: 10px;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center
}

.rating-star {
    font-size: 10px !important
}

.rating-number {
    font-size: 10px;
    color: grey
}

.buy {
    font-size: 12px;
    color: purple;
    font-weight: 500
}

.voutchers {
    background-color: #fff;
    border: none;
    border-radius: 10px;
    width: 190px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    overflow: hidden
}

.voutcher-divider {
    display: flex
}

.voutcher-left {
    width: 60%
}

.voutcher-name {
    color: grey;
    font-size: 9px;
    font-weight: 500
}

.voutcher-code {
    color: red;
    font-size: 11px;
    font-weight: bold
}

.voutcher-right {
    width: 40%;
    background-color: purple;
    color: #fff
}

.discount-percent {
    font-size: 12px;
    font-weight: bold;
    position: relative;
    top: 5px
}

.off {
    font-size: 14px;
    position: relative;
    bottom: 5px
}
    </style>
</head>

<body>
    <div class="container mt-5">
        <div class="row">
            <div class="col mt-2">
                <div class="card">
                    <div class="image-container">
                        <div class="first">
                            <div class="d-flex justify-content-between align-items-center"> <span
                                    class="discount">-25%</span> <span class="wishlist"><i
                                        class="fa fa-heart-o"></i></span> </div>
                        </div> <img src="https://i.imgur.com/8JIWpnw.jpg" class="img-fluid rounded thumbnail-image">
                    </div>
                    <div class="product-detail-container p-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="dress-name">White traditional long dress</h5>
                            <div class="d-flex flex-column mb-2"> <span class="new-price">$3.99</span> <small
                                    class="old-price text-right">$5.99</small> </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center pt-1">
                            <div class="color-select d-flex "> <input type="button" name="grey" class="btn creme">
                                <input type="button" name="red" class="btn red ml-2"> <input type="button" name="blue"
                                    class="btn blue ml-2"> </div>
                            <div class="d-flex "> <span class="item-size mr-2 btn" type="button">S</span> <span
                                    class="item-size mr-2 btn" type="button">M</span> <span class="item-size btn"
                                    type="button">L</span> </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center pt-1">
                            <div> <i class="fa fa-star-o rating-star"></i> <span class="rating-number">4.8</span> </div>
                            <span class="buy">BUY +</span>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <div class="card voutchers">
                        <div class="voutcher-divider">
                            <div class="voutcher-left text-center"> <span class="voutcher-name">Monday Happy</span>
                                <h5 class="voutcher-code">#MONHPY</h5>
                            </div>
                            <div class="voutcher-right text-center border-left">
                                <h5 class="discount-percent">20%</h5> <span class="off">Off</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col mt-2">
                <div class="card">
                    <div class="image-container">
                        <div class="first">
                            <div class="d-flex justify-content-between align-items-center"> <span
                                    class="discount">-25%</span> <span class="wishlist"><i
                                        class="fa fa-heart-o"></i></span> </div>
                        </div> <img src="https://i.imgur.com/PtepOpe.jpg" class="img-fluid rounded thumbnail-image">
                    </div>
                    <div class="product-detail-container p-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="dress-name">Long sleeve denim jacket</h5>
                            <div class="d-flex flex-column mb-2"> <span class="new-price">$3.99</span> <small
                                    class="old-price text-right">$5.99</small> </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center pt-1">
                            <div class="color-select d-flex "> <input type="button" name="grey" class="btn creme">
                                <input type="button" name="darkblue" class="btn darkblue ml-2"> </div>
                            <div class="d-flex "> <span class="item-size mr-2 btn" type="button">S</span> <span
                                    class="item-size mr-2 btn" type="button">M</span> <span class="item-size btn"
                                    type="button">L</span> </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center pt-1">
                            <div> <i class="fa fa-star-o rating-star"></i> <span class="rating-number">4.8</span> </div>
                            <span class="buy">BUY +</span>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <div class="card voutchers">
                        <div class="voutcher-divider">
                            <div class="voutcher-left text-center"> <span class="voutcher-name">Payday Surprise</span>
                                <h5 class="voutcher-code">#SRPSPYDY</h5>
                            </div>
                            <div class="voutcher-right text-center border-left">
                                <h5 class="discount-percent">20%</h5> <span class="off">Off</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col mt-2">
                <div class="card">
                    <div class="image-container">
                        <div class="first">
                            <div class="d-flex justify-content-between align-items-center"> <span
                                    class="discount">-25%</span> <span class="wishlist"><i
                                        class="fa fa-heart-o"></i></span> </div>
                        </div> <img src="https://i.imgur.com/ePJKs8Q.jpg" class="img-fluid rounded thumbnail-image">
                    </div>
                    <div class="product-detail-container p-2">
                        <div class="d-flex justify-content-between ">
                            <h5 class="dress-name">Hush Puppies</h5>
                            <div class="d-flex flex-column mb-2"> <span class="new-price">$3.99</span> <small
                                    class="old-price text-right">$5.99</small> </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center pt-1">
                            <div class="color-select d-flex "> <input type="button" name="grey" class="btn creme">
                                <input type="button" name="yellow" class="btn yellow ml-2"> <input type="button"
                                    name="blue" class="btn blue ml-2"> </div>
                            <div class="d-flex "> <span class="item-size mr-2 btn" type="button">S</span> <span
                                    class="item-size mr-2 btn" type="button">M</span> <span class="item-size btn"
                                    type="button">L</span> </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center pt-1">
                            <div> <i class="fa fa-star-o rating-star"></i> <span class="rating-number">4.2</span> </div>
                            <span class="buy">BUY +</span>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <div class="card voutchers">
                        <div class="voutcher-divider">
                            <div class="voutcher-left text-center"> <span class="voutcher-name">First order</span>
                                <h5 class="voutcher-code">#HPYFRST</h5>
                            </div>
                            <div class="voutcher-right text-center border-left">
                                <h5 class="discount-percent">20%</h5> <span class="off">Off</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col mt-2">
                <div class="card">
                    <div class="image-container">
                        <div class="first">
                            <div class="d-flex justify-content-between align-items-center"> <span
                                    class="discount">-25%</span> <span class="wishlist"><i
                                        class="fa fa-heart-o"></i></span> </div>
                        </div> <img src="https://i.imgur.com/snffLH3.jpg" class="img-fluid rounded thumbnail-image">
                    </div>
                    <div class="product-detail-container p-2">
                        <div class="d-flex justify-content-between ">
                            <h5 class="dress-name">Athens skirt </h5>
                            <div class="d-flex flex-column mb-2"> <span class="new-price">$3.99</span> <small
                                    class="old-price text-right">$5.99</small> </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center pt-1">
                            <div class="color-select d-flex "> <input type="button" name="grey" class="btn creme">
                                <input type="button" name="red" class="btn red ml-2"> <input type="button" name="blue"
                                    class="btn blue ml-2"> </div>
                            <div class="d-flex "> <span class="item-size mr-2 btn" type="button">S</span> <span
                                    class="item-size mr-2 btn" type="button">M</span> <span class="item-size btn"
                                    type="button">L</span> </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center pt-1">
                            <div> <i class="fa fa-star-o rating-star"></i> <span class="rating-number">3.8</span> </div>
                            <span class="buy">BUY +</span>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <div class="card voutchers">
                        <div class="voutcher-divider">
                            <div class="voutcher-left text-center"> <span class="voutcher-name">Vegetarian Food</span>
                                <h5 class="voutcher-code">#VEGANLOVE</h5>
                            </div>
                            <div class="voutcher-right text-center border-left">
                                <h5 class="discount-percent">20%</h5> <span class="off">Off</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
    <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js'></script>
    <script type='text/javascript' src='https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js'></script>
</body>

</html>
                                            
                                        

/* Doesn't require any CSS. */

                                        

//Doesn't require any JS.

This Bootstrap 4 snippet provides a visually appealing and functional product card template designed for e-commerce websites. It offers a clean and organized layout for displaying product information, including images, titles, prices, and buttons. The template is fully customizable, allowing you to tailor its appearance to match your website's design and branding.

Key Features:

  • Responsive Design: The product cards adapt seamlessly to different screen sizes, ensuring a consistent user experience across devices.
  • Customizable Styling: Easily modify the appearance of the product cards using Bootstrap's CSS classes to match your website's design and branding.
  • Clear and Concise Presentation: The cards are designed to present product information in a clear and concise manner, making it easy for users to understand and make purchasing decisions.

Implementation:

  • Include Bootstrap 4: Ensure you have Bootstrap 4 installed and configured in your project.
  • Create the HTML Structure: Set up the basic HTML structure for the product cards, including the container, card rows, and columns.
  • Apply Bootstrap Classes: Use Bootstrap's CSS classes to style the product cards and their elements, such as card, card-img-top, card-body, card-title, card-text, btn, and star-rating.
  • Customize as Needed: Modify the Bootstrap classes and HTML structure to customize the appearance and content of the product cards according to your specific requirements.
Latest Snippets
View All
DocsAllOver - Responsive Blog Grid with Tailwind CSS

Responsive Blog Grid with Tailwind CSS

Tailwind
DocsAllOver - User-Friendly Travel Booking Form in Bootstrap 5

User-Friendly Travel Booking Form in Bootstrap 5

CSS
DocsAllOver - Responsive CSS3 Pricing Table with Hover Animation

Responsive CSS3 Pricing Table with Hover Animation

CSS
DocsAllOver - Responsive Contact Us Forms in Bootstrap 5

Responsive Contact Us Forms in Bootstrap 5

Bootstrap
DocsAllOver - Notification UI Design with Navbar in Bootstrap 5

Notification UI Design with Navbar in Bootstrap 5

Bootstrap
DocsAllOver - Interactive Social Media Buttons with CSS and JS

Interactive Social Media Buttons with CSS and JS

CSS
DocsAllOver - Lightweight FAQ Accordion Component with CSS

Lightweight FAQ Accordion Component with CSS

CSS
DocsAllOver - Responsive Registration Form Page with Image in Tailwind

Responsive Registration Form Page with Image in Tailwind

Tailwind
DocsAllOver - Timeline Roadmap Example in Tailwind CSS

Timeline Roadmap Example in Tailwind CSS

Tailwind
DocsAllOver - Notification Page Design Examples in Bootstrap 5

Notification Page Design Examples in Bootstrap 5

Bootstrap
DocsAllOver - Need Help Support Page with Search in Bootstrap 5

Need Help Support Page with Search in Bootstrap 5

Bootstrap
DocsAllOver - Responsive Get In Touch Contact Form in Tailwind CSS

Responsive Get In Touch Contact Form in Tailwind CSS

Tailwind

Building Blocks for Your Web Pages

Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.

Bootstrap

Browse Snippets

Tailwind

Browse Snippets

CSS

Browse Snippets
See More Categories

DocsAllOver

Where knowledge is just a click away ! DocsAllOver is a one-stop-shop for all your software programming needs, from beginner tutorials to advanced documentation

Get In Touch

We'd love to hear from you! Get in touch and let's collaborate on something great

Quick Links

Home Search Link In Bio Privacy Policy

Popular Links

Technical Docs FAQ's Tools Blogs
Copyright copyright © Docsallover - Your One Shop Stop For Documentation