Skip to content
Related Articles

Related Articles

Improve Article

How to create “Add to cart” button in Bootstrap ?

  • Difficulty Level : Medium
  • Last Updated : 15 Jul, 2021

Bootstrap includes a large variety of button styles, each having some common and some different attributes in them. The “add to cart” button acts as a container like a typical shopping cart in a mall, where you collect the stuff that you want to purchase. “Add to cart” buttons are usually provided on e-commerce websites and are also used on other websites which include purchasing products.

Bootstrap CDN Links:

  • Before the code, you just need to include the following library or script for adding the “add to cart” button in the application.

    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
    <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js”> </script>

     



  • To include a small cart-icon that we have used in the example below, you just need to add this stylesheet to your program.

    <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css”>

  • And you also need to include the following class wherever you want to display the cart-icon.

    <span class=”glyphicon glyphicon-shopping-cart”> </span>

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap Shopping Cart</title>
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
  
    <!-- CSS only -->
    <link rel="stylesheet" href=
  
    <!-- JavaScript Bundle with Popper -->
    <script src=
    </script>
  
    <script src=
    </script>
  
    <!--CSS Code-->
    <style>
        .container {
            margin-top: 30px;
            color: green;
        }
  
        span {
            color: green;
        }
    </style>
</head>
  
<!--Body tag-->
<body>
    <div class="container" align="center">
        <h2>GeeksforGeeks</h2>
        <h3>Shopping-cart</h3>
        <p>
            <button type="button" 
                class="btn btn-default btn-sm">
                <span class="glyphicon 
                    glyphicon-shopping-cart">
                </span>
                <b> Add to Cart </b>
            </button>
        </p>
    </div>
</body>
  
</html>

Output: Now, as you can see in the output, we have included the Add to cart button in our HTML body with a little cart icon on it.




My Personal Notes arrow_drop_up
Recommended Articles
Page :