Firefox devtools.responsiveUI.presets Settings for Bootstrap 3

The ResponsiveUI tool in Firefox makes testing CSS Media Queries super easy, it comes with some presets which I’m sure mean something to somebody but since I work mostly in Bootstrap I wanted to have some easy to access Bootstrap presets in there.

Setting devtools.responsiveUI.presets

  1. In a new window or tab type about:config into the address bar and hit Enter.
  2. Heed the warning about dragons
  3. In the Search box type “responsiveUI”
  4. Double click on the preference named devtools.responsiveUI.presets and then copy & paste the code below into it.
    1. If you can’t see devtools.responsiveUI.presetsĀ either create it as a a string, or save a preset from the ResponsiveUI mode in Firefox which will create the key with a value for you to replace.
  5. Disable Responsive UI View, refresh the page, then re-enable the responsive view for the settings to take effect.

devtools.responsiveUI.presets Bootstrap Settings

Double click to select all:

[{"key": "bootstrap-xs-max","name": "Bootstrap: Extra Small Max (xs)","width": 767,"height": 1000},{"key": "bootstrap-sm-min","name": "Bootstrap: Small Min (sm)","width": 768,"height": 1000},{"key": "bootstrap-sm-max","name": "Bootstrap: Small Max (sm)","width": 991,"height": 1000},{"key": "bootstrap-md-min","name": "Bootstrap: Medium Min (md)","width": 992,"height": 1000},{"key": "bootstrap-md-max","name": "Bootstrap: Medium Max (md)","width": 1199,"height": 1000},{"key": "bootstrap-lg-min","name": "Bootstrap: Large Min (lg)","width": 1200,"height": 1000}]

Using the Bootstrap Settings

There’s a setting for the smallest and largest Bootstrap Grid breakpoints, and each one between has two – a Min and a Max – to show you the two extremes for each size band.

More devtools.responsiveUI.presets Options

Tags:
Categories: