{"id":10349,"date":"2024-03-04T10:30:00","date_gmt":"2024-03-04T10:30:00","guid":{"rendered":"https:\/\/codehim.com\/?p=10349"},"modified":"2024-03-04T08:30:59","modified_gmt":"2024-03-04T03:30:59","slug":"product-card-using-bootstrap-5","status":"publish","type":"post","link":"https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/","title":{"rendered":"Product Card Using Bootstrap 5"},"content":{"rendered":"

This code creates a product card using Bootstrap 5. It showcases product details attractively. It’s helpful for displaying items with images, titles, ratings, prices, and an ‘Add to Cart’ button. This layout enhances product presentation on websites.<\/p>\n

You can use this code to build stylish product cards<\/a> on your website, enhancing the visual appeal of your product listings. The benefit lies in creating an engaging and user-friendly interface, improving the overall shopping experience for your visitors.<\/p>\n

How to Create Product Card Using Bootstrap 5<\/h2>\n

1. Begin by adding the necessary CSS links for Bootstrap<\/a> and Bootstrap Icons in the <head><\/code> section of your HTML file.<\/p>\n

<link rel='stylesheet' href='https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.1\/dist\/css\/bootstrap.min.css'>\r\n<link rel='stylesheet' href='https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.10.5\/font\/bootstrap-icons.css'>\r\n<\/pre>\n
2. Create a container div using the Bootstrap class ‘container m-4’ to set the margin. Inside it, build a card with the ‘card’ class and customize its appearance with ‘border-0 rounded-0 shadow’.<\/p>\n
Within the card, include the product image, title, rating stars, and bookmark icon. Utilize Bootstrap’s grid system for alignment.<\/p>\n
Use the grid system again to showcase the product price and the ‘Add to Cart’ button at the bottom of the card.<\/p>\n
<div class=\"container m-4\">\r\n  <div class=\"card border-0 rounded-0 shadow\" style=\"width: 18rem;\">\r\n    <img src=\"https:\/\/codingyaar.com\/wp-content\/uploads\/bag-scaled.jpg\" class=\"card-img-top rounded-0\" alt=\"...\">\r\n    <div class=\"card-body mt-3 mb-3\">\r\n      <div class=\"row\">\r\n        <div class=\"col-10\">\r\n          <h4 class=\"card-title\">Product title<\/h4>\r\n          <p class=\"card-text\">\r\n            <i class=\"bi bi-star-fill text-warning\"><\/i>\r\n            <i class=\"bi bi-star-fill text-warning\"><\/i>\r\n            <i class=\"bi bi-star-fill text-warning\"><\/i>\r\n            <i class=\"bi bi-star-fill text-warning\"><\/i>\r\n            (123)\r\n          <\/p>\r\n        <\/div>\r\n        <div class=\"col-2\">\r\n          <i class=\"bi bi-bookmark-plus fs-2\"><\/i>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"row align-items-center text-center g-0\">\r\n      <div class=\"col-4\">\r\n        <h5>$129<\/h5>\r\n      <\/div>\r\n      <div class=\"col-8\">\r\n        <a href=\"#\" class=\"btn btn-dark w-100 p-3 rounded-0 text-warning\">ADD TO CART<\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<p class=\"mt-5 text-center\">Get a step-by-step written explanation here: <a href=\"https:\/\/codingyaar.com\/product-card-bootstrap-html\" target=\"_blank\">Bootstrap 5 Product Card<\/a> <\/p>\r\n<p class=\"mt-5 text-center\">Get a step-by-step video explanation here: <a href=\"https:\/\/youtu.be\/4jXWB-E_MqI\" target=\"_blank\">Bootstrap 5 Product Card<\/a> <\/p>\r\n<\/pre>\n
Feel free to customize the code further based on your needs. Adjust colors, fonts, and sizes to match your website’s theme.<\/p>\n
That’s all! hopefully, you have successfully created a Product Card Using Bootstrap 5. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This code creates a product card using Bootstrap 5. It showcases product details attractively. It’s helpful for displaying items with…<\/p>\n","protected":false},"author":1,"featured_media":10359,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[123],"tags":[],"class_list":["post-10349","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap"],"acf":[],"yoast_head":"\nProduct Card Using Bootstrap 5 — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Product Card Using Bootstrap 5. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Product Card Using Bootstrap 5 — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Product Card Using Bootstrap 5. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-04T10:30:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Product-Card-Using-Bootstrap-5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"980\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Product Card Using Bootstrap 5\",\"datePublished\":\"2024-03-04T10:30:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/\"},\"wordCount\":226,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Product-Card-Using-Bootstrap-5.png\",\"articleSection\":[\"Bootstrap\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/\",\"url\":\"https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/\",\"name\":\"Product Card Using Bootstrap 5 — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Product-Card-Using-Bootstrap-5.png\",\"datePublished\":\"2024-03-04T10:30:00+00:00\",\"description\":\"Here is a free code snippet to create a Product Card Using Bootstrap 5. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Product-Card-Using-Bootstrap-5.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Product-Card-Using-Bootstrap-5.png\",\"width\":1280,\"height\":980,\"caption\":\"Product Card Using Bootstrap 5\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap\",\"item\":\"https:\/\/codehim.com\/category\/bootstrap\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Product Card Using Bootstrap 5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Product Card Using Bootstrap 5 — CodeHim","description":"Here is a free code snippet to create a Product Card Using Bootstrap 5. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/","og_locale":"en_US","og_type":"article","og_title":"Product Card Using Bootstrap 5 — CodeHim","og_description":"Here is a free code snippet to create a Product Card Using Bootstrap 5. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-03-04T10:30:00+00:00","og_image":[{"width":1280,"height":980,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Product-Card-Using-Bootstrap-5.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Product Card Using Bootstrap 5","datePublished":"2024-03-04T10:30:00+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/"},"wordCount":226,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Product-Card-Using-Bootstrap-5.png","articleSection":["Bootstrap"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/","url":"https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/","name":"Product Card Using Bootstrap 5 — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Product-Card-Using-Bootstrap-5.png","datePublished":"2024-03-04T10:30:00+00:00","description":"Here is a free code snippet to create a Product Card Using Bootstrap 5. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Product-Card-Using-Bootstrap-5.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Product-Card-Using-Bootstrap-5.png","width":1280,"height":980,"caption":"Product Card Using Bootstrap 5"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/bootstrap\/product-card-using-bootstrap-5\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Bootstrap","item":"https:\/\/codehim.com\/category\/bootstrap\/"},{"@type":"ListItem","position":3,"name":"Product Card Using Bootstrap 5"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":3259,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10349","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=10349"}],"version-history":[{"count":1,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10349\/revisions"}],"predecessor-version":[{"id":11293,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10349\/revisions\/11293"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/10359"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=10349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=10349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=10349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}