A small piece of code to debug bootstrap responsive layouts.
This is only a stupid piece of code to debug responsive layouts based on bootstrap framework. The script add a simple overlay box with basic info that update on resize and scroll events:
- version: bootstrap version 2.x or 3.x
- breakpoint: bootstrap breakpoints @screen-lg, @screen-md, @screen-sm, @screen-xs
- width: window.width()
- height: window.height()
- offsetTop: window.offsetTop()
Extra feature: Show grid overlay
GitHub Page: http://empiricompany.github.io/bootstrap-debugger
Example run on jsbin: https://output.jsbin.com/kipeya
Credits to detect breakpoints: http://stackoverflow.com/questions/14441456/how-to-detect-which-device-view-youre-on-using-twitter-bootstrap-api
For priority bug reports / suggestions and other questions find me directly on https://gitter.im/bootstrap-debugger/Lobby