Simple Bootstrap design trick

Hi All,

So I’ve only just now started using this, and hopefully it proves to be useful.

I’m currently playing with making a site with Bootstrap v4 (it’s alpha, but will be out soon and I figured it would be good to get to know it). Until recently, I’d never used Bootstrap and I’m getting used to it. Quite handy in a lot of ways. I’m used to writing all my own CSS, and this definitely saves some time.

Right now I’m playing with breakpoints and kind of having a hard time figuring out which break point I’m at and juggling style/layout changes.

I thought it would be nice if there were a way to see on the page what media query break point you were at at any given time so I added it to the page markup.

Add this to your HTML:

    <div class="marker hidden-sm-up">
        EXTRA SMALL
    </div>
    
    <div class="marker hidden-md-up hidden-xs-down">
        SMALL
    </div>

    <div class="marker hidden-lg-up hidden-sm-down">
        MEDIUM
    </div>
    
    <div class="marker hidden-xl-up hidden-md-down">
        LARGE
    </div>
    
    <div class="marker hidden-lg-down">
        EXTRA LARGE
    </div>

You can put it anywhere, but I put it at the bottom of the body so it was out of the way.

Then add this to your CSS:


.marker{
    padding: 1em;
    position: fixed;
    width: 15%;
    left: 0;
    bottom: 0;
    background-color: rgba(255,255,255,.8);
    color: black;
    border-radius: 4px;
    border: solid 2px black;
    z-index: 9999;
}

This will add a small label to the bottom left corner of your browser showing you what Bootstrap’s currently active media query breakpoint is. This should make it easier to know what col-* values to use, and what @media breakpoints of your own you might have to set when tweaking the layout.

Hope someone finds this useful!

~Micheal

1 Like