This site describes our support for the AngularJS (1.x) framework. Visit for information on our latest version.

Media breakpoints

The media breakpoints service calls callback functions when a Bootstrap grid system breakpoint is hit. This allows you to manipulate the user interface programmatically when CSS media queries are not sufficient.


Media breakpoint methods

  • register(callback) — Registers a callback method with the service to be called any time a media breakpoint is hit. The callback function is called with the following arguments:
    • breakpoint — An object with xs, sm, md, and lg properties. The property that corresponds to the current breakpoint is set to true and the rest are set to false.
  • unregister(callback) — Unregisters the specified callback method. This should be called whenever the controller's $scope is destroyed.
  • getCurrent() — Gets the current media breakpoint object.


Resize the browser to watch the label below change when you hit a media breakpoint.
Current media breakpoint: {{mediaCtrl.status}}


<div ng-controller="MediaBreakpointsTestController as mediaCtrl">
  Resize the browser to watch the label below change when you hit a media breakpoint.
  <div class="alert alert-info" style="margin-top: 10px;">
    Current media breakpoint: <strong>{{mediaCtrl.status}}</strong>


/*global angular */

(function () {
    'use strict';

    function MediaBreakpointsTestController($scope, bbMediaBreakpoints) {
        var self = this;

        function mediaBreakpointCallback(breakpoint) {
            var p;

            for (p in breakpoint) {
                if (breakpoint.hasOwnProperty(p) && breakpoint[p]) {
                    self.status = p;


        $scope.$on('$destroy', function () {

    MediaBreakpointsTestController.$inject = ['$scope', 'bbMediaBreakpoints'];

    angular.module('stache').controller('MediaBreakpointsTestController', MediaBreakpointsTestController);