A few semesters back I was teaching my web design course where the students learn to code HTML and CSS. One component of this course is that they learn to make responsive sites using Bootstrap. The biggest problem students had was understanding how the columns were changing based on the various screen sizes. With this in mind we would put background colors on column containers so we could visualize what was happening.
This process became rather tiresome and I looked for a better solution. I hacked together some CSS and jQuery that would inspect the page and mark the page with visual tags showing the bootstrap containers at work. Shown here is an example of how this looks in practice:
In this image you can see that the blue outline shows the container, the red shows the row and each column is outlined in green. Also you will notice the tags in the top right corner of each column indicating the size it is set to.
In preparation for a Bootstrap workshop I am conducting at the Future of Web Design conference in November I decided I would formalize this tool and share it with the world.
I have found this to be a priceless tool when teaching bootstrap. Interestingly I have also found that it is equally useful when I am building my own sites using Bootstrap.
Visit the BootInspect Github project page to see how to put it to work and to get the latest version etc.
I hope you enjoy it. Please do let me know what you think of it!