my code stock.com

Tobias Hopp

Viewport Debugger for Bootstrap
by Tobias Hopp

Creates a html grid footer according to Bootstrap 3's grid system.

Snippet options

Download: Download snippet as viewport-debugger-for-bootstrap.html.
Copy snippet: For this you need a free my code stock.com account.
Embed code : You will find the embed code for this snippet at the end of the page, if you want to embed it into a website or a blog!

<!-- Little viewport script to check what's really going on -->
<div class="container hidden-print" style="background:#333;color: #fff;border-bottom:1px solid white;" id="viewport-indicator">
	<div class="row">
		<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
		<script>
			function addListeners(){
				document.getElementById('debugBtn1').addEventListener("click", showViewportWidth);
				document.getElementById('debugBtn2').addEventListener("click", showViewportWidth);
				document.getElementById('debugBtn3').addEventListener("click", showViewportWidth);
				document.getElementById('debugBtn4').addEventListener("click", showViewportWidth);
				function showViewportWidth(){
					var vpw = window.innerWidth;
					var vph = window.innerHeight;
					alert("Your viewport is " + vpw + " in width and " + vph + "px in height.");
				}
			}
			window.addEventListener("load", addListeners);
		</script>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
			<h4>Responsive Test- and Debugtool</h4>
			<small>Click to see your actual viewport.</small>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-12 visible-lg text-center" id="desktop">
			<h2>@Desktop</h2>
			<br />
			<button class="btn btn-primary" id="debugBtn1">Viewport Width</button>
			<br />
			<br />
		</div>
		<div class="col-md-12 visible-md text-center" id="laptop">
			<h2>@Laptop</h2>
			<br />
			<button class="btn btn-primary" id="debugBtn2">Viewport Width</button>
			<br />
			<br />
		</div>
		<div class="col-sm-12 visible-sm text-center" id="tablet">
			<h2>@Tablet</h2>
			<br />
			<button class="btn btn-primary" id="debugBtn3">Viewport Width</button>
			<br />
			<br />
		</div>
		<div class="col-xs-12 visible-xs text-center" id="smartphone">
			<h2>@Smartphone</h2>
			<br />
			<button class="btn btn-primary" id="debugBtn4">Viewport Width</button>
			<br />
			<br />
		</div>
	</div>
</div>

Create a free my code stock.com account now.

my code stok.com is a free service, which allows you to save and manage code snippes of any kind and programming language. We provide many advantages for your daily work with code-snippets, also for your teamwork. Give it a try!

Find out more and register now

You can customize the height of iFrame-Codes as needed! You can find more infos in our API Reference for iframe Embeds.