Skip to content

Instantly share code, notes, and snippets.

@JustCallMeAD

JustCallMeAD/Bootstrap 4 (show debug info).html

Last active June 16, 2018 05:47
Show Gist options
  • Save JustCallMeAD/457b1f343532f60021550c1fe68211d0 to your computer and use it in GitHub Desktop.
Save JustCallMeAD/457b1f343532f60021550c1fe68211d0 to your computer and use it in GitHub Desktop.
Download ZIP
BOOTSTRAP 4 - SHOW DEBUG INFO
Raw
Bootstrap 4 (show debug info).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script>
// BOOTSTRAP 4 - SHOW DEBUG INFO
// JUST INCLUDE THIS SCRIPT ANYWAY ON YOUR PAGE & IT WILL DISPLAY WHAT YOUR CURRENT BREAKPOINT IS
//example: https://jsfiddle.net/q5f4o5ou/
function bsShowDebugInfo(classList) {
"use strict";
document.addEventListener("DOMContentLoaded", function (event) {
// DOMContentLoaded
if (classList === undefined) {
classList =
"bg-info text-white m-0 p-3 sticky-top text-center border-bottom border-white bsdebug-info";
};
var parentNode = document.body;
var el = document.createElement('div');
el.className = classList;
el.innerHTML =
'breakpoint = <span class="d-inline d-sm-none">xs</span><span class="d-none d-sm-inline d-md-none">sm</span><span class="d-none d-md-inline d-lg-none">md</span><span class="d-none d-lg-inline d-xl-none">lg</span><span class="d-none d-xl-inline">xl</span> <span id="bsdebug-size"></span>';
parentNode.insertBefore(el, parentNode.childNodes[0]);
getSize();
});
window.addEventListener('resize', getSize);
function getSize() {
var size = '(' + window.innerWidth + 'px X ' + window.innerHeight + 'px)';
document.getElementById('bsdebug-size').innerText = size;
}
};
bsShowDebugInfo();
</script>
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment