Bootstrap E-commerce UI Kit for Developers
A well sought-out and beautiful design system for all type of e-commerce projects based on Bootstrap 4.x
Bootstrap-ecommerce gives you a full solution for all your e-commerce websites, online shopping applications, booking websites, product catalogs and landing pages. Speed up your design workflow with ready-to-use beautifully designed sample components for your daily projects.
Note: All components and elements are based on bootstrap frameworks. We have enhanced the components and added more elements for your ecommerce projects.
Benefits
The main purpose of this kit is to give a full solution to designers and developers in the categories of ecommerce, online marketplaces, booking platforms and product selling websites. This UI kit provides multiple combinations of examples and sample pages for you to work on including numerous components and element styles.
What this UI kit includes
Bootstrap ecommerce offers easy-to-use and fully customizable elements including CSS/SASS, JS and HTML files along with the templates
- Well organized file structure
- Fonts and Fonticons, Demo images
- SASS files with minimal code and variables
- jQuery and basic script codes, slider samples
- Clean code for HTML, CSS and SASS based on latest Bootstrap
- 50+ ready-to-use components
- Ready-to-use HTML templates
License
Rights
Copyright © 2020
You have rights for royalty free use of our resources for any and/or all of your personal and commercial projects. You may modify the resources according to your requirements and use them royalty free in any and/or all of your personal and commercial projects. For example, you may include this resource in a website you will be designing for a client. You are not required to attribute or link to Bootstrap-ecommerce in any of your projects. Bootstrap-ecommerce will not be responsible for any outcome that may occur during the course of usage of our resources. We reserve the rights to change prices and revise the resources usage policy at any moment.
Prohibitations
You do not have the rights to redistribute, resell, lease, license, sub-license or offer the file downloaded to any third party. For any rescalable web applications or software programs, you should not include our graphic resources as an additional attachment. This will be considered as a redistribution of our resources which is forbidden by us - Bootstrap-ecommerce
Quick start
To start using this ecommerce design system you will first need to import some files in your project or download ready to use starter templates.
File structure
📂 bootstrap-ecommerce-html/ │ ├── 📂 fonts/ │ ├── fontawesome icons │ ├── feather icons │ ├── roboto font │ └── inter-ui font │ ├── 📂 plugins/ │ ├── fancybox │ ├── sliders - owl, slicks, lightslider │ └── ... │ ├── 📂 images/ │ ├── logo, banners, avatars │ └── icons (png, svg) │ ├── 📂 sass/ │ ├── 🗁 bootstrap-essets/ bootstrap sass files │ ├── 🗁 ui-asets/ ... components, pages, sections,... │ ├── _variables-custom.scss │ ├── bootstrap.scss │ ├── responsive.scss │ └── ui.scss │ ├── 📂 css/ │ ├── bootstrap.css │ ├── responsive.css │ └── ui.css │ ├── 📂 js/ │ ├── bootstrap.bundle.min.js │ ├── jquery-2.0.0.min.js │ └── script.js │ └── 📂 HTML-components/ └── 100+ html components ready to use 🗋 page-blank-starter.html 🗋 page-content.html 🗋 page-user-login.html 🗋 page-user-register.html 🗋 page-index-1.html 🗋 page-index-2.html 🗋 page-index-3.html 🗋 page-listing.html ... more pages
CSS
Copy and paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<!-- Font awesome 5 -->
<link href="fonts/fontawesome/css/all.min.css" type="text/css" rel="stylesheet">
<!-- ui style -->
<link href="css/ui.css" rel="stylesheet" type="text/css"/>
<link href="css/responsive.css" rel="stylesheet" />
JS
Most of bootstrap components require the use of JavaScript to function. Specifically, they require jQuery, Bootstrap.bundle.js.
We added some popular plugins in the /plugins folder like owlslider and slickslider. Our script.js file contains some additional scripts which may come handy for your project.
<!-- jQuery -->
<script src="js/jquery-2.0.0.min.js" type="text/javascript"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.bundle.min.js" type="text/javascript"></script>
<!-- custom javascript -->
<script src="js/script.js" type="text/javascript"></script>
Starter template
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello World</title>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<!-- jQuery -->
<script src="js/jquery-2.0.0.min.js" type="text/javascript"></script>
<!-- Bootstrap files-->
<script src="js/bootstrap.bundle.min.js" type="text/javascript"></script>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<!-- Font awesome 5 -->
<link href="fonts/fontawesome/css/all.min.css" type="text/css" rel="stylesheet">
<!-- custom style -->
<link href="css/ui.css" rel="stylesheet" type="text/css"/>
<link href="css/responsive.css" rel="stylesheet" />
<!-- custom javascript -->
<script src="js/script.js" type="text/javascript"></script>
</head>
<body>
<header class="section-header">
<div class="container">
<a href="#" class="brand-wrap"><img class="logo" src="images/logo.png"></a>
</div> <!-- container.// -->
</header>
<section class="section-content padding-y">
<div class="container">
<header class="section-heading">
<h2 class="section-title">Starter page </h2>
</header><!-- sect-heading -->
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.</p>
</article>
</div> <!-- container .// -->
</section>
<!-- ========================= SECTION CONTENT END// ========================= -->
<footer class="section-footer border-top padding-y">
<div class="container">
<p> © Copyright 2020 All rights reserved</p>
<p> <a href="#">Terms and conditions</a> </p>
</div><!-- //container -->
</footer>
</body>
</html>
Colors
Main colors
Text colors
show codeColor classes
if you use SASS you can play around with the variables. the files can be found in /sass/_variables-custom.scss
Feel free to use bootstrap's color classes like bg-primary, for texts text-muted and so on
For more information visit:
https://getbootstrap.com/docs/4.3/utilities/colors/
Typography
show codeshow code
show code
More information
If you use SASS, you can play around with the variables, the files can be found in /sass/_variables-custom.scss or directly from bootsrap's source /sass/bootstrap-assets/type.scss
Feel free to use bootstrap's text classes like .lead, .blockquote, .small, for colors text-muted and so on
For more information visit:
https://getbootstrap.com/docs/4.3/content/typography/
Icons
Font Awesome icons
We have included some free icons from FontAwesome 5. You can use them by insterting these special tags, for example:
<i class="fa fa-star"></i> or <i class="fab fa-facebook"></i> List of icons: https://fontawesome.com/iconsFeather icons
We have included some free icons from Feather icons also. You can use them by insterting these special tags, for example:
<i class="feather icon-star"></i> or <i class="feather icon-facebook"></i> List of icons: https://fontawesome.com/iconsHelper classes
Margins and paddings
.padding-y{padding-top:40px; padding-bottom:40px;}
.padding-top{padding-top:40px;}
.padding-bottom{padding-bottom:40px;}
.padding-y-lg{padding-top:80px; padding-bottom:80px;}
.padding-top-lg{padding-top:80px;}
.padding-bottom-lg{padding-bottom:80px;}
.padding-y-sm{padding-top:20px; padding-bottom:20px;}
.padding-top-sm{padding-top:20px;}
.padding-bottom-sm{padding-bottom:20px;}
Positioning classes
- .center-xy - absolute centering
- .center-y - vertically centered
- .center-x - horizontally centered
- .absolute - {position:absolute}
- .relative - {position:relative}
Image and icon sizes
.img-xs{width:40px; height:40px; }
.img-sm{width:80px; height:80px; }
.img-md{width:140px; height:140px; }
.img-lg{width:250px; height:250px; }
.icon-xs{ width:32px; height:32px; line-height:32px; font-size:16px; }
.icon-sm{ width:42px; height:42px; line-height:42px; font-size:20px; }
.icon-md{width:60px; height:60px; line-height:60px; font-size:28px; }
.icon-lg{width:96px; height:96px; line-height:96px; font-size:42px; }
For more helper classes check file /sass/ui-assets/helpers/_helper-classes.scss
Alerts
show codeHow to customize
if you use sass you can play with variables. find file in /sass/_variables-custom.scss
Feel free to use bootstrap's alert classes like alert-dismissible, and JavaScript behavior and triggers from bootsrap's documentation
For more information visit:
https://getbootstrap.com/docs/4.3/components/alerts/
Buttons
show codeshow code
show code
show code show code
More styles
If you use SASS, you can play around with the variables, the files can be found in /sass/_variables-custom.scss
Feel free to use bootstrap's button classes like .btn-group or .btn-block
For more information visit:
https://getbootstrap.com/docs/4.3/components/buttons/
Forms
Switches
show codeCustomizes
If you use SASS, you can play around with the variables, the files can be found in /sass/_variables-custom.scss
Feel free to use bootstrap's form classes like .input-group, and sizing classes like form-control-lg and so on
For more information visit:
https://getbootstrap.com/docs/4.3/components/forms/
Badges and misc
Rating
Card and boxes
Customizes
If you use SASS, you can play around with the variables, the files can be found in /sass/_variables-custom.scss
Feel free to use bootstrap's card classes like card-img-top or .card-title and so on
For more information visit:
https://getbootstrap.com/docs/4.3/components/card/
Images
You can change values of sizes by changing class stylings .img-sm{} .img-md{} and other from /sass/ui-assets/helpers/_helper-classes.scss
Icon with text
Basic
Aligned top
show codeWith notification
show codeWith dropdown
show codeCustomizes
If you use SASS, you can play around with the variables and/or find file in /sass/ui-assets/components/elements.scss and check .icontext { ... }
For icon or image sizes use classes icon-xs, icon-sm, icon-md, icon-lg
for example:
<img class="icon icon-xs" src="images/avatars/avatar1.jpg">
Product list
show codeshow code
Customizes
The product card components can be found in /sass/ui-assets/components/_cards-product.scss and the file containing the variables to can be found in /sass/_variables-custom.scss
if you use sass you can play with variables. find file in /sass/_variables-custom.scss
Product detail
show codeFilters
show codeCustomizes
if you use sass you can play with variables. find file in /sass/_variables-custom.scss
Feel free to use bootstrap's classes.
For more information about checkboxes and radio elements visit:
https://getbootstrap.com/docs/4.3/components/input-group/#checkboxes-and-radios
Shopping cart
show codeFeature block samples
show codeshow code
show code
Customizes
You can change icon size or image sizes of infoblocks by changing class names img-sm or icon-sm to icon-md, icon-xs
List of available classes can be found from /sass/ui-assets/helpers/_helper-classes.scssFeel free to use bootstrap's color classes like bg-primary, and for texts text-muted and so on
Header sample
show codeMore headers
We've inclded many header samples.
For more ecommerce header examples check your downloaded file and find /_HTML-Components/_header-1.html and _header-2.html and so on
Carousels
Carousel items Owl plugin
show codeMore slider demos
We've inclded owlSlider and Slick slider plugins. Feel free to add any other sliders.
For more slider examples please check the page-sliders.html page for more sliders