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.

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>");

Is there additional information that can/should be shown.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.