OBE:BS4 BOILERS
A set of boilerplates that are based on your settings and fonts choices, and can be used for various design and development circumstances.
Use these handy boilerplates to start designing and/or building your project ASAP! So META!!!
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="library/css/obebs4.production.bundle.css">
<!-- FontAwesome (v5.15.4) SVG JS -->
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" data-auto-replace-svg="nest"></script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=CousinepppMontserrat:300,400,700pppOswald:300,400,700" rel="stylesheet">
<title>OBE Rocks!</title>
<meta name="description" content="An awesome page for my new app/website!">
<!-- Custom/Development CSS for this page -->
<style>
/* New/Experimental Page-level CSS Goes Here... */
</style>
</head>
<body>
<h1>OBE Rocks!</h1>
<!-- JavaScript -->
<script src="library/js/obebs4.production.bundle.js"></script>
<!-- Custom/Development JS for this page -->
<script type="text/javascript">
// New JavaScript Goes Here...
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Global Meta Types -->
<meta name="twitter:card" content="summary" />
<meta property="og:type" content="article" />
<!-- Global Meta Authors -->
<meta name="twitter:site" content="@obe_luv" />
<!-- Global Meta URLs -->
<meta property="og:url" content="https://library.mattmct.com/" />
<!-- Global Meta IDs -->
<meta property="og:site_name" content="OBE Library Site" />
<meta property="fb:admins" content="Facebook numeric ID" />
<!-- Global FAVICONS -->
<link rel="shortcut icon" href="library/images/favicons/favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="library/images/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="library/images/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="library/images/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="library/images/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="library/images/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="library/images/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="library/images/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="library/images/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="library/images/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="library/images/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="library/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="library/images/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="library/images/favicons/favicon-16x16.png">
<link rel="manifest" href="library/images/favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="library/images/favicons/ms-icon-144x144.png" />
<meta name="theme-color" content="#ffffff" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="library/css/obebs4.production.bundle.css">
<!-- FontAwesome (v5.15.4) SVG JS -->
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" data-auto-replace-svg="nest"></script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Cousine|Montserrat:300,400,700|Oswald:300,400,700" rel="stylesheet">
<!-- Page Specific Title Tags -->
<title>OBE Rocks!</title>
<meta name="twitter:title" content="OBE Rocks!" />
<meta property="og:title" content="OBE Rocks!" />
<!-- Page Specific Description Tags -->
<meta name="description" content="An awesome page for my new app/website!" />
<meta name="twitter:description" content="An awesome page for my new app/website!" />
<meta property="og:description" content="An awesome page for my new app/website!" />
<!-- Page Specific Author Tags -->
<meta name="author" content="Author's Name Here" />
<meta name="twitter:creator" content="@twitter_handle_here" />
<!-- Page Specific Share Images data -->
<!-- Twitter images must be at least 120x120px -->
<meta name="twitter:image" content="library/images/OBE-twitter-share-image.jpg" />
<!-- Facebook images should be 1200x630px -->
<meta property="og:image" content="library/images/OBE-facebook-share-image.jpg" />
<!-- Custom/Development CSS for this page -->
<style>
/* New/Experimental Page-level CSS Goes Here... */
</style>
</head>
<body>
<h1>OBE Rocks!</h1>
<!-- JavaScript -->
<script src="library/js/obebs4.production.bundle.js"></script>
<!-- Custom/Development JS for this page -->
<script type="text/javascript">
// New JavaScript Goes Here...
</script>
</body>
</html>
Use these handy code snippets to quickly get HTML5 sections with the appropriate tags and structure to ensure SEO and crawler best practices.
<article class="container">
<h1>Article Headline</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue consequat leo, in pulvinar ex vulputate et. Phasellus sit amet magna justo. Curabitur facilisis lobortis libero. Vivamus fringilla eros id nulla fermentum elementum.</p>
<div class="row">
<section class="col-sm-6 mb-4">
<h2>Section 1 Headline</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue consequat leo, in pulvinar ex vulputate et. Phasellus sit amet magna justo. Curabitur facilisis lobortis libero. Vivamus fringilla eros id nulla fermentum elementum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue consequat leo, in pulvinar ex vulputate et. Phasellus sit amet magna justo. Curabitur facilisis lobortis libero. Vivamus fringilla eros id nulla fermentum elementum.</p>
</section>
<section class="col-sm-6 mb-4">
<h2>Section 2 Headline</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue consequat leo, in pulvinar ex vulputate et. Phasellus sit amet magna justo. Curabitur facilisis lobortis libero. Vivamus fringilla eros id nulla fermentum elementum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue consequat leo, in pulvinar ex vulputate et. Phasellus sit amet magna justo. Curabitur facilisis lobortis libero. Vivamus fringilla eros id nulla fermentum elementum.</p>
</section>
</div>
</article>