Overview

When I am developing in Bootstrap, I need to make sure that what is on the screen looks good. Bootstrap have various cutoff points where the flow can change. So to help with the visual debugging, I have created this tool that just shows what the current screen is according to Bootstrap.

The Snippet

<cfscript>
sizes = [
{ "styleClass" : "d-block d-sm-none", "name" : "Extra small", "look" : "warning"},
{ "styleClass" : "d-none d-sm-block d-md-none", "name" : "Small", "look" : "info"},
{ "styleClass" : "d-none d-md-block d-lg-none", "name" : "Medium", "look" : "success"},
{ "styleClass" : "d-none d-lg-block d-xl-none", "name" : "Large", "look" : "primary"},
{ "styleClass" : "d-none d-xl-block", "name" : "Extra large", "look" : "dark"}
];

sizes.each(function(item){
writeoutput(“<p class=’#item.styleClass#’><span class=’badge badge-#item.look#’>#item.name#</span></p>”);
});
</cfscript>

Also see

https://github.com/jmohler1970/Bootstrap-Size-Snippet

blog

CFML

learning

James Mohler Follow

Been a ColdFusion Developer since 1996

1 Comment

Grae Desmond

2020-01-28 21:31:51

Grae Desmond

2020-01-28 21:31:51

Tried on tryCF.com and cffiddle.org. Pretty cool but surprised that my widescreen monitor came across as small. Guess that’s why it’s good to know what Bootstrap sees vs what i thought.

(1)

Add Comment

You must be logged in to post a comment.