Media
5 items
Description
Inspect Bootstrap layouts: grid overlay, live breakpoint readout, tooltip viewer, and a component opener. GridLens is a developer tool for building and debugging Bootstrap layouts. It puts a handful of things a click away that otherwise mean digging through DevTools. GRID OVERLAY Draw the 12-column grid over any Bootstrap page and see exactly where your columns fall. The overlay appears only where Bootstrap is actually in use, so it never follows you onto unrelated sites. It reproduces Bootstrap's real container geometry - the correct max-width and gutter for each breakpoint, matched to whichever major version the page uses - so it lines up with your actual columns instead of approximating them. Switch between .container and .container-fluid. Pick any overlay colour. A floating readout shows the active breakpoint and the current viewport width, updating live as you resize. VERSION DETECTION Detection runs in the page's own JavaScript context rather than guessing from markup, so it reports the exact version the page loaded - 5.3.3 rather than just "Bootstrap 5". It recognises pages that load Bootstrap's CSS without its JavaScript, and re-checks when Bootstrap arrives late. TOOLTIP VIEWER Reveal every Bootstrap tooltip on the page at once, instead of hovering each element one at a time to check copy, positioning, and overflow. COMPONENT OPENER Lists every Bootstrap component on the page - modals, offcanvas panels, toasts, dropdowns, tabs, accordions, carousels and popovers - and opens the one you pick. No need to find the button that triggers it, or to fake application state to reach it. Components with no trigger anywhere on the page are listed too. CUSTOM BREAKPOINTS Ships with Bootstrap's defaults (xs, sm, md, lg, xl, xxl). If your project overrides them, define your own: a breakpoint is just a name and the width it starts at, so ranges are worked out for you and cannot end up with gaps or overlaps. Export a set as JSON to share it across a team, or paste one in - including the plain name-to-width map you can lift straight out of a project's Sass. PRIVACY No analytics, no telemetry, no accounts, no servers. GridLens sends nothing anywhere. Your settings are saved in your browser's own extension storage and nowhere else. Full policy: https://christian-codez.github.io/gridlens-for-bootstrap/privacy/ GridLens is an independent project. It is not affiliated with, endorsed by, or sponsored by the Bootstrap project or its maintainers.