January 26, 2020
Bootstrap Size Snippet
January 26, 2020
Bootstrap Size Snippet
Been a ColdFusion Developer since 1996
Explorer 24 posts
Followers: 15 people

Quick size determination tool


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

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"}

writeoutput(“<p class=’#item.styleClass#’><span class=’badge badge-#item.look#’>#item.name#</span></p>”);

Also see


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.

Add Comment