-
Close Search
Newbie
24 posts
Find current Bootstrap size, fast.
Quick size determination tool
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
Quick size determination tool
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
You must be logged in to post a comment.
- Most Recent
- Most Relevant
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.
