Exit

Fluid Layout (100% and Max width of 1920px) - Bootstrap 4 Boilerplate Template


<!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-fluid">
<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-right"><a class="exitbutton" href="#">Exit</a></div>
</div>
</div>
</header>
<section style="">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h1 class="py-4 pagetitle"><b>Fluid Layout (100% and Max width of 1940px) - Bootstrap 4 Boilerplate Template</b></h1>
</div>
</div>
</div>
</section>
<section style="">
<div class="container-fluid">
<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>

Fluid

The fluid template is a functional web page skeleton designed to cover the full width of the screen.

Responsive

The fluid template works on any device, from large 4k cinema screens, to first generations of smart phones.

Rapid

The fluid template can be used by designers and developers to quickly get out of the ground and start building applications.

Purposeful

The fluid template must be used only in cases where an application requires large data tables with multiple columns.

Usage rules

This problem has boggled the minds of Web designers for years: fixed, fluid, elastic or a hybrid layout design? Each option has its benefits and disadvantages.

The final decision depends so much on usability that it is not one to be made lightly. So, with all the confusion, is there a right decision? By considering a few factors and properly setting up the final design, you can end up with a successful layout design that reaps all the benefits.

Use for...

  • Wide and dense data tables
  • Maps that require full screen
  • Layouts with 3 columns or more
  • High definition images
  • Wide Image sliders

Do not use for...

  • Editorial content
  • Short tables with few columns
  • Layouts with 3 columns or less
  • High definition images
  • Image sliders
Header 1 Header 2 Header 3 Header 4 Header 5 Header 6 Header 7 Header 8 Header 9 Header 10
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3 Row 1, Cell 4 Row 1, Cell 5 Row 1, Cell 6 Row 1, Cell 7 Row 1, Cell 8 Row 1, Cell 9 Row 1, Cell 10
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3 Row 2, Cell 4 Row 2, Cell 5 Row 2, Cell 6 Row 2, Cell 7 Row 2, Cell 8 Row 2, Cell 9 Row 2, Cell 10
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3 Row 3, Cell 4 Row 3, Cell 5 Row 3, Cell 6 Row 3, Cell 7 Row 3, Cell 8 Row 3, Cell 9 Row 3, Cell 10
Row 4, Cell 1 Row 4, Cell 2 Row 4, Cell 3 Row 4, Cell 4 Row 4, Cell 5 Row 4, Cell 6 Row 4, Cell 7 Row 4, Cell 8 Row 4, Cell 9 Row 4, Cell 10