LearnUp - Innovative & Modern LMS & Education Template

1. Introduction

LearnUp is clean, modern and unique HTML template that has beautiful design and unique features. This will be the best suited for your educational purpose website and portal like university, college, school, kindergarten, online courses, blog, academy, courses, education, education center, education HTML, tuition, tutoring, business, events, institute, learning, teacher and much more.

We put a lot of love and effort to make LearnUp 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 LearnUp 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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		
		<title>LearnUp - Online Course & Education HTML Template</title>
		 
		<!-- Custom CSS -->
		<link href="assets/css/styles.css" rel="stylesheet">
		
		<!-- Custom Color Option -->
		<link href="assets/css/colors.css" rel="stylesheet">
		
	</head>

Logo


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

Color option


To Change Main color, Open styles.css inside assets/css/styles.css and change maincolor code.
	--maincolor:#0987f5;
	--graycolor:#edf1fb;
	--navcolor:#00305c;
	--darkcolor: #13293D;
	--headingcolor: #192839;
	--bodycolor: #40566d;
	--mutedcolor:#768ea7;
	--greencolor:#4caf84;
	--redcolor:#e44614;
	--forsale:#e23c1f;
	--forrent:#009868;
	--featuredtag:#e23c1f;
	--verified:#009868;
	--superagent:#0065ff;
	--new:#e23c1f;
	--propertytype:#0987f5;
	--primaryfont:'Jost', sans-serif;
	--formborder:#e0ecf5;
	--formbg:#edf1fb;
	--form-color:#3b515a;
	--inversecolor:#00305c;
	--footerbg:#13293D;

Navigation


<!-- ============================================================== -->
<!-- Top header  -->
<!-- ============================================================== -->
<!-- Start Navigation -->
<div class="header header-light">
	<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>
			<div class="nav-menus-wrapper" style="transition-property: none;">
				<ul class="nav-menu">
				
					<li class="active"><a href="#">Home<span class="submenu-indicator"></span></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>
						</ul>
					</li>
					
					<li><a href="#">Courses<span class="submenu-indicator"></span></a>
						<ul class="nav-dropdown nav-submenu">
							<li><a href="#">Courses Grid Sidebar<span class="submenu-indicator"></span></a>
								<ul class="nav-dropdown nav-submenu">
									<li><a href="grid-with-sidebar.html">Courses grid 1</a></li>
									<li><a href="grid-with-sidebar-2.html">Courses grid 1</a></li>
									<li><a href="grid-with-sidebar-3.html">Courses grid 1</a></li>
								</ul>
							</li>
							<li><a href="#">Courses Grid Full Width<span class="submenu-indicator"></span></a>
								<ul class="nav-dropdown nav-submenu">
									<li><a href="full-width-course.html">Courses grid 1</a></li>
									<li><a href="full-width-course-2.html">Courses grid 1</a></li>
									<li><a href="full-width-course-3.html">Courses grid 1</a></li>
									<li><a href="full-width-course-4.html">Courses grid 1</a></li>
								</ul>
							</li>
							<li><a href="#">Courses Detail<span class="submenu-indicator"></span></a>
								<ul class="nav-dropdown nav-submenu">
									<li><a href="detail.html">Course Detail 1</a></li>
									<li><a href="detail-2.html">Course Detail 2</a></li>
									<li><a href="detail-3.html">Course Detail 3</a></li>
									<li><a href="detail-4.html">Course Detail 4</a></li>
									<li><a href="detail-5.html">Course Detail 5</a></li>
								</ul>
							</li>
							<li><a href="find-instructor.html">Find Instructor</a></li>
							<li><a href="instructor-detail.html">Instructor Detail</a></li>
						</ul>
					</li>
					
					<li><a href="#">Pages<span class="submenu-indicator"></span></a>
						<ul class="nav-dropdown nav-submenu">
							<li class=""><a href="#">User Dashboard<span class="submenu-indicator"></span></a>
								<ul class="nav-dropdown nav-submenu">
									<li><a href="dashboard.html">User Dashboard</a></li>
									<li><a href="my-profile.html">My Profile</a></li>
									<li><a href="all-courses.html">My Courses</a></li>
									<li><a href="my-order.html">My Order</a></li>
									<li><a href="saved-courses.html">Saved Courses</a></li>
									<li><a href="reviews.html">My Reviews</a></li>
									<li><a href="settings.html">My Settings</a></li>
								</ul>
							</li>
							<li><a href="#">Shop Pages<span class="submenu-indicator"></span></a>
								<ul class="nav-dropdown nav-submenu">
									<li><a href="shop-full-width.html">Shop Full Width</a></li>
									<li><a href="shop-left-sidebar.html">Shop Sidebar Left</a></li>
									<li><a href="shop-right-sidebar.html">Shop Sidebar Right</a></li>
									<li><a href="product-detail.html">Shop Detail</a></li>
									<li><a href="add-to-cart.html">Add To Cart</a></li>
									<li><a href="product-wishlist.html">Wishlist</a></li>
									<li><a href="checkout.html">Checkout</a></li>
									<li><a href="shop-order.html">Order</a></li>
								</ul>
							</li>
							<li><a href="about-us.html">About Us</a></li>
							<li><a href="blog.html">Blog Style</a></li>
							<li><a href="blog-detail.html">Blog Detail</a></li>
							<li><a href="pricing.html">Pricing</a></li>
							<li><a href="404.html">404 Page</a></li>
							<li><a href="register.html">Register</a></li>
							<li><a href="component.html">Elements</a></li>
							<li><a href="privacy.html">Privacy Policy</a></li>
							<li><a href="faq.html">FAQs</a></li>
						</ul>
					</li>
					
					<li><a href="contact.html">Contact</a></li>
					
				</ul>
				
				<ul class="nav-menu nav-menu-social align-to-right">
					
					<li class="login_click light">
						<a href="#" data-toggle="modal" data-target="#login">Sign in</a>
					</li>
					<li class="login_click theme-bg">
						<a href="#" data-toggle="modal" data-target="#signup">Sign up</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 ================================== -->

Education Style 1

	
<div class="education_block_grid">
										
	<div class="education_block_thumb">
		<a href="course-detail.html"><img src="assets/img/course-1.jpg" class="img-fluid" alt=""></a>
		<div class="cources_price">$510</div>
		<div class="education_ratting"><i class="fa fa-star"></i>4.8 (62)</div>
	</div>
	
	<div class="education_block_body">
		<h4 class="bl-title"><a href="course-detail.html">Tableau for Beginners: Get CA Certified, Grow Your Career</a></h4>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. </p>
	</div>
	
	<div class="education_block_footer">
		<div class="education_block_author">
			<div class="path-img"><a href="instructor-detail.html"><img src="assets/img/user-1.jpg" class="img-fluid" alt=""></a></div>
			<h5><a href="instructor-detail.html">Daksh Preet</a></h5>
		</div>
		<span class="education_block_time"><i class="ti-time mr-1"></i>4h 30min</span>
	</div>
	
</div>

Education Style 2

	
<div class="education_block_grid style_2">
										
	<div class="education_block_thumb n-shadow">
		<a href="course-detail.html"><img src="assets/img/co-1.jpg" class="img-fluid" alt=""></a>
	</div>
	
	<div class="education_block_body">
		<h4 class="bl-title"><a href="course-detail.html">Tableau For Beginners: Get CA Certified, Grow Your Career</a></h4>
	</div>
	
	<div class="cources_facts">
		<ul class="cources_facts_list">
			<li class="facts-1">Expert</li>
			<li class="facts-2">Professional</li>
			<li class="facts-5">Design</li>
		</ul>
	</div>
	
	<div class="cources_info">
		<div class="cources_info_first">
			<ul>
				<li><strong>1,84684 Views</strong></li>
				<li class="theme-cl">3h 30min</li>
			</ul>
		</div>
		<div class="cources_info_last">
			<h3>$69.77</h3>
		</div>
	</div>
	
	<div class="education_block_footer">
		<div class="education_block_author">
			<div class="path-img"><a href="instructor-detail.html"><img src="assets/img/user-1.jpg" class="img-fluid" alt=""></a></div>
			<h5><a href="instructor-detail.html">Shaurya Preet</a></h5>
		</div>
		<span class="education_block_time"><i class="ti-calendar mr-1"></i>1 hour ago</span>
	</div>
	
</div>

Education Style 3

	
<div class="education_block_grid style_2">
										
	<div class="education_block_thumb">
		<a href="course-detail.html"><img src="assets/img/course-1.jpg" class="img-fluid" alt=""></a>
		<div class="education_ratting"><i class="fa fa-star"></i>4.8 (70)</div>
	</div>
	
	<div class="education_block_body">
		<h4 class="bl-title"><a href="course-detail.html">Tableau For Beginners: Get CA Certified, Grow Your Career</a></h4>
	</div>
	
	<div class="cources_info_style3">
		<ul>
			<li><i class="ti-eye mr-2"></i>7482 Views</li>
			<li><i class="ti-control-skip-forward mr-2"></i>63 Lectures</li>
			<li><i class="ti-time mr-2"></i>6h 30min</li>
		</ul>
	</div>
	
	<div class="education_block_footer">
		<div class="education_block_author">
			<div class="path-img"><a href="instructor-detail.html"><img src="assets/img/user-1.jpg" class="img-fluid" alt=""></a></div>
			<h5><a href="instructor-detail.html">Dhananjay Preet</a></h5>
		</div>
		<div class="cources_price_foot"><span class="price_off">$79.0</span>49.99</div>
	</div>
	
</div>

Education Style 4

	
<div class="education_block_grid style_2">
										
	<div class="education_block_thumb n-shadow">
		<a href="course-detail.html"><img src="assets/img/co-1.jpg" class="img-fluid" alt=""></a>
		<div class="cources_price">$520</div>
	</div>
	
	<div class="education_block_body">
		<h4 class="bl-title"><a href="course-detail.html">Tableau For Beginners: Get CA Certified, Grow Your Career</a></h4>
	</div>
	
	<div class="cources_info_style3">
		<ul>
			<li><i class="ti-eye mr-2"></i>8682 Views</li>
			<li><i class="ti-time mr-2"></i>6h 40min</li>
			<li><i class="ti-star text-warning mr-2"></i>4.7 Reviews</li>
		</ul>
	</div>
	
	<div class="education_block_footer">
		<div class="education_block_author">
			<div class="path-img"><a href="instructor-detail.html"><img src="assets/img/user-1.jpg" class="img-fluid" alt=""></a></div>
			<h5><a href="instructor-detail.html">Robert Wilson</a></h5>
		</div>
		<div class="foot_lecture"><i class="ti-control-skip-forward mr-2"></i>54 lectures</div>
	</div>
	
</div>

Instructor

	
<!-- Single Instructor -->
<div class="single_instructor border">
	<div class="single_instructor_thumb">
		<a href="#"><img src="assets/img/user-1.jpg" class="img-fluid" alt=""></a>
	</div>
	<div class="single_instructor_caption">
		<h4><a href="#">Jonathan Campbell</a></h4>
		<ul class="instructor_info">
			<li><i class="ti-tag"></i>Graphic Design</li>
			<li><i class="ti-video-camera"></i>25 Classes</li>
			<li><i class="ti-user"></i>Exp. 3.5 Year</li>
		</ul>
		<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias.</p>
		<ul class="social_info">
			<li><a href="#"><i class="ti-facebook"></i></a></li>
			<li><a href="#"><i class="ti-twitter"></i></a></li>
			<li><a href="#"><i class="ti-linkedin"></i></a></li>
			<li><a href="#"><i class="ti-instagram"></i></a></li>
		</ul>
	</div>
</div>

Banner Search Form

	
<div class="banner-search shadow_high">
	<div class="search_hero_wrapping">
		<div class="row">
		
			<div class="col-lg-5 col-md-5 col-sm-12 br-right">
				<div class="form-group">
					<div class="input-with-icon">
						<input type="text" class="form-control" placeholder="Keyword" />
						<img src="assets/img/search.svg" class="search-icon" alt="" />
					</div>
				</div>
			</div>
			
			<div class="col-lg-5 col-md-4 col-sm-12 small-pad">
				<div class="form-group">
					<div class="input-with-icon">
						<select id="c-category" class="form-control">
							<option value=""> </option>
							<option value="1">Web Designing</option>
							<option value="2">Business</option>
							<option value="3">Accounting</option>
							<option value="3">Development</option>
							<option value="3">Art & Culture</option>
						</select>
						<img src="assets/img/pin.svg" class="search-icon" alt="" />
					</div>
				</div>
			</div>
			
			<div class="col-lg-2 col-md-3 col-sm-12 pl-0">
				<div class="form-group none">
					<a href="#" class="btn search-btn full-width">Search</a>
				</div>
			</div>
			
		</div>
		
	</div>
</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/css?family=Poppins');
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700');

font-family: 'Montserrat', sans-serif;
font-family: 'Poppins', 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
`.padd-0`	Padding will be 0px from all side.
`.padd-5`	Padding will be 5px from all side.
`.padd-10`	Padding will be 10px from all side.
`.padd-15`	Padding will be 15px from all side.
`.....`	......
`.padd-50`	Padding will be 50px from all side.

Padding Left Classes

Class	Description
`.padd-l-0`	Padding left will be 0px.
`.padd-l-5`	Padding left will be 5px.
`.padd-l-10`	Padding left will be 10px.
`.padd-l-15`	Padding left will be 15px.
`.....`	......
`.padd-l-50`	Padding left will be 50px.

Padding Right Classes

Class	Description
`.padd-r-0`	Padding right will be 0px.
`.padd-r-5`	Padding right will be 0px.
`.padd-r-10`	Padding right will be 10px.
`.padd-r-15`	Padding right will be 15px.
`.....`	......
`.padd-r-50`	Padding right will be 50px.

Padding Top Classes

Class	Description
`.padd-top-0`	Padding top will be 0px.
`.padd-top-5`	Padding top will be 5px.
`.padd-top-10`	Padding top will be 10px.
`.padd-top-15`	Padding top will be 15px.
`.....`	......
`.padd-top-50`	Padding top will be 50px.

Padding Bottom Classes

Class	Description
`.padd-bot-0`	Padding bottom will be 0px.
`.padd-bot-5`	Padding bottom will be 5px.
`.padd-bot-10`	Padding bottom will be 10px.
`.padd-bot-15`	Padding bottom will be 15px.
`.....`	......
`.padd-bot-50`	Padding bottom will be 50px.

Margin Classes

Class	Description
`.mrg-0`	Margin will be 0px from all side.
`.mrg-5`	Margin will be 5px from all side.
`.mrg-10`	Margin will be 10px from all side.
`.mrg-15`	Margin will be 15px from all side.
`.....`	......
`.mrg-50`	Margin will be 50px from all side.

Margin Left Classes

Class	Description
`.mrg-l-0`	Padding left will be 0px.
`.mrg-l-5`	Padding left will be 5px.
`.mrg-l-10`	Padding left will be 10px.
`.mrg-l-15`	Padding left will be 15px.
`.....`	......
`.mrg-l-50`	Padding left will be 50px.

Margin Right Classes

Class	Description
`.mrg-r-0`	Margin Right will be 0px.
`.mrg-r-5`	Margin Right will be 5px.
`.mrg-r-10`	Margin Right will be 10px.
`.mrg-r-15`	Margin Right will be 15px.
`.....`	......
`.mrg-r-50`	Margin Right will be 50px.

Margin Top Classes

Class	Description
`.mrg-top-0`	Margin top will be 0px.
`.mrg-top-5`	Margin top will be 5px.
`.mrg-top-10`	Margin top will be 10px.
`.mrg-top-15`	Margin top will be 15px.
`.....`	......
`.mrg-top-50`	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-learnup-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