How do I see the size of the bootstrap grid size on my page while developing?

AngryHacker_9382 0
Viewed 2282

While developing a web page it would be handy to see which sets of size classes are active: xs, sm, md, lg.

I've noted that there are some extensions that show the grid overlay, but not the size.

Is there a way to indicate which size sets are active?

twitter-bootstrap css html
7 Answers

With bootstrap 4.1 you can add something like this on your page.

The code below will show what is the current class used by bootstrap based on your screen width.

<div class="alert alert-info">
    <div class="d-none d-xl-block font-weight-bold">X-LARGE (XL)</div>
    <div class="d-none d-lg-block d-xl-none font-weight-bold">LARGE (LG)</div>
    <div class="d-none d-md-block d-lg-none font-weight-bold">MEDIUM (M)</div>
    <div class="d-none d-sm-block d-md-none font-weight-bold">SMALL (SM)</div>
    <div class="d-block d-sm-none alert font-weight-bold">X-SMALL (Defaut)</div>
</div>
user_49673890

I used a method that might be silly, but it works great.

You can do something like this, which will show the size on screen, but since the size is 0 then it's going to hide it. (don't use visibility hidden 'cause it doesn't work) 

<span id="theSize" style="font-size: 0;">
  <span class="d-none d-lg-block">LG</span>
  <span class="d-none d-md-block d-lg-none">MD</span>
  <!-- and the rest of the sizes -->
</span>

and this is the code for checking the size in javascript.

if (document.getElementById('theSize').innerText == 'LG') //large
  // do something
else if (document.getElementById('theSize').innerText == 'MD') //medium
  // do another thing.

// for the rest of the sizes
else if ...
else if ...
else ...

user_88172760
Related