Bootstrap Grid Overlay

add-overlay.js

if (document.querySelector('#grid-preview')) {
  document.querySelector('#grid-preview').remove();
  document.querySelector('#grid-preview-style').remove();
} else {
  document.body.insertAdjacentHTML('beforeend', '<div class=container id=grid-preview><div class=row><div class=col><div class=inner><div class="d-block d-sm-none">XS</div><div class="d-none d-md-none d-sm-block">SM</div><div class="d-none d-lg-none d-md-block">MD</div><div class="d-none d-lg-block d-xl-none">LG</div><div class="d-none d-xl-block d-xxl-none">XL</div><div class="d-none d-xxl-block">XXL</div></div></div><div class=col><div class=inner></div></div><div class=col><div class=inner></div></div><div class=col><div class=inner></div></div><div class=col><div class=inner></div></div><div class=col><div class=inner></div></div><div class=col><div class=inner></div></div><div class=col><div class=inner></div></div><div class=col><div class=inner></div></div><div class=col><div class=inner></div></div><div class=col><div class=inner></div></div><div class=col><div class=inner></div></div></div></div><style id=grid-preview-style>%23grid-preview{position:fixed;top:0;bottom:0;left:0;right:0;z-index:99999999;pointer-events:none}%23grid-preview .row{height:100%25}%23grid-preview .col{height:100%25}%23grid-preview .inner{background-color:rgba(0,255,255,.25);border-style:solid;border-color:rgba(0,255,255,.4);border-width:0 1px;height:100%25}%23grid-preview .inner>div{position:absolute;line-height:1;padding:.3em;background-color:rgba(51,102,153,.7);border:1px solid %23036;color:white}</style>');
}

overlay-bookmarklet.js

javascript:void function(){document.querySelector("%23grid-preview")%3F(document.querySelector("%23grid-preview").remove(),document.querySelector("%23grid-preview-style").remove()):document.body.insertAdjacentHTML("beforeend",'<div class=container id=grid-preview><div class=row><div class=col><div class=inner><div class="d-block d-sm-none">XS</div><div class="d-none d-md-none d-sm-block">SM</div><div class="d-none d-lg-none d-md-block">MD</div><div class="d-none d-lg-block d-xl-none">LG</div><div class="d-none d-xl-block d-xxl-none">XL</div><div class="d-none d-xxl-block">XXL</div></div></div><div class=col><div class=inner></div></div><div class=col><div class=inner></div></div><div class=col><div class=inner></div></div><div class=col><div class=inner></div></div><div class=col><div class=inner></div></div><div class=col><div class=inner></div></div><div class=col><div class=inner></div></div><div class=col><div class=inner></div></div><div class=col><div class=inner></div></div><div class=col><div class=inner></div></div><div class=col><div class=inner></div></div></div></div><style id=grid-preview-style>%23grid-preview{position:fixed;top:0;bottom:0;left:0;right:0;z-index:99999999;pointer-events:none}%23grid-preview .row{height:100%25}%23grid-preview .col{height:100%25}%23grid-preview .inner{background-color:rgba(0,255,255,.25);border-style:solid;border-color:rgba(0,255,255,.4);border-width:0 1px;height:100%25}%23grid-preview .inner>div{position:absolute;line-height:1;padding:.3em;background-color:rgba(51,102,153,.7);border:1px solid %23036;color:white}</style>')}();

overlay.html

<div class="container" id="grid-preview">
    <div class="row">
        <div class="col">
            <div class="inner">
                <div class="d-block d-sm-none">XS</div>
                <div class="d-none d-md-none d-sm-block">SM</div>
                <div class="d-none d-lg-none d-md-block">MD</div>
                <div class="d-none d-lg-block d-xl-none">LG</div>
                <div class="d-none d-xl-block d-xxl-none">XL</div>
                <div class="d-none d-xxl-block">XXL</div>
            </div>
        </div>
        <div class="col"><div class="inner"></div></div>
        <div class="col"><div class="inner"></div></div>
        <div class="col"><div class="inner"></div></div>
        <div class="col"><div class="inner"></div></div>
        <div class="col"><div class="inner"></div></div>
        <div class="col"><div class="inner"></div></div>
        <div class="col"><div class="inner"></div></div>
        <div class="col"><div class="inner"></div></div>
        <div class="col"><div class="inner"></div></div>
        <div class="col"><div class="inner"></div></div>
        <div class="col"><div class="inner"></div></div>
    </div>
</div>
<style id="grid-preview-style">
#grid-preview {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999999;
    pointer-events: none;
}

#grid-preview .row {
    height: 100%;
}

#grid-preview .col {
    height: 100%;
}

#grid-preview .inner {
    background-color: rgba(0, 255, 255, 0.25);
    border-style: solid;
    border-color: rgba(0, 255, 255, 0.4);
    border-width: 0 1px;
    height: 100%;
}

#grid-preview .inner > div {
    position: absolute;
    line-height: 1;
    padding: 0.3em;
    background-color: rgba(51, 102, 153, 0.7);
    border: 1px solid #036;
    color: white;
}
</style>