Workplex - Job Board HTML Template

1. Introduction

Workplex is complete Job Board HTML template designed for Job Board, Job Application, Work Finder, recruitment agency and Resource management and similar websites.

We put a lot of love and effort to make Workplex a useful template for everyone and now It comes with 8+ unique home page with lot's of search options and detail pages. 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 Workplex 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>Workplex - Job Board 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


<!-- ============================================================== -->
<!-- Top 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="#" data-toggle="modal" data-target="#login" class="theme-cl fs-lg">
							<i class="lni lni-user"></i>
						</a>
					</li>
					<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-plus-circle mr-1 mr-1"></i>Post Job</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>
						</ul>
					</li>
					
					<li><a href="javascript:void(0);">Find Job</a>
						<ul class="nav-dropdown nav-submenu">
							<li><a href="job-search-v1.html">Job Search V1</a></li>
							<li><a href="job-search-v2.html">Job Search V2</a></li>
							<li><a href="job-search-v3.html">Job Search V3</a></li>
							<li><a href="job-list-v1.html">Job Search V4</a></li>
							<li><a href="job-list-v2.html">Job Search V5</a></li>
							<li><a href="job-list-v3.html">Job Search V6</a></li>
							<li><a href="javascript:void(0);">Map Styles</a>
								<ul class="nav-dropdown nav-submenu">
									<li><a href="job-half-map.html">Search On Map V1</a></li>
									<li><a href="job-half-map-v2.html">Search On Map V2</a></li>
									<li><a href="job-search-map-v1.html">Search On Map V3</a></li>
									<li><a href="job-search-map-v2.html">Search On Map V4</a></li>
								</ul>
							</li>
							<li><a href="javascript:void(0);">Single Job</a>
								<ul class="nav-dropdown nav-submenu">
									<li><a href="single-job-1.html">Single Job V1</a></li>
									<li><a href="single-job-2.html">Single Job V2</a></li>
									<li><a href="single-job-3.html">Single Job V3</a></li>
									<li><a href="single-job-4.html">Single Job V4</a></li>
								</ul>
							</li>
						</ul>
					</li>
					
					<li><a href="javascript:void(0);">Candidates</a>
						<ul class="nav-dropdown nav-submenu">
							<li><a href="browse-jobs.html">Browse Jobs</a></li>
							<li><a href="browse-resumes.html">Browse Resumes</a></li>
							<li><a href="browse-category.html">Browse Categories</a></li>
							<li><a href="candidate-detail.html">Candidate Detail</a></li>
							<li><a href="candidate-dashboard.html">Candidate Dashboard</a></li>
						</ul>
					</li>
					
					<li><a href="javascript:void(0);">Employers</a>
						<ul class="nav-dropdown nav-submenu">
							<li><a href="browse-employers.html">Browse Employers V1</a></li>
							<li><a href="browse-employers-list.html">Browse Employers V2</a></li>
							<li><a href="employer-detail.html">Employer Detail</a></li>
							<li><a href="employer-dashboard.html">Employer Dashboard</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>
							<li><a href="docs.html">Docs</a></li>
						</ul>
					</li>
					
				</ul>
				
				<ul class="nav-menu nav-menu-social align-to-right">
					<li>
						<a href="#" data-toggle="modal" data-target="#login" class="theme-cl ft-medium">
							<i class="lni lni-user mr-2"></i>Sign In
						</a>
					</li>
					<li class="add-listing">
						<a href="dashboard-post-job.html" >
							<i class="lni lni-circle-plus mr-1"></i> Post a Job
						</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 ================================== -->

Job Style 1

	
<div class="job_grid border rounded ">
	<div class="position-absolute ab-left"><button type="button" class="p-3 border circle d-flex align-items-center justify-content-center bg-white text-gray"><i class="lni lni-heart-filled position-absolute snackbar-wishlist"></i></button></div>
	<div class="position-absolute ab-right"><span class="medium bg-light-warning text-warning px-2 py-1 rounded">Part Time</span></div>
	<div class="job_grid_thumb mb-2 pt-5 px-3">
		<a href="job-detail.html" class="d-block text-center m-auto"><img src="assets/img/c-2.png" class="img-fluid" width="70" alt=""></a>
	</div>
	<div class="job_grid_caption text-center pb-3 px-3">
		<h4 class="mb-0 ft-medium medium"><a href="job-detail.html" class="text-dark fs-md">UI/UX Web Designer</a></h4>
		<div class="jbl_location"><i class="lni lni-map-marker mr-1"></i><span>San Francisco</span></div>
	</div>
	<div class="job_grid_footer pb-4 px-3">
		<ul class="p-0 skills_tag text-center">
			<li><span class="px-2 py-1 medium skill-bg rounded text-dark">Joomla</span></li>
			<li><span class="px-2 py-1 medium skill-bg rounded text-dark">WordPress</span></li>
			<li><span class="px-2 py-1 medium skill-bg rounded text-dark">Javascript</span></li>
			<li><span class="px-2 py-1 medium skill-bg rounded text-dark">PHP</span></li>
			<li><span class="px-2 py-1 medium skill-bg rounded text-dark">HTML5</span></li>
			<li><span class="px-2 py-1 medium theme-bg rounded text-light">+3 More</span></li>
		</ul>
	</div>
</div>

Job Style 2

	
<div class="job_grid border rounded ">
	<div class="position-absolute ab-left"><button type="button" class="p-3 border circle d-flex align-items-center justify-content-center bg-white text-gray"><i class="lni lni-heart-filled position-absolute snackbar-wishlist"></i></button></div>
	<div class="position-absolute ab-right"><span class="medium bg-light-warning text-warning px-2 py-1 rounded">Part Time</span></div>
	<div class="job_grid_thumb mb-3 pt-5 px-3">
		<a href="job-detail.html" class="d-block text-center m-auto"><img src="assets/img/c-2.png" class="img-fluid" width="70" alt=""></a>
	</div>
	<div class="job_grid_caption text-center pb-5 px-3">
		<h6 class="mb-0 lh-1 ft-medium medium"><a href="employer-detail.html" class="text-muted medium">Google Inc</a></h6>
		<h4 class="mb-0 ft-medium medium"><a href="job-detail.html" class="text-dark fs-md">UI/UX Web Designer</a></h4>
		<div class="jbl_location"><i class="lni lni-map-marker mr-1"></i><span>San Francisco</span></div>
	</div>
	<div class="job_grid_footer pb-4 px-3 d-flex align-items-center justify-content-between">
		<div class="df-1 text-muted"><i class="lni lni-wallet mr-1"></i>$50k - $80k PA.</div>
		<div class="df-1 text-muted"><i class="lni lni-timer mr-1"></i>3 days ago</div>
	</div>
</div>

Job Style 3

	
<div class="job_grid border rounded ">
	<div class="position-absolute ab-left"><button type="button" class="p-3 border circle d-flex align-items-center justify-content-center bg-white text-gray"><i class="lni lni-heart-filled position-absolute snackbar-wishlist"></i></button></div>
	<div class="position-absolute ab-right"><span class="medium bg-light-warning text-warning px-2 py-1 rounded">Part Time</span></div>
	<div class="job_grid_thumb mb-2 pt-4 px-3">
		<a href="job-detail.html" class="d-block text-center m-auto"><img src="assets/img/c-2.png" class="img-fluid" width="70" alt=""></a>
	</div>
	<div class="job_grid_caption text-center pb-3 px-3">
		<h4 class="mb-0 ft-medium medium"><a href="employer-detail.html" class="text-dark fs-md">UI/UX Web Designer</a></h4>
		<div class="jbl_location"><i class="lni lni-map-marker mr-1"></i><span>San Francisco</span></div>
	</div>
	<div class="job_grid_footer pt-2 pb-4 px-3 d-flex align-items-center justify-content-between">
		<div class="row">
			<div class="df-1 text-muted col-6 mb-2"><i class="lni lni-briefcase mr-1"></i>Full Time</div>
			<div class="df-1 text-muted col-6 mb-2"><i class="lni lni-wallet mr-1"></i>3-4 Lakhs PA.</div>
			<div class="df-1 text-muted col-6"><i class="lni lni-users mr-1"></i>02 Vacancy</div>
			<div class="df-1 text-muted col-6"><i class="lni lni-timer mr-1"></i>3 days ago</div>
			<div class="df-1 text-dark ft-medium col-12 mt-3"><a href="job-detail.html" class="btn gray apply-btn rounded full-width">Apply Job<i class="lni lni-arrow-right-circle ml-1"></i></a></div>
		</div>
	</div>
</div>

Job List Style

	
<div class="job_grid d-block border rounded px-3 pt-3 pb-2">
	<div class="jb-list01">
		<div class="jb-list-01-title"><h5 class="ft-medium mb-1"><a href="job-detail.html">Senior UI/UX Web Designer</a></h5></div>
		<div class="jb-list-01-info d-block mb-3">
			<span class="text-muted mr-2"><i class="lni lni-map-marker mr-1"></i>Liverpool, UK</span>
			<span class="text-muted mr-2"><i class="lni lni-briefcase mr-1"></i>Freelance</span>
			<span class="text-muted mr-2"><i class="lni lni-star-filled mr-1"></i>Urgent</span>
			<span class="text-muted mr-2"><i class="lni lni-money-protection mr-1"></i>$80k - $100k</span>
		</div>
		<div class="jb-list-01-title">
			<span class="mr-2 mb-2 d-inline-flex px-2 py-1 rounded theme-cl theme-bg-light">Photoshop</span>
			<span class="mr-2 mb-2 d-inline-flex px-2 py-1 rounded text-warning bg-light-warning">WordPress</span>
			<span class="mr-2 mb-2 d-inline-flex px-2 py-1 rounded text-danger bg-light-danger">Magento</span>
			<span class="mr-2 mb-2 d-inline-flex px-2 py-1 rounded text-info bg-light-info">CSS3</span>
			<span class="px-2 mb-2 d-inline-flex py-1 rounded text-purple bg-light-purple">HTML5</span>
		</div>
	</div>
</div>

Category Style 1

	
<div class="cats-wrap text-center">
	<a href="job-search-v1.html" class="cats-box d-block rounded bg-white px-2 py-4">
		<div class="text-center mb-2 mx-auto position-relative d-inline-flex align-items-center justify-content-center p-3 theme-bg-light circle"><i class="lni lni-diamond fs-lg theme-cl"></i></div>
		<div class="cats-box-caption">
			<h4 class="fs-md mb-0 ft-medium m-catrio">Product Software</h4>
			<span class="text-muted">732 Jobs</span>
		</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-Workplex-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