Exit

Fixed Wrapper (1140px)- Bootstrap 4 Default Boilerplate Template

Responsive and lightweight

This is the default template designed for web applications in WorkSafe BC. It has a fixed width and works on any device and platform. The fluid template can be used by designers and developers to quickly get out of the ground and start building applications. 


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta title="Template Fixed">
<!--LOAD CSS STACK  -->
<!--INCLUDE CSS along with FONTAWESOME/ MANDATORY-->
<link rel="stylesheet" href="https://ux.online.dv.worksafebc.com/latest/wsbc.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="page-template">
<div class="content-wrapper">
<header class="pb-4 header-border-bottom">
<div class="header-thinline"></div>
<div class="header-topline">
<div class="header-curve"></div>
</div>
<div class="container">
<div class="row">
<div class="col-6"><img class="img-fluid d-block" src="https://ux-static.online.dv.worksafebc.com/css/assets/img/worksafebc-logo.jpg"></div>
<div class="col-6 d-flex justify-content-end align-items-center text-end"><a class="exitbutton" href="#">Exit</a></div>
</div>
</div>
</header>
<section style="">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="py-4 pagetitle"><b>Fixed Wrapper (1140px)- Bootstrap 4 Default Boilerplate Template</b></h1>
</div>
</div>
</div>
</section>
<section style="">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="subtitle">Title 2</h2>
<p class="lead">...</p>
</div>
</div>
</div>
</section>
</div>
<footer class="bordertop">
<div class="footer-curve">
<div class="footer-curve-bg"></div>
</div>
<div class="footer-top py-3">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 "><span><a target="_blank" class="contactus" href="https://www.worksafebc.com/en/contact-us">Contact us</a></span>
</div>
</div>
</div>
</div>
<div class="footer-bottom pt-2 pb-2">
<div class="container-fluid">
<div class="row">
<div class="col-12 text-sm-right"><span><a target="_blank" href="https://www.worksafebc.com/en/legal/copyright-and-trademark/"><span class="d-inline d-sm-none">©</span> <span class="d-none d-sm-inline">Copyright </span>2021</a> |
<a target="_blank" class="" href="https://www.worksafebc.com/en/legal/terms-of-use">Terms of use</a>
|
<a target="_blank" href="https://www.worksafebc.com/en/about-us/fairness-privacy/protection-of-privacy">Privacy</a></span>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>

Fixed Width

Fully Responsive

For Apps and Websites

Dev Friendly, no More Guesswork

That's right, all made in CSS

Developers love templates and wrappers they can use right out of the box, they don't want to to go and ask designers about how many pixels of margin and paddings are here or there. They just want to look at the code and vualá! start working. No need to pull Photoshop files and gimmicky design tools to extract CSS.

Designer Friendly, Made to Fit

Place the items on the grid

Designers don't have to do the math or ask developers to build templates from them. Designers can use the pre-canned fixed template and start placing elements inside the grid, just like playing a tetris game.

Works on any Device

The fixed template works on any device, from large 4k cinema screens, to first generations of smart phones. The template has been tested in multiple browsers and devices and it simply works.

Built with Bootstrap Grid 

The WorkSafe BC fixed wrapper template is built with Bootstrap 4 and it complies with the modern CSS standards to date. The template is incredibly versatile, adaptable and expansible.

Multi Column 

# First Last
1 Mark Otto
2 Jacob Thornton
3 Larry the Bird

A Production-Ready Wrapper

This wrapper template is not a mock up, you can grab it right now and start building applications within it. Forget about math or about cryptic CSS tricks, simply take the HTML code and get out of the ground right now. Are you using fancy frameworks and libraries? no problem, this template is cross-compatible with anything you want to use along.