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 Added .gitignore Jun 27, 2017
LICENSE
README.md
bootstrap-patched.css Updated to Bootstrap 3.3.7 Jun 27, 2017
bootstrap-patched.min.css
bootstrap-xxs-tn.css
bootstrap-xxs-tn.min.css Added patched 'ready to use' bootstrap and minified version of all files Aug 19, 2014
bootstrap-xxs.css fixed breakpoint Aug 18, 2014
bootstrap-xxs.min.css Added patched 'ready to use' bootstrap and minified version of all files Aug 19, 2014
bootstrap.css.patch
bower.json
bsdebug.js
bsdebug.min.js
bsdebug_bookmarklet.js
bsdebug_bookmarklet.min.js Small optimisations and bug fixes Jun 27, 2017
package.json Updated authors, git URLs, package and bower versions Jun 27, 2017

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.