January 26, 2020
Bootstrap Size Snippet
Comments
(1)
January 26, 2020
Bootstrap Size Snippet
Been a ColdFusion Developer since 1996
Wizard 24 posts
Followers: 15 people
(1)

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

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

1 Comment
2020-01-28 21:31:51
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.

Like
(1)
Add Comment