Skip to content
Breakpoints at 480px and 384px for Bootstrap 3
Branch: master
Clone or download
Latest commit fea43fa Jun 27, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
doc_images
.gitignore
LICENSE
README.md
bootstrap-patched.css
bootstrap-patched.min.css
bootstrap-xxs-tn.css
bootstrap-xxs-tn.min.css
bootstrap-xxs.css
bootstrap-xxs.min.css
bootstrap.css.patch
bower.json
bsdebug.js
bsdebug.min.js
bsdebug_bookmarklet.js
bsdebug_bookmarklet.min.js
package.json

README.md

bootstrap-xxs

This project provides support for handling smaller screen sizes with Bootstrap 3 (CSS version only).
The new breakpoints are

  • bootstrap-xxs.css: xxs at 480px
  • bootstrap-xxs-tn.css: xxs at 480px and tn at 384px

New classes are:

  • col-xxs-[1-12] with corresponding -pull-, -push- and -offset-
  • hidden-xxs
  • visible-xxs, visible-xxs-block, visible-xxs-inline, visible-xxs-inline-block
  • Same for -tn- (only included in xxs-tn version)

Installation

  1. Download the tarball or install with package managers (recommanded)
  • bower install bootstrap-xxs
  • or npm install bootstrap-xxs
  1. Include bootstrap-xxs-tn.css or bootstrap-xxs.css in your project. This will handle all functions, but visible-xs* and hidden-xs classes.

  2. For full support you need to patch your bootstrap.css with one of these methods OR use bootstrap-patched.css or bootstrap-patched.min.css

  • Method 1: Use Regex to search and replace in bootstrap.css/bootstrap.min.css
    search for @media \(max-width: ?767px\)( ?\{\n? *.(visible|hidden))
    replace with @media (min-width: 480px) and (max-width: 767px)$1
    Should be 5 matches.
  • Method 2: Apply bootstrap.css.patch (unminified only)

Usage

Same usage as for xs, sm, md or lg.

Testing

There is a small (and ugly) script, which shows the recognised device size, browser width and calculates the difference to the next breakpoints. It requires jQuery (tested only with v1.11.1). Include bsdebug.min.js in your project (after jQuery), reload.
Now resize your browser and watch the overlay.

Alternative: Use this bookmarklet. Create a new bookmark with target:

javascript:(function%20(){var%20n=document.createElement('script');n.setAttribute('language','JavaScript');n.setAttribute('src','http://manueltransfeld.de/js/bsdebug_bookmarklet.min.js');document.body.appendChild(n);})();

Demo

Visit www.manueltransfeld.de and double click on my photo to toggle BS-Debug.

You can’t perform that action at this time.