Basics

Introduction

This is the custom set of CSS classes built on top of Bootstrap 4. It contain several new classes, components and features ready to be used in any projects. It is not improving Bootstrap 4 just extending its capabilities according to my needs. The look is based on Google Material Design principles. These pages also serve for visual testing in case I change something important which may affect a bunch of other elements. I will keep creating new components as per my requirements. However if you have any requests please email me and I will see if time will allow me to do something about it. The main enhancements of Bootstrap 4 are:

  • Extended Boostrap 4 utilities
  • Form elements
  • Icon sets
  • Helper classes
  • Card Enhancements
  • Animations
  • Circle Buttons
  • Dropdown Navs
  • Offcanvas Nav

HTML structure

The body of HTML document should ideally contain three main elements - <header>, <main> and <footer>.


<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	
		... style sheets ...
	</head>
	<body>
		<header>
			... header with navigation ...
		</header>
		<main>
			... page content ...
		</main>
		<footer>
			... footer content ...
		</footer>
	</body>
</html>

Main content

You can assign class flex-grow to the main content - <main>. This will cause that <footer> will be pushed to the bottom of the browser window regardless if there is enough content inside the <main> element or not.


<main class="flex-grow">
	... page content ...
</main>

Styles

Attach bootstrap 4 stylesheet and BMD stylesheet in document head.


<link rel="stylesheet prefetch" href="../css/plugins-styles/bootstrap.min.css" type="text/css">
<link rel="stylesheet prefetch" href="../css/bmd.css" type="text/css">

Javascript

Attach all javascript before closing <body> tag.


<script type="text/javascript" src="../js/bootstrap-native-v4.min.js"></script>
<script type="text/javascript" src="../js/tocca.min.js"></script>
<script type="text/javascript" src="../js/bmd.js">>/script>