How to Create Best Ecommerce Cart Using Bootstrap With Free Source Code

on

Hello welcome to coding surfer during this project you'll know the way to build the ecommerce cart using bootstrap. The cart this ecommerce cart is that the best example of how you'll get code of this bootstrap ecommerce cart.

You can use this ecomerce cart in your ecommerce website or example project it's really unique and delightful design within the top of the cart there's the image of your product name and then your price then view button add to cart button , and like button.

I use this Cart to create my ecommerce site example project.

1> When you hover on the image the image size was decreased by 10%.

2>When you hover on the like and view button the size of these button increased by 10%.

3>Bellow the image and price section there is minor shadow.

There is no external css file added on this projects only inline css is added and bootstrap.

Also read :  How to Create Flappy Bird Game In Python | Free Tutorial With Souce Code

Also read :  Bluehost Review 2020 | Is Bluehost is worthy for price [truth revealed] - best review

Code of this Card -

Css code : -

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
    integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

  <style type="text/css">
    .col-md-5 {
      height: auto;
      display: inline-block;
      margin-top: 5%;
    }

    .col-md-5 img {
      width: 110%;
      max-width: 500px;
      max-height: 500px;
      min-width: 268px;
      min-height: 268px;
      border: 2px solid grey;

      transition: transform .2s;
      /* Animation */
      margin-left: -5%;
      height: auto;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    .col-md-5 img:hover {
      transform: scale(0.8);
    }

    .like {
      transition: transform .2s;
      /* Animation */
    }

    .like:hover {
      transform: scale(1.5);
    }

    h3 {
      margin-left: -50px;
      text-shadow: 2px 2px 4px #000000;
    }


    body .no-padding {
      padding-left: 0%;
      padding-right: 0%;
    }
  </style>

Html and Bootstrap Code : - 

<div class="container">
    <div class="col-xs-5 col-sm-5 col-md-5">
      <div class="card-group">
        <div class="card">
          <img src="" alt="">
          <div class="card-body">
            <h5 style="text-align: center;"> <span class="card-title" style="text-align: center;">Best Spray Bottle Available</span></h5>
            <p class="card-text" style="text-align: center; margin-bottom: -7px; margin-top: -5px;"><span
                style="text-shadow: 1px 1px 2px #D4AF37; color: #FF8C00; font-weight: bolder; font-size: 19px;">$21</span>
            </p>

          </div>
          <div class="card-footer">

            <button type="button" class="btn btn-success cart">
              <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="currentColor" class="bi bi-cart-fill"
                viewBox="0 0 16 16" style="margin-top: -3px;">
                <path fill-rule="evenodd"
                  d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm7 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" />
              </svg> <span style="font-size: 13px; font-weight: bolder;"> ADD TO CART </span>
            </button></span>

            <button class="btn bg-transparent like" style="margin-left: -10px; margin-right: -10px; float: right;">
              <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="red" class="bi bi-heart-fill"
                viewBox="0 0 16 16">
                <path fill-rule="evenodd"
                  d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z" />
              </svg>
            </button>

            <a href="#"><button type="button" class="btn bg-transparent like" style="float: right;">
                <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="currentColor"
                  class="bi bi-eye-fill" viewBox="0 0 16 16">
                  <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z" />
                  <path
                    d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z" />
                </svg></button></a>


          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
    crossorigin="anonymous"></script>

Also read : How to create Snake Game Using Python | Free Python Project with source code

Conclusion - 

Create this ecommerce card and you'll use it in your project . Friends, if you need to get the present day updates of our website, then please join our Coding Surfer, this can maintain you from getting the state-of-the-art updates about our upcoming.

Also read : How to Make Snake Game In JavaScript | Free tutorial With Source Code

Also read : How to Create WordPress Website with Bluehost | Step by Step Tutorial for Starters in 2020

Also read : How to make WordPress website with BlueHost in 10 minutes | best hosting BlueHost
Also read : Straightforward Forex Tricks You Can Use Today
Also read : How Social Media Can Impact Your SEO In 2020 | Information about SEO

Comments

Post a Comment