SkillUp - Innovative & Modern LMS & Education Template

1. Introduction

SkillUp is most powerful online learning platform in the Envato marketplace. If you are looking or plan to launch a learning website "SkillUp" is the the best for your all requirements.

We put a lot of love and effort to make SkillUp 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 SkillUp 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>SkillUp - 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>

Navigation


<!-- ============================================================== -->
<!-- Top header  -->
<!-- ============================================================== -->
<!-- Start Navigation -->
<div class="header header-transparent 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="javascript:void(0);" data-toggle="modal" data-target="#login" class="crs_yuo12 w-auto text-white theme-bg">
								<span class="embos_45"><i class="fas fa-sign-in-alt mr-1"></i>Sign In</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="nav-menus-wrapper">
				<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>
						</ul>
					</li>
					
					<li><a href="#">Courses<span class="submenu-indicator"></span></a>
						<ul class="nav-dropdown nav-submenu">
							<li><a href="#">Search Courses in Grid<span class="submenu-indicator"></span></a>
								<ul class="nav-dropdown nav-submenu">
									<li><a href="grid-layout-with-sidebar.html">Grid Layout Style 1</a></li>
									<li><a href="grid-layout-with-sidebar-2.html">Grid Layout Style 2</a></li>
									<li><a href="grid-layout-with-sidebar-3.html">Grid Layout Style 3</a></li>
									<li><a href="grid-layout-with-sidebar-4.html">Grid Layout Style 4</a></li>
									<li><a href="grid-layout-with-sidebar-5.html">Grid Layout Style 5</a></li>
									<li><a href="grid-layout-full.html">Grid Full Width</a></li>
									<li><a href="grid-layout-full-2.html">Grid Full Width 2</a></li>
									<li><a href="grid-layout-full-3.html">Grid Full Width 3</a></li>
								</ul>
							</li>
							<li><a href="#">Search Courses in List<span class="submenu-indicator"></span></a>
								<ul class="nav-dropdown nav-submenu">
									<li><a href="list-layout-with-sidebar.html">List Layout Style 1</a></li>
									<li><a href="list-layout-with-full.html">List Full Width</a></li>
								</ul>
							</li>
							<li><a href="#">Courses Detail<span class="submenu-indicator"></span></a>
								<ul class="nav-dropdown nav-submenu">
									<li><a href="course-detail.html">Course Detail 01</a></li>
									<li><a href="course-detail-2.html">Course Detail 02</a></li>
									<li><a href="course-detail-3.html">Course Detail 03</a></li>
									<li><a href="course-detail-4.html">Course Detail 04</a></li>
								</ul>
							</li>
							
							<li><a href="explore-category.html">Explore Category</a></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><a href="#">Shop Pages<span class="submenu-indicator"></span></a>
								<ul class="nav-dropdown nav-submenu">
									<li><a href="shop-with-sidebar.html">Shop Sidebar Left</a></li>
									<li><a href="shop-with-right-sidebar.html">Shop Sidebar Right</a></li>
									<li><a href="list-shop-with-sidebar.html">Shop List Style</a></li>
									<li><a href="wishlist.html">Wishlist</a></li>
									<li><a href="checkout.html">Checkout</a></li>
									<li><a href="product-detail.html">Product Detail</a></li>
								</ul>
							</li>
							<li><a href="about.html">About Us</a></li>
							<li><a href="contact.html">Say Hello</a></li>
							<li><a href="blogs.html">Blog Style</a></li>
							<li><a href="pricing.html">Pricing</a></li>
							<li><a href="404.html">404 Page</a></li>
							<li><a href="component.html">Elements</a></li>
							<li><a href="faq.html">FAQs</a></li>
							<li><a href="login.html">Login</a></li>
							<li><a href="signup.html">Signup</a></li>
							<li><a href="forgot.html">Forgot</a></li>
						</ul>
					</li>
					
					<li><a href="dashboard.html">Dashboard</a></li>
					
				</ul>
				
				<ul class="nav-menu nav-menu-social align-to-right">
					
					<li>
						<a href="#" class="alio_green" data-toggle="modal" data-target="#login">
							<i class="fas fa-sign-in-alt mr-1"></i><span class="dn-lg">Sign In</span>
						</a>
					</li>
					<li class="add-listing theme-bg">
						<a href="signup.html" class="text-white">Get Started</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="col-xl-4 col-lg-4 col-md-6 col-sm-12">
	<div class="crs_grid">
		<div class="crs_grid_thumb">
			<a href="course-detail.html" class="crs_detail_link">
				<img src="assets/img/cr-2.jpg" class="img-fluid rounded" alt="" />
			</a>
			<div class="crs_video_ico">
				<i class="fa fa-play"></i>
			</div>
			<div class="crs_locked_ico">
				<i class="fa fa-lock"></i>
			</div>
		</div>
		<div class="crs_grid_caption">
			<div class="crs_flex">
				<div class="crs_fl_first">
					<div class="crs_cates cl_1"><span>Banking</span></div>
				</div>
				<div class="crs_fl_last">
					<div class="crs_inrolled"><strong>7,150</strong>Enrolled</div>
				</div>
			</div>
			<div class="crs_title"><h4><a href="course-detail.html" class="crs_title_link">Basic knowledge about hodiernal bharat in history</a></h4></div>
			<div class="crs_info_detail">
				<ul>
					<li><i class="fa fa-clock text-danger"></i><span>05 hr 07 min</span></li>
					<li><i class="fa fa-video text-success"></i><span>22 Lectures</span></li>
					<li><i class="fa fa-signal text-warning"></i><span>Beginer</span></li>
				</ul>
			</div>
		</div>
		<div class="crs_grid_foot">
			<div class="crs_flex">
				<div class="crs_fl_first">
					<div class="crs_tutor">
						<div class="crs_tutor_thumb"><a href="instructor-detail.html"><img src="assets/img/team-5.jpg" class="img-fluid circle" alt="" /></a></div><div class="crs_tutor_name"><a href="instructor-detail.html">Robert Fox</a></div>
					</div>
				</div>
				<div class="crs_fl_last">
					<div class="crs_price"><h2><span class="currency">$</span><span class="theme-cl">99</span></h2></div>
				</div>
			</div>
		</div>
	</div>
</div>

Education Style 2

	
<div class="crs_grid shadow_none brd">
	<div class="crs_grid_thumb">
		<a href="course-detail.html" class="crs_detail_link" tabindex="-1">
			<img src="assets/img/cr-4.jpg" class="img-fluid rounded" alt="">
		</a>
		<div class="crs_video_ico">
			<i class="fa fa-play"></i>
		</div>
		<div class="crs_locked_ico">
			<i class="fa fa-lock"></i>
		</div>
	</div>
	<div class="crs_grid_caption">
		<div class="crs_flex">
			<div class="crs_fl_first">
				<div class="crs_cates cl_4"><span>Banking</span></div>
			</div>
			<div class="crs_fl_last">
				<div class="crs_price"><h2><span class="currency">$</span><span class="theme-cl">49</span></h2></div>
			</div>
		</div>
		<div class="crs_title"><h4><a href="course-detail.html" class="crs_title_link" tabindex="-1">The complete accounting & bank financial course 2021</a></h4></div>
		<div class="crs_info_detail">
			<ul>
				<li><i class="fa fa-clock text-danger"></i><span>04 hr 10 min</span></li>
				<li><i class="fa fa-video text-success"></i><span>40 Lectures</span></li>
			</ul>
		</div>
		<div class="preview_crs_info">
			<div class="progress">
				<div class="progress-bar" role="progressbar" style="width:60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
			</div>
		</div>
	</div>
	<div class="crs_grid_foot">
		<div class="crs_flex">
			<div class="crs_fl_first">
				<div class="crs_tutor">
					<div class="crs_tutor_thumb"><a href="instructor-detail.html" tabindex="-1"><img src="assets/img/user-4.jpg" class="img-fluid circle" alt=""></a></div>
				</div>
			</div>
			<div class="crs_fl_last">
				<div class="foot_list_info">
					<ul>
						<li><div class="elsio_ic"><i class="fa fa-user text-danger"></i></div><div class="elsio_tx">4.7k</div></li>
						<li><div class="elsio_ic"><i class="fa fa-eye text-success"></i></div><div class="elsio_tx">42.4k</div></li>
						<li><div class="elsio_ic"><i class="fa fa-star text-warning"></i></div><div class="elsio_tx">4.7</div></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>

Education Style 3

	
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
	<div class="crs_grid">
		<div class="crs_grid_thumb">
			<a href="course-detail.html" class="crs_detail_link">
				<img src="assets/img/cr-4.jpg" class="img-fluid rounded" alt="">
			</a>
			<div class="crs_video_ico">
				<i class="fa fa-play"></i>
			</div>
			<div class="crs_locked_ico">
				<i class="fa fa-lock"></i>
			</div>
		</div>
		<div class="crs_grid_caption">
			<div class="crs_tutor_thumb overl_top"><a href="instructor-detail.html"><img src="assets/img/team-5.jpg" class="img-fluid circle" alt=""></a></div>
			<div class="crs_cates cl_2"><span>Development</span></div>
			<div class="crs_title"><h4><a href="course-detail.html" class="crs_title_link">Advance PHP knowledge with laravel to make smart web</a></h4></div>
			<div class="crs_info_detail">
				<ul>
					<li><i class="fa fa-video"></i><span>24 Videos</span></li>
					<li><i class="fa fa-user"></i><span>10k User</span></li>
					<li><i class="fa fa-eye"></i><span>92k Views</span></li>
				</ul>
			</div>
			<div class="preview_crs_info">
				<div class="progress">
					<div class="progress-bar" role="progressbar" style="width:80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
				</div>
			</div>
		</div>
		<div class="crs_grid_foot">
			<div class="crs_flex">
				<div class="crs_fl_first">
					<div class="crs_price"><h2><span class="currency">$</span><span class="theme-cl">139</span></h2></div>
				</div>
				<div class="crs_fl_last">
					<div class="crs_linkview"><a href="course-detail.html" class="btn btn_view_detail theme-bg text-light">Enroll Now</a></div>
				</div>
			</div>
		</div>
	</div>
</div>

Education Style 4

	
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
	<div class="crs_grid">
		<div class="crs_grid_thumb">
			<a href="course-detail.html" class="crs_detail_link">
				<img src="assets/img/cr-3.jpg" class="img-fluid rounded" alt="">
			</a>
			<div class="crs_video_ico">
				<i class="fa fa-play"></i>
			</div>
			<div class="crs_locked_ico">
				<i class="fa fa-lock"></i>
			</div>
		</div>
		<div class="crs_grid_caption">
			<div class="crs_flex">
				<div class="crs_fl_first">
					<div class="crs_cates cl_3"><span>Accounting</span></div>
				</div>
				<div class="crs_fl_last">
					<div class="crs_price"><h2><span class="currency">$</span><span class="theme-cl">129</span></h2></div>
				</div>
			</div>
			<div class="crs_title"><h4><a href="course-detail.html" class="crs_title_link">Basic knowledge about hodiernal bharat in history</a></h4></div>
			<div class="crs_info_detail">
				<ul>
					<li><i class="fa fa-clock text-danger"></i><span>04 hr 07 min</span></li>
					<li><i class="fa fa-video text-success"></i><span>27 Lectures</span></li>
				</ul>
			</div>
		</div>
		<div class="crs_grid_foot">
			<div class="crs_flex">
				<div class="crs_fl_first">
					<div class="crs_tutor">
						<div class="crs_tutor_thumb"><a href="instructor-detail.html"><img src="assets/img/team-5.jpg" class="img-fluid circle" alt=""></a></div>
					</div>
				</div>
				<div class="crs_fl_last">
					<div class="foot_list_info">
						<ul class="light">
							<li><div class="elsio_ic"><i class="fa fa-user text-danger"></i></div><div class="elsio_tx">4.7k</div></li>
							<li><div class="elsio_ic"><i class="fa fa-eye text-success"></i></div><div class="elsio_tx">42.4k</div></li>
							<li><div class="elsio_ic"><i class="fa fa-star text-warning"></i></div><div class="elsio_tx">4.7</div></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Instructor

	
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12">
	<div class="crs_trt_grid">
		<div class="crs_trt_thumb circle">
			<a href="instructor-detail.html" class="crs_trt_thum_link"><img src="assets/img/t-8.png" class="img-fluid circle" alt=""></a>
		</div>
		<div class="crs_trt_caption">
			<div class="instructor_tag dark"><span>Physics Teacher</span></div>
			<div class="instructor_title"><h4><a href="instructor-detail.html">Alisha P. Paradis</a></h4></div>
			<div class="trt_rate_inf">
				<i class="fa fa-star filled"></i>
				<i class="fa fa-star filled"></i>
				<i class="fa fa-star filled"></i>
				<i class="fa fa-star filled"></i>
				<i class="fa fa-star-half filled"></i>
				<span class="alt_rates">(244 Reviews)</span>
			</div>
		</div>
		<div class="crs_trt_footer">
			<div class="crs_trt_ent"><i class="fa fa-user"></i> 2.5k Users Enrolled</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/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-SkillUp-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