Kumo - Fashion E-commerce HTML Template

1. Introduction

Kumo is responsive e-commerce HTML template designed for fashion store, Clothing market, shopping, grocery, food, furniture and wholesale market and similar websites.

We put a lot of love and effort to make Kumo a useful template for everyone and now It comes with 8+ unique home page & colors. We are keen to release continuous long term updates and lots of new features will be coming soon in the future releases. Once you purchased Kumo Template, you will be entitled to free download of all future updates for the same license.

Author: Themezhub
Contact: Themezhub@gmail.com
website: https://Themezhub.com

NOTE: A single license can be used only for one domain or client. Each use of the template requires a separate license. We hope you will follow the rules as it will help us to continue supporting our template and providing a free future updates.

1.2 Installation Guide

This is the simple static HTML template so no need any headech to install it.

Follow it very simple steps:

Main(demo folder) + assets (folder) = Enjoy your demo.

3. Beginning of Page

Below code is used at the beginning of all HTML pages to detect Internet Explorer browser version and set a spesific class applied to Internet Explorer versions.


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="author" content="www.frebsite.nl" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		
		<title>Kumo - Fashion E-commerce HTML Template</title>
		 
		<!-- Custom CSS -->
		<link href="assets/css/styles.css" rel="stylesheet">
		
	</head>

Logo


<a class="nav-brand" href="#">
	<img src="assets/img/logo.png" class="logo" alt="" />
</a>

Navigation


<!-- ============================================================== -->
<!-- header  -->
<!-- ============================================================== -->
<!-- Start Navigation -->
<div class="header header-light dark-text">
	<div class="container">
		<nav id="navigation" class="navigation navigation-landscape">
			<div class="nav-header">
				<a class="nav-brand" href="#">
					<img src="assets/img/logo.png" class="logo" alt="" />
				</a>
				<div class="nav-toggle"></div>
				<div class="mobile_nav">
					<ul>
						<li>
						<a href="#" onclick="openSearch()">
							<i class="lni lni-search-alt"></i>
						</a>
					</li>
					<li>
						<a href="#" data-toggle="modal" data-target="#login">
							<i class="lni lni-user"></i>
						</a>
					</li>
					<li>
						<a href="#" onclick="openWishlist()">
							<i class="lni lni-heart"></i><span class="dn-counter">2</span>
						</a>
					</li>
					<li>
						<a href="#" onclick="openCart()">
							<i class="lni lni-shopping-basket"></i><span class="dn-counter">0</span>
						</a>
					</li>
					</ul>
				</div>
			</div>
			<div class="nav-menus-wrapper" style="transition-property: none;">
				<ul class="nav-menu">
				
					<li><a href="#">Home</a>
						<ul class="nav-dropdown nav-submenu">
							<li><a href="index.html">Home 1</a></li>
							<li><a href="home-2.html">Home 2</a></li>
							<li><a href="home-3.html">Home 3</a></li>
							<li><a href="home-4.html">Home 4</a></li>
							<li><a href="home-5.html">Home 5</a></li>
							<li><a href="home-6.html">Home 6</a></li>
							<li><a href="home-7.html">Home 7</a></li>
							<li><a href="home-8.html">Home 8</a></li>
							<li><a href="home-9.html">Home 9</a></li>
							<li><a href="home-10.html">Home 10</a></li>
						</ul>
					</li>
					
					<li><a href="javascript:void(0);">Shop</a>
						<ul class="nav-dropdown nav-submenu">
							<li><a href="javascript:void(0);">Account Dashboard</a>
								<ul class="nav-dropdown nav-submenu">
									<li><a href="my-orders.html">My Order</a></li>
									<li><a href="wishlist.html">Wishlist</a></li>
									<li><a href="profile-info.html">Profile Info</a></li>
									<li><a href="addresses.html">Addresses</a></li>
									<li><a href="payment-methode.html">Payment Methode</a></li>
								</ul>
							</li>
							<li><a href="javascript:void(0);">Support</a>
								<ul class="nav-dropdown nav-submenu">
									<li><a href="shoping-cart.html">Shopping Cart</a></li>
									<li><a href="checkout.html">Checkout</a></li>
									<li><a href="complete-order.html">Order Complete</a></li>
								</ul>
							</li>
							<li><a href="shop-style-1.html">Shop Style 01</a></li>
							<li><a href="shop-style-2.html">Shop Style 02</a></li>
							<li><a href="shop-style-3.html">Shop Style 03</a></li>
							<li><a href="shop-style-4.html">Shop Style 04</a></li>
							<li><a href="shop-style-5.html">Shop Style 05</a></li>
							<li><a href="shop-list-view.html">Shop List Style</a></li>
						</ul>
					</li>
					
					<li><a href="javascript:void(0);">Product</a>
						<ul class="nav-dropdown nav-submenu">
							<li><a href="shop-single-v1.html">Product Detail v01</a></li>
							<li><a href="shop-single-v2.html">Product Detail v02</a></li>
							<li><a href="shop-single-v3.html">Product Detail v03</a></li>
							<li><a href="shop-single-v4.html">Product Detail v04</a></li>
						</ul>
					</li>
					
					<li><a href="javascript:void(0);">Pages</a>
						<ul class="nav-dropdown nav-submenu">
							<li><a href="blog.html">Blog Style</a></li>
							<li><a href="about-us.html">About Us</a></li>
							<li><a href="contact.html">Contact</a></li>
							<li><a href="404.html">404 Page</a></li>
							<li><a href="privacy.html">Privacy Policy</a></li>
							<li><a href="faq.html">FAQs</a></li>
						</ul>
					</li>
					
					<li><a href="docs.html">Docs</a></li>
					
				</ul>
				
				<ul class="nav-menu nav-menu-social align-to-right">
					<li>
						<a href="#" onclick="openSearch()">
							<i class="lni lni-search-alt"></i>
						</a>
					</li>
					<li>
						<a href="#" data-toggle="modal" data-target="#login">
							<i class="lni lni-user"></i>
						</a>
					</li>
					<li>
						<a href="#" onclick="openWishlist()">
							<i class="lni lni-heart"></i><span class="dn-counter">2</span>
						</a>
					</li>
					<li>
						<a href="#" onclick="openCart()">
							<i class="lni lni-shopping-basket"></i><span class="dn-counter">3</span>
						</a>
					</li>
				</ul>
			</div>
		</nav>
	</div>
</div>
<!-- End Navigation -->
<div class="clearfix"></div>
<!-- ============================================================== -->
<!-- Top header  -->
<!-- ============================================================== -->

Page Title


<!-- ============================ Page Title Start================================== -->
<section class="page-title">
	<div class="container">
		<div class="row">
			<div class="col-lg-12 col-md-12">
				
				<div class="breadcrumbs-wrap">
					<h1 class="breadcrumb-title">Who We are?</h1>
					<nav aria-label="breadcrumb">
						<ol class="breadcrumb">
							<li class="breadcrumb-item"><a href="#">Home</a></li>
							<li class="breadcrumb-item active" aria-current="page">About Us</li>
						</ol>
					</nav>
				</div>
				
			</div>
		</div>
	</div>
</section>
<!-- ============================ Page Title End ================================== -->

Product Style 1

	
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
	<div class="product_grid card b-0">
	<div class="badge bg-info text-white position-absolute ft-regular ab-left text-upper">New</div>
	<button class="btn btn_love position-absolute ab-right snackbar-wishlist"><i class="far fa-heart"></i></button> 
	<div class="card-body p-0">
		<div class="shop_thumb position-relative">
			<a class="card-img-top d-block overflow-hidden" href="shop-single-v1.html"><img class="card-img-top" src="assets/img/product/2.jpg" alt="..."></a>
			<div class="product-hover-overlay bg-dark d-flex align-items-center justify-content-center">
				<div class="edlio"><a href="#" data-toggle="modal" data-target="#quickview" class="text-white fs-sm ft-medium"><i class="fas fa-eye mr-1"></i>Quick View</a></div>
			</div>
		</div>
	</div>
	<div class="card-footers b-0 pt-3 px-2 bg-white d-flex align-items-start justify-content-center">
		<div class="text-left">
			<div class="text-center">
				<h5 class="fw-bolder fs-md mb-0 lh-1 mb-1"><a href="shop-single-v1.html">Formal Men Lowers</a></h5>
				<div class="elis_rty"><span class="text-muted ft-medium line-through mr-2">$129.00</span><span class="ft-bold theme-cl fs-md">$79.00</span></div>
			</div>
		</div>
	</div>
</div>
</div>

Product Style 2

	
<div class="product_grid card b-0">
	<div class="badge bg-info text-white position-absolute ft-regular ab-left text-upper">Sale</div>
	<div class="badge bg-danger text-white position-absolute ft-regular ab-right text-upper">-40%</div>
	<div class="card-body p-0">
		<div class="shop_thumb position-relative">
			<a class="card-img-top d-block overflow-hidden" href="shop-single-v1.html"><img class="card-img-top" src="assets/img/product/2.jpg" alt="..."></a>
			<div class="product-hover-overlay d-flex align-items-center justify-content-between">
				<div class="edlio"><a href="javascript:void(0);" class="text-underline fs-sm ft-bold snackbar-addcart">Add To Cart</a></div>
				<div class="edlio d-flex align-items-center">
					<button class="btn auto btn_love mr-2 snackbar-wishlist"><i class="far fa-heart"></i></button>
					<a href="#" class="text-underline" data-toggle="modal" data-target="#quickview"><i class="fas fa-expand-arrows-alt"></i></a>
				</div>
			</div>
		</div>
	</div>
	<div class="card-footer b-0 p-0 pt-2 bg-white d-flex align-items-start justify-content-between">
		<div class="text-left">
			<div class="text-left">
				<div class="star-rating align-items-center d-flex justify-content-left mb-1 p-0">
					<i class="fas fa-star"></i>
					<i class="fas fa-star"></i>
					<i class="fas fa-star"></i>
					<i class="fas fa-star"></i>
					<i class="fas fa-star"></i>
					<span class="small">(0 Reviews)</span>
				</div>
				<h5 class="fs-md mb-0 lh-1 mb-1"><a href="shop-single-v1.html">Boys Solid Sweatshirt</a></h5>
				<div class="elis_rty"><span class="ft-bold text-dark fs-sm">$129</span></div>
			</div>
		</div>
	</div>
</div>

Product Style 3

	
<div class="product_grid card b-0">
	<div class="badge bg-info text-white position-absolute ft-regular ab-left text-upper">Sale</div>
	<div class="badge bg-danger text-white position-absolute ft-regular ab-right text-upper">-40%</div>
	<div class="card-body p-0">
		<div class="shop_thumb position-relative">
			<a class="card-img-top d-block overflow-hidden" href="shop-single-v1.html"><img class="card-img-top" src="assets/img/product/16.png" alt="..."></a>
			<div class="product-left-hover-overlay">
				<ul class="left-over-buttons">
					<li><a href="javascript:void(0);" class="d-inline-flex circle align-items-center justify-content-center"><i class="fas fa-expand-arrows-alt position-absolute"></i></a></li>
					<li><a href="javascript:void(0);" class="d-inline-flex circle align-items-center justify-content-center snackbar-wishlist"><i class="far fa-heart position-absolute"></i></a></li>
					<li><a href="javascript:void(0);" class="d-inline-flex circle align-items-center justify-content-center snackbar-addcart"><i class="fas fa-shopping-basket position-absolute"></i></a></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="card-footer b-0 p-0 pt-2 bg-white d-flex align-items-start justify-content-between">
		<div class="text-left">
			<div class="text-left">
				<div class="star-rating align-items-center d-flex justify-content-left mb-1 p-0">
					<i class="fas fa-star"></i>
					<i class="fas fa-star"></i>
					<i class="fas fa-star"></i>
					<i class="fas fa-star"></i>
					<i class="fas fa-star"></i>
					<span class="small">(0 Reviews)</span>
				</div>
				<h5 class="fs-md mb-0 lh-1 mb-1"><a href="shop-single-v1.html">Boys Solid Sweatshirt</a></h5>
				<div class="elis_rty"><span class="ft-bold text-dark fs-sm">$129</span></div>
			</div>
		</div>
	</div>
</div>

Product Style 4

	
<div class="product_grid card b-0">
	<div class="badge bg-danger text-white position-absolute ft-regular ab-left text-upper">Hot</div>
	<div class="card-body p-0">
		<div class="shop_thumb position-relative">
			<a class="card-img-top d-block overflow-hidden" href="shop-single-v1.html"><img class="card-img-top" src="assets/img/product/6.jpg" alt="..."></a>
			<div class="product-hover-overlay bg-dark d-flex align-items-center justify-content-center">
				<div class="edlio"><a href="#" data-toggle="modal" data-target="#quickview" class="text-white fs-sm ft-medium"><i class="fas fa-eye mr-1"></i>Quick View</a></div>
			</div>
		</div>
	</div>
	<div class="card-footer b-0 p-0 pt-2 bg-white">
		<div class="d-flex align-items-start justify-content-between">
			<div class="text-left">
				<div class="form-check form-option form-check-inline mb-1">
					<input class="form-check-input" type="radio" name="color6" id="white6">
					<label class="form-option-label small rounded-circle" for="white"><span class="form-option-color rounded-circle blc1"></span></label>
				</div>
				<div class="form-check form-option form-check-inline mb-1">
					<input class="form-check-input" type="radio" name="color6" id="blue6">
					<label class="form-option-label small rounded-circle" for="blue6"><span class="form-option-color rounded-circle blc7"></span></label>
				</div>
				<div class="form-check form-option form-check-inline mb-1">
					<input class="form-check-input" type="radio" name="color6" id="yellow6">
					<label class="form-option-label small rounded-circle" for="yellow6"><span class="form-option-color rounded-circle blc3"></span></label>
				</div>
				<div class="form-check form-option form-check-inline mb-1">
					<input class="form-check-input" type="radio" name="color6" id="pink6">
					<label class="form-option-label small rounded-circle" for="pink6"><span class="form-option-color rounded-circle blc6"></span></label>
				</div>
			</div>
			<div class="text-right">
				<button class="btn auto btn_love snackbar-wishlist"><i class="far fa-heart"></i></button> 
			</div>
		</div>
		<div class="text-left">
			<h5 class="fw-bolder fs-md mb-0 lh-1 mb-1"><a href="shop-single-v1.html">Fancy Salwar Suits</a></h5>
			<div class="elis_rty"><span class="ft-bold text-dark fs-sm">$99 - $129</span></div>
		</div>
	</div>
</div>

Category Style 1

	
<div class="single_cats">
	<a href="#" class="cards card-overflow card-scale lg_height">
		<div class="bg-image" style="background:url(assets/img/b-8.png)no-repeat;"></div>
		<div class="ct_body">
			<div class="ct_body_caption left">	
				<h2 class="m-0 ft-bold lh-1 fs-md text-upper">Women Clothes</h2>
				<span>3272 Items</span>
			</div>
			<div class="ct_footer left">
				<span class="stretched-link fs-md">Browse Items <i class="ti-arrow-circle-right"></i></span>
			</div>
		</div>
	</a>
</div>

Custom Js Settings

Below js code is used for theme setting , Change hover to click Menu(assets/js/custom.js)


var o = {
	responsive: !0,
	mobileBreakpoint:992,
	showDuration: 300,
	hideDuration: 300,
	showDelayDuration: 0,
	hideDelayDuration: 0,
	submenuTrigger: "hover",
	effect: "fade",
	submenuIndicator: !0,
	hideSubWhenGoOut: !0,
	visibleSubmenusOnMobile: !1,
	fixed: !1,
	overlay: !0,
	overlayColor: "rgba(0, 0, 0, 0.5)",
	hidden: !1,
	offCanvasSide: "left",
	onInit: function() {},
	onShowOffCanvas: function() {},
	onHideOffCanvas: function() {}
},

Please open and edit map.js inside assets/js/map.js for map integration.


var locations = [
	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.72956781, -73.99726866, 0, markerIcon],
	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.76221766, -73.96511769, 1, markerIcon],
	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.88496706, -73.88191222, 2, markerIcon],
	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.72228267, -73.99246214, 3, markerIcon],
	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.94982541, -73.84357452, 4, markerIcon],
	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.90261483, -74.15737152, 5, markerIcon],
	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.79145927, -74.08252716, 6, markerIcon],
	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.58423508, -73.96099091, 7, markerIcon],
	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.58110616, -73.97678375, 8, markerIcon],
	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.73112881, -74.07897948, 9, markerIcon],
	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.67386831, -74.10438536, 10, markerIcon],
];

Font Family

We have used google fonts for the template you can change whatever font you wish


@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Muli:300,400,600,700');

font-family: 'Muli', sans-serif;
font-family: 'Jost', sans-serif;

Helper Classes

Float Classes

Class	Description
`.fl-left`	Element to the left (float:left).
`.fl-right`	Element to the right(float:right).
`.fl-none`	To Clear floats.(clreafix)

Class	Description
`.d-intable`	Element to the display inline table (display:inline-table).
`.d-table`	Element to the display inline (display:inline).
`.d-block`	Element to the display block (display:block).

Text Color Classes

Class	Description
`.cl-info`	Nullam id dolor id nibh ultricies vehicula ut id elit.
`.cl-primary`	Nullam id dolor id nibh ultricies vehicula ut id elit.
`.cl-danger`	Nullam id dolor id nibh ultricies vehicula ut id elit.
`.cl-warning`	Nullam id dolor id nibh ultricies vehicula ut id elit.
`.cl-success`	Nullam id dolor id nibh ultricies vehicula ut id elit.
`.cl-purple`	Nullam id dolor id nibh ultricies vehicula ut id elit.
`.cl-default`	Nullam id dolor id nibh ultricies vehicula ut id elit.

Padding Classes

Class	Description
`.p-51`	Padding will be 0px from all side.
`.p-2`	Padding will be 5px from all side.
`.p-3`	Padding will be 10px from all side.
`.p-4`	Padding will be 15px from all side.
`.....`	......
`.p-5`	Padding will be 50px from all side.

Padding Left Classes

Class	Description
`.p-l-0`	Padding left will be 0px.
`.p-l-1`	Padding left will be 5px.
`.p-l-2`	Padding left will be 10px.
`.p-l-3`	Padding left will be 15px.
`.....`	......
`.p-l-5`	Padding left will be 50px.

Padding Right Classes

Class	Description
`.p-r-0`	Padding right will be 0px.
`.p-r-1`	Padding right will be 0px.
`.p-r-2`	Padding right will be 10px.
`.p-r-3`	Padding right will be 15px.
`.....`	......
`.p-r-5`	Padding right will be 50px.

Padding Top Classes

Class	Description
`.p-t-0`	Padding top will be 0px.
`.p-t-1`	Padding top will be 5px.
`.p-t-2`	Padding top will be 10px.
`.p-t-3`	Padding top will be 15px.
`.....`	......
`.p-t-5`	Padding top will be 50px.

Padding Bottom Classes

Class	Description
`.p-b-0`	Padding bottom will be 0px.
`.p-b-1`	Padding bottom will be 5px.
`.p-b-2`	Padding bottom will be 10px.
`.p-b-3`	Padding bottom will be 15px.
`.....`	......
`.p-b-5`	Padding bottom will be 50px.

Margin Classes

Class	Description
`.m-0`	Margin will be 0px from all side.
`.m-1`	Margin will be 5px from all side.
`.m-2`	Margin will be 10px from all side.
`.m-3`	Margin will be 15px from all side.
`.....`	......
`.m-5`	Margin will be 50px from all side.

Margin Left Classes

Class	Description
`.m-l-0`	Padding left will be 0px.
`.m-l-1`	Padding left will be 5px.
`.m-l-2`	Padding left will be 10px.
`.m-l-3`	Padding left will be 15px.
`.....`	......
`.m-l-5`	Padding left will be 50px.

Margin Right Classes

Class	Description
`.m-r-0`	Margin Right will be 0px.
`.m-r-1`	Margin Right will be 5px.
`.m-r-2`	Margin Right will be 10px.
`.m-r-3`	Margin Right will be 15px.
`.....`	......
`.m-r-5`	Margin Right will be 50px.

Margin Top Classes

Class	Description
`.m-t-0`	Margin top will be 0px.
`.m-t-1`	Margin top will be 5px.
`.m-t-2`	Margin top will be 10px.
`.m-t-3`	Margin top will be 15px.
`.....`	......
`.m-t-5`	Margin top will be 50px.

Border Classes

Class	Description
`.br`	Border 1px all side
`.bl-1`	Border left 1px
`.bl-2`	Border left 2px
`.bl-3`	Border left 3px
`.bl-4`	Border left 4px

Border Top Classes

Class	Description
`.bt-1`	Border top 1px
`.bt-2`	Border top 2px
`.bt-3`	Border top 3px
`.bt-4`	Border top 4px

Border Bottom Classes

Class	Description
`.bb-1`	Border bottom 1px
`.bb-2`	Border bottom 2px
`.bb-3`	Border bottom 3px
`.bb-4`	Border bottom 4px

Height Classes

Class	Description
`.height-10`	Height 10px
`.height-20`	Height 20px
`.height-30`	Height 30px
`.....`	....
`.height-450`	Height 450px

Light Height Classes

Class	Light Height
`.line-height-10`	line height 10px
`.line-height-12`	line height 12px
`.line-height-14`	line height 14px
`...`	....
`.line-height-450`	line height 450px

Width Classes

Class	Description
`.width-full`	Width Full
`.width-30`	Width 30px
`.width-40`	Width 40px
`.width-50`	Width 50px
`......`	.....
`.width-300`	Width 300px

Font Size & Weight Classes

Class	Description
`.font-10`	Font Size 10px
`.font-12`	Font Size 12px
`.font-14`	Font Size 14px
`.....`	....
`.font-100`	Font Size 100px
`.font-light`	Font Weight light
`.font-midium`	Font Weight medium
`.font-normal`	Font Weight normal
`.font-italic`	Font style italic

Background Classes

Class	Light Height
`.bg-info`	background Info
`.bg-primary`	background Primary
`.bg-danger`	background Danger
`bg-warning`	background Warning
`.bg-success`	background Success
`.bg-default`	background Default
`.bg-secondary`	background Secondary
`.bg-light`	background Inverse

Light Background Classes

Class	Description
`.bg-info-light`	background light info
`.bg-primary-light`	background light primary
`.bg-danger-light`	background light danger
`.bg-warning-light`	background light warning
`bg-success-light`	background light success
`.bg-purple-light`	background light purple

Folder Structure

we follow simple structure for the template


HTML
  ├── 
  │   └── full-kumo-template/
  │     └── _documentation
  |
  |		└── _html
  |			└── All HTML Files
  |
  │	    	└── assets/
  │       		└── Css
  │            		└── Style.css
  │       		└── Js
  │            		└── custom.js
  |		  		└── img
  │            		└── All Images
  └──

Content

Grid options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table. check the official website grid page

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints
Max container width	None (auto)	540px	720px	960px	1140px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# of columns	12
Gutter width	30px (15px on each side of a column)
Nestable	Yes
Offsets	Yes
Column ordering	Yes

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

Example: Stacked-to-horizontal

Using a single set of `.col-md-*` grid classes, you can create a default grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any `.row`.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

Example: Mobile and desktop

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding `.col-xs-` `.col-md-` to your columns. See the example below for a better idea of how it all works.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

Example: Mobile, tablet, desktops

Build on the previous example by creating even more dynamic and powerful layouts with tablet `.col-sm-*` classes.

.col-xs-12 .col-sm-6 .col-md-8