How to create "Add to cart" button in Bootstrap ? - GeeksforGeeks

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> 
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”>
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>
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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />      <!-- JavaScript Bundle with Popper -->    <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>      <!--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.
Bootstrap-Questions
HTML-Questions
Picked
Bootstrap
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
Tailwind CSS vs Bootstrap
How to keep gap between columns using Bootstrap?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)