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