How to determine which mesh option is currently used

Question

I am using Bootstrap 3 for a webpage created using PHP and HTML.

With responsive mesh and classes in Bootstrap 3, you can assign multiple classes to divs to define different widths depending on the current screen size - for example:

<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">...</div> 

This applies to screen size using col-lg for large devices, col-md for medium devices, col-sm for small devices, and col-xs x for very small devices.
This works as intended, but I wonder how I can determine which of these classes Bootstrap is currently using so that I can show the version of the current size on the screen.

Is there a way to determine which of the above grid / class parameters col is currently active using PHP (or jQuery)? I could not find the right solution for this myself.

Answer 1

Here is a simple test that you can try to show which loading tray classes are used to recalibrate to a specific size.

The width is taken from the current window, and the conditions or screen sizes are from BOOTSTRAP , do not rely on this, as it is not accurate, perhaps more or less 3px.

You can improve it to your liking.

 $(document).ready(function(){ $(window).on('resize',function(){ var winWidth = $(window).width(); if(winWidth < 768 ){ console.log('Window Width: '+ winWidth + 'class used: col-xs'); }else if( winWidth <= 991){ console.log('Window Width: '+ winWidth + 'class used: col-sm'); }else if( winWidth <= 1199){ console.log('Window Width: '+ winWidth + 'class used: col-md'); }else{ console.log('Window Width: '+ winWidth + 'class used: col-lg'); } }); }); 

Answer 2

The best way to do this and not even worry about whether bootstrap can change the width of the device in the future is to add 4 divs to your body and check which one is visible. This works in Bootstrap 3 and 4!

Your HTML will look like this (add this somewhere in your document):

 <div class='device-check visible-xs' data-device='xs'></div> <div class='device-check visible-sm' data-device='sm'></div> <div class='device-check visible-md' data-device='md'></div> <div class='device-check visible-lg' data-device='lg'></div> 

you can find the current grid parameter with:

 function get_current_grid_option(){ return $('.device-check:visible').attr('data-device') } 

this will return xs , sm , md or lg

Answer 3

Check out the document : http://getbootstrap.com/css/#grid

We sometimes extend these media queries to include max-width to limit CSS for a narrower set of devices.

Copy

 @media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... } 

Grid Options

See how Bootstrap grid aspects work across multiple devices with a handy spreadsheet.

• Optional Small Devices Phones (<768px)
• Small Tablet devices (≥768px)
• Medium Devices Desktop Computers (≥992px)
• Large Devices Desktop Computers (≥1200px)

Answer 4

In case someone else goes into this post looking for Bootstrap 4 answer, I end up creating this piece of HTML code that shows the appropriate div for sizing using BS response utilities.

I added a bit of inline style to simplify the insertion into the fragment, but the styles could be transferred to the stylesheet.

 <div class="d-none d-xl-block" style="background: #007bff; color: #fff; padding: 5px; text-align: center;">XL</div> <div class="d-none d-lg-block d-xl-none" style="background: #27a745; color: #fff; padding: 5px; text-align: center;">LG</div> <div class="d-none d-md-block d-lg-none" style="background: #ffc108; color: #fff; padding: 5px; text-align: center;">MD</div> <div class="d-none d-sm-block d-md-none" style="background: #18a2b8; color: #fff; padding: 5px; text-align: center;">SM</div> <div class="d-block d-sm-none" style="background: #dc3545; color: #fff; padding: 5px; text-align: center;">XS</div> 

Here is more information about the bootstrap 4 mapping utilities used .

Answer 5

With this small snippet, you can see that the current type of device (Mobile, Tablet, Desktop, Large) directly adds the upper body. Enjoy.

 var refreshDeviceInfo = function () { var id = 'deviceInfo', type = "Mobile", widthType = 'innerWidth', container = document.getElementById(id), width; if (!('innerWidth' in window )) { widthType = 'clientWidth'; window = document.documentElement || document.body; } width = window[widthType]; // check, if our info container is already in place, // if not prepend it to the body if (!container) { container = document.createElement('div'); container.setAttribute("id", id); container.setAttribute("style", "padding:20px; text-align:center; background:#eee"); document.body.insertBefore(container, document.body.firstChild); } if (width >= 1200) { type = "Large"; } else if (width >= 992) { type = "Desktop"; } else if (width >= 768) { type = "Tablet"; } container.innerHTML = type; }; // refresh on resize if ( window.addEventListener ) { window.addEventListener( "resize", refreshDeviceInfo, false ); } else if ( window.attachEvent ) { window.attachEvent( "onresize", refreshDeviceInfo ); } else { window["onresize"] = refreshDeviceInfo; } // initial refresh refreshDeviceInfo(); 

Answer 6

Changed response from SunnyRed.

Display the current layout of Bootstrap 3

• Does not rely on jQuery as an accepted answer.
• Displays location information always in the right / bottom corner of the window above other content.
• Does not modify the page itself.
• It is expected that the document will be ready for first execution, so the correct result will be issued from the very beginning.

Add this before the body tag:

  <script> function refreshDeviceInfo() { var id = 'deviceInfo', type = "Mobile (xs)", widthType = 'innerWidth', container = document.getElementById(id), width; if (!('innerWidth' in window )) { widthType = 'clientWidth'; window = document.documentElement || document.body; } width = window[widthType]; if (!container) { container = document.createElement('div'); container.setAttribute("id", id); container.setAttribute("style", "position:fixed; right:0px; bottom: 0px; padding:10px; z-index:9999;background:rgba(0,255,0,0.6)"); document.body.insertBefore(container, document.body.firstChild); } if (width >= 1200) { type = "Large Desktop (lg)"; } else if (width >= 992) { type = "Medium Desktop (md)"; } else if (width >= 768) { type = "Tablet (sm)"; } container.innerHTML = type; }; // refresh on resize if ( window.addEventListener ) { window.addEventListener( "resize", refreshDeviceInfo, false ); } else if ( window.attachEvent ) { window.attachEvent( "onresize", refreshDeviceInfo ); } else { window["onresize"] = refreshDeviceInfo; } document.addEventListener("DOMContentLoaded", function(event) { refreshDeviceInfo(); }); </script> 

Answer 7

@tomexsans, you're in charge !!! I needed to make some special indentation, the columns were col-xs, and your answer hit hard !! Thank :)