Revision history [back]

There is no specific JavaScript method for identifying the responsive breakpoints in Twitter Bootstrap 3, but you can use the CSS media queries that define the breakpoints to detect the current breakpoint using JavaScript.

For example, you can check for the presence of certain CSS classes that define the width of the viewport at different breakpoints, like "col-xs-", "col-sm-", "col-md-", and "col-lg-". You can also use JavaScript's window.matchMedia method to check if a certain media query is currently active.

Here's an example of how to get the current breakpoint using the "col-xs-" CSS classes:

function getCurrentBreakpoint() {
  var width = window.innerWidth;
  if (width >= 1200) return 'lg'; // large screens
  if (width >= 992) return 'md'; // medium screens
  if (width >= 768) return 'sm'; // small screens
  return 'xs'; // extra small screens
}

var currentBreakpoint = getCurrentBreakpoint();
console.log('Current breakpoint is:', currentBreakpoint);

Note that this method assumes that you're using the default breakpoint sizes in Bootstrap 3, but you can customize these sizes by modifying the corresponding variables in the Bootstrap Less source code.