GridLens for Bootstrap Autor: chadacreatives

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.
The overlay 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. Detects whether
the page runs Bootstrap 3, 4, or 5, with a manual override when you need it.

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.