Item logo image for Bootstrap grid viewer

Bootstrap grid viewer

Featured
3.0(

2 ratings

)
Item media 3 screenshot
Item media 4 screenshot
Item video thumbnail
Item media 2 screenshot
Item media 3 screenshot
Item media 4 screenshot
Item video thumbnail
Item media 2 screenshot
Item video thumbnail
Item media 2 screenshot
Item media 3 screenshot
Item media 4 screenshot

Overview

Detects Bootstrap Grid elements on a page and displays visual overlay for them

While working with a bootstrap grid, it can be hard to understand how much space content is actually taking, or whether it’s aligned with other elements properly. This extension removes those unknowns. By visualization of grid elements, it builds up your intuition in laying out the content, helps with identifying sizing and alignment problems at glance, and ultimately improves the overall development time. It’s simple to use. Just one click and you’re provided with a list of Bootstrap grid elements present on the page. By clicking on any of those, you get a visual overlay over that element. By another click it’s possible to extend the overlay to viewport height and use it as a generic ruler. Overlay itself is not just commonly placed. It aligns with the grid element precisely, which means it works with more complex nested grids as well. Furthermore, overlay gutter sizes are a true reflection of the underlying grid element. Any change of gutters initiated by use of Bootstrap classes will be reflected in an overlay. Features: - provides visual feedback on grid elements ( container & row ) - helps with troubleshooting issues like an alignment or sizing - saves development time - works with nested grids - reflects gutter changes performed via default Bootstrap classes Note: Extension works with default Bootstrap Grid only. Use of customized Bootstrap grid classes / elements will break compatibility.

3 out of 52 ratings

Google doesn't verify reviews. Learn more about results and reviews.

Review's profile picture

Zainal ArifinFeb 1, 2024

This is very cool

Details

  • Version
    0.2.1
  • Updated
    June 6, 2022
  • Offered by
    Rastislav Hepner
  • Size
    34.09KiB
  • Languages
    English
  • Developer
    Email
    rastislav.hepner@gmail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

The developer has disclosed that it will not collect or use your data.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Support

For help with questions, suggestions, or problems, visit the developer's support site

Related

Bootstrap 5 Breakpoint Detection Overlay

5.0(4)

Showing overlay of what breakpoint for current screen size.

Design Column Overlay

5.0(2)

This chrome extension places a dynamic overlay over the current tab so that web engineers can follow configured visual design…

Bootstrap Viewport

4.7(3)

Displays the current Bootstrap Viewport

Dimensions Inspect | Gridman

4.0(87)

Swiss army knife for front-end developers

CSS Grid Overlay

4.4(7)

Easily check the grid alignment of your page across breakpoints.

Bootstrap Grid Overlay

5.0(5)

Quickly toggle a Bootstrap Grid Overlay that automatically uses your application's styles to determine how it looks.

Grid Layout System

5.0(1)

Grid Layout se destaca al dividir una página en regiones principales o definir la relación en términos de tamaño, posición y capa

Grids by Color Sets

5.0(3)

Flexible column and baseline grids, beautifully rendered in your browser.

Grid Ruler

3.8(335)

Create grids and measure their distance easily.

gridView

3.4(5)

A simple tool for web designers/developers to overlay a grid on any website with custom columns, colors and more.

Bootstrap Viewport

3.0(22)

Determines browser window width and which bootstrap viewport is in use.

NOV Grid - Responsive grid overlay

5.0(2)

Responsive grid overlay created by dennissnov help you to get pixel perfect. can be customized and support grid based design system

Bootstrap 5 Breakpoint Detection Overlay

5.0(4)

Showing overlay of what breakpoint for current screen size.

Design Column Overlay

5.0(2)

This chrome extension places a dynamic overlay over the current tab so that web engineers can follow configured visual design…

Bootstrap Viewport

4.7(3)

Displays the current Bootstrap Viewport

Dimensions Inspect | Gridman

4.0(87)

Swiss army knife for front-end developers

CSS Grid Overlay

4.4(7)

Easily check the grid alignment of your page across breakpoints.

Bootstrap Grid Overlay

5.0(5)

Quickly toggle a Bootstrap Grid Overlay that automatically uses your application's styles to determine how it looks.

Grid Layout System

5.0(1)

Grid Layout se destaca al dividir una página en regiones principales o definir la relación en términos de tamaño, posición y capa

Grids by Color Sets

5.0(3)

Flexible column and baseline grids, beautifully rendered in your browser.

Google apps