How to know which state / format Twitter Bootstrap is in?

Question

Twitter Bootstrap uses 4 different screen formats in general, being: XS, SM, MD and LG. While developing and testing I often wonder which one is used at that moment.

Is there a way to always know which format is handled without having to use any developer tool?

Answer 1

I have written a short and simple code of a div with the "debug" class.

With simple HTML and CSS you can display a div with the current screen size in display. Every developer should be able to write this. But still I thought I'd share it, maybe you didn't think about it.

HTML

<div class="debug hidden-xs hidden-sm hidden-md">Size: LG - Large</div>
<div class="debug hidden-xs hidden-sm hidden-lg">Size: MD - Medium</div>
<div class="debug hidden-xs hidden-md hidden-lg">Size: SM - Small</div>
<div class="debug hidden-sm hidden-md hidden-lg">Size: XS - Extra small</div>

CSS

.debug{ width: 100%; position: fixed; bottom: 0; background: #ed2901; color: #FFF; text-align: center; line-height: 20px; }

Answer 2

My small improvement to main answer. Add this HTML fragment anywhere on your page.

<div style="width:100%;position:fixed;bottom:0px;background: rgba(200,0,0,0.7);
 color:#fff; text-align:center;z-index:1000">
<span class="debug hidden-xs hidden-sm hidden-md">Size: XS SM MD <b>LG</b></span>
<span class="debug hidden-xs hidden-sm hidden-lg">Size: XS SM <b>MD</b> LG</span>
<span class="debug hidden-xs hidden-md hidden-lg">Size: XS <b>SM</b> MD LG</span>
<span class="debug hidden-sm hidden-md hidden-lg">Size: <b>XS</b> SM MD LG</span>
 | ViewportWidth: <span id='viewportwidth'></span>
</div>

<script>
window.addEventListener('resize', function(event){  updateWidthInfo(); });

document.addEventListener('DOMContentLoaded', function(event){  updateWidthInfo(); });

function updateWidthInfo() {
    document.getElementById('viewportwidth').innerHTML = getViewportWidth();
    function getViewportWidth(w) {
        w = w || window;
        if (w.innerWidth != null) return  w.innerWidth;
        var d = w.document;
        if (document.compatMode == "CSS1Compat")   return d.documentElement.clientWidth;
        else return d.body.clientWidth;
    }
}
</script>

This also shows the current width.