Twitter Bootstrap - How to Detect When Media Queries Starts

Twitter Bootstrap - how to detect when media queries starts

Using jquery you can find the size of current window and then accordingly do your stuff.

$(window).resize(function() {
  if ($(this).width() >= 1280) {
    //do something
  }
  else if ($(this).width() < 1280 && $(this).width()>= 980) {
    //do something
  }
  ...
});

CSS:: Twitter-Bootsrap-layouts

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

Twitter Bootstrap 3: how to use media queries?

Bootstrap 3

Here are the selectors used in BS3, if you want to stay consistent:

@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

Note: FYI, this may be useful for debugging:

<span class="visible-xs">SIZE XS</span>
<span class="visible-sm">SIZE SM</span>
<span class="visible-md">SIZE MD</span>
<span class="visible-lg">SIZE LG</span>

Bootstrap 4

Here are the selectors used in BS4. There is no "lowest" setting in BS4 because "extra small" is the default. I.e. you would first code the XS size and then have these media overrides afterwards.

@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

Bootstrap 5

@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
@media(min-width:1400px){}

Update 2021-05-20: Info is still accurate as of versions 3.4.1, 4.6.0, 5.0.0.

In Twitter Bootstrap is there a way to detect the screen width (xs,sm,md,lg) without using media queries?

...or you can write your own classes inside media queries and use those instead, for example:

@media (max-width:767px) {
  .wrapper-sm {
    background-color:orange;
  }
}

...and then simply apply it on your class as you asked for.

..and do the same for the other classes.

How to detect responsive breakpoints of Twitter Bootstrap 3 using JavaScript?

Edit: This library is now available through Bower and NPM. See github repo for details.

UPDATED ANSWER:

• Live example: CodePen
• Latest version: Github repository
• Don't like Bootstrap? Check: Foundation demo and Custom framework demos
• Have a problem? Open an issue

Disclaimer: I'm the author.

Here's a few things you can do using the latest version (Responsive Bootstrap Toolkit 2.5.0):

// Wrap everything in an IIFE
(function($, viewport){

    // Executes only in XS breakpoint
    if( viewport.is('xs') ) {
        // ...
    }

    // Executes in SM, MD and LG breakpoints
    if( viewport.is('>=sm') ) {
        // ...
    }

    // Executes in XS and SM breakpoints
    if( viewport.is('<md') ) {
        // ...
    }

    // Execute only after document has fully loaded
    $(document).ready(function() {
        if( viewport.is('xs') ) {
            // ...
        }
    });

    // Execute code each time window size changes
    $(window).resize(
        viewport.changed(function() {
            if( viewport.is('xs') ) {
                // ...
            }
        })
    ); 

})(jQuery, ResponsiveBootstrapToolkit);

As of version 2.3.0, you don't need the four <div> elements mentioned below.

---

ORIGINAL ANSWER:

I don't think you need any huge script or library for that. It's a fairly simple task.

Insert the following elements just before </body>:

<div class="device-xs visible-xs"></div>
<div class="device-sm visible-sm"></div>
<div class="device-md visible-md"></div>
<div class="device-lg visible-lg"></div>

These 4 divs allow you check for currently active breakpoint. For an easy JS detection, use the following function:

function isBreakpoint( alias ) {
    return $('.device-' + alias).is(':visible');
}

Now to perform a certain action only on the smallest breakpoint you could use:

if( isBreakpoint('xs') ) {
    $('.someClass').css('property', 'value');
}

Detecting changes after DOM ready is also fairly simple. All you need is a lightweight window resize listener like this one:

var waitForFinalEvent = function () {
      var b = {};
      return function (c, d, a) {
        a || (a = "I am a banana!");
        b[a] && clearTimeout(b[a]);
        b[a] = setTimeout(c, d)
      }
    }();

var fullDateString = new Date();

Once you're equipped with it, you can start listening for changes and execute breakpoint-specific functions like so:

$(window).resize(function () {
    waitForFinalEvent(function(){

        if( isBreakpoint('xs') ) {
            $('.someClass').css('property', 'value');
        }

    }, 300, fullDateString.getTime())
});

Issues with media queries CSS

Try changing your first media query to this:

@media screen and (min-width: 480px) and (max-width: 1023.99px) {
    ...
}

.cards:nth-of-type(3n) and .cards:nth-of-type(even) seem to both be applied.

How to target a specific screen size using @media media query?

I finally got this one, by reading articles from blogs and stack overflow questions that had been answered, and articles posted from your comments on this question.

Based from common Breakpoints and View-ports for Mobile devices, i.e. 1200px wide viewport for large destkops, I have to insert my own style in a media query.

I.E., @media (min-width) {mystyle here}

@media (min-width: 1200px) {
      .myContainer {
           width: 960px;
           margin: 0 auto;

      }
      .myleftBlock-should-collapse {
           float: none;
           width: 100%;
      }

 }

Since I am using the Twitter Bootstrap Responsive.css file, I need to customize the media query for certain viewport, so that It will fit to my design needs.

Well since I am designing a fixed-width of 960px, I will customize and re-calculate the widths for my .container and span classes. I will convert pixel to percent base from my base width of 960px.

So whatever block or element that I would want to collapse, hide or show in certain viewports, shall be styled accordingly inside the media query.

And... New thing I learned about responsive design. Screen size is different from Viewport.

Twitter bootstrap media queries breakpoints

According to Bootstrap, extra small devices are for less than 768px (up to 767px), and small devices are greater than or equal to 768px. These values seem to be exactly where they need to be and I would use them. Check out this list of displays by pixel density and I think you'll see most devices fall within the pixel width of their respective Bootstrap group.

Bootstrap 3 - media queries Tablet Breakpoints

-- EDIT 2 --

I did more digging on your full site. I recreated your site locally and used a new version of bootstrap CSS, changing the break point to 767 px. I then changed the breakpoints in your custom CSS to 767 px. There was still an issue loading on iPads, the full site was still loading.

Upon further research I noticed the CSS sheet that you are referencing on a CDN for "Bootstrap Gallery". The issue is with this file. This file mentions includes the media queries for bootstrap! After making the changed above and commenting out this file, the site loads in mobile form for iPads in Portrait.

<!-- Bootstrap Gallery -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

-- EDIT 2 --

-- EDIT --

Twitter bootstrap was intended to show the full screen site for Tablets. Note that small devices show the full menu while extra small devices show the mobile menu.

The break point set for small screens is at 768px - the width of the iPad in portrait mode - so the iPad renders as small screen. TO have the iPad render as an extra small device in portrait mode (with the mobile menu), change the min-width to 767px for the small screen break point.

https://github.com/twbs/bootstrap/issues/2155

-- END EDIT --

I'm curious if this happens in both the portrait and landscape modes for the tablets you are testing or ONLY in the landscape mode.

I would expect this to happen in Landscape mode with the standard Bootstrap settings as the width of an iPad is 1024x and the medium breakpoint for bootstrap is 992px. Note that the iPad falls into that Medium category and Medium shows the the full menu and not the mobile menu.

If you want to change the breakpoints you can also do this by setting up a custom bootstrap instance. Change the medium break point to somewhere around 1030px:
http://getbootstrap.com/customize/#media-queries-breakpoints.

The issue here is that people on smaller laptops will get your mobile menu if they don't have your website in full screen.

---

Related Topics