How to create “Add to cart” button in Bootstrap ?
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: In this example, we will see how to add a cart button using Bootstrap.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Bootstrap Shopping Cart</ title >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" />
< link rel = "stylesheet"
href =
< script src =
</ script >
< script src =
</ script >
< style >
.container {
margin-top: 30px;
color: green;
}
span {
color: green;
}
</ style >
</ head >
< 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.
Last Updated :
10 May, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...