GridLens for Bootstrap
Overlay the real Bootstrap grid, watch the breakpoint change as you resize, reveal every tooltip at once, and open any modal — including the ones with no trigger button.
An independent project. Not affiliated with, endorsed by, or sponsored by the Bootstrap project or its maintainers. "Bootstrap" is used only to describe what the tool inspects.
What it does
Grid overlay
Reproduces Bootstrap's actual container geometry — correct max-width and gutter for each breakpoint, matched to whichever major version the page uses. Switch between .container and .container-fluid.
Breakpoint readout
A floating panel showing the active breakpoint and viewport width, updating live as you resize. The breakpoint also appears on the toolbar icon badge.
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.
Modal opener
Lists every modal in the DOM and opens the one you pick — no hunting for the trigger, no faking application state to reach it.
The grid actually lines up
Most grid overlays draw twelve evenly spaced bars and call it done. Bootstrap's real geometry is more particular: the container is capped at a specific max-width per breakpoint, the row cancels the container's padding with negative margins, and each column carries half a gutter of padding. Miss any of that and the overlay sits a few pixels off your actual columns — close enough to look right, wrong enough to mislead.
GridLens reproduces the box model instead of approximating it, and follows the page's Bootstrap version, since 3, 4, and 5 use different container widths and different gutters. It's verified against real Bootstrap 5.3.3 across every container tier:
| Viewport | Container tier | Max deviation |
|---|---|---|
| 575px | fluid | 0.03px |
| 576px | 540px | 0.00px |
| 768px | 720px | 0.00px |
| 992px | 960px | 0.09px |
| 1200px | 1140px | 0.00px |
| 1400px | 1320px | 0.00px |
Worst deviation across eighteen tested widths: 0.09px — sub-pixel, from Bootstrap's percentage widths versus flex division. Both land on the same rendered pixel.
Install
Chrome — clone the repo, open chrome://extensions/, turn on Developer mode, then Load unpacked and select the project folder.
Firefox — open about:debugging#/runtime/this-firefox, then Load Temporary Add-on and select manifest.json.
git clone https://github.com/christian-codez/gridlens-for-bootstrap.git
cd gridlens-for-bootstrap
npx web-ext run # launches Firefox with it loadedRequires Chrome 111+ or Firefox 128+. There's a demo page at demo/index.html with a grid, five tooltips, and three modals to try it against.
Privacy
GridLens collects nothing. No analytics, no telemetry, no accounts, no servers, no remote code. Five preferences live in your browser's own extension storage and nowhere else. The full policy spells out exactly what is stored and why each permission is requested.