Skip to content
Breakpoints at 480px and 384px for Bootstrap 3
Branch: master
Clone or download
Latest commit fea43fa Jun 27, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Added .gitignore Jun 27, 2017
bootstrap-patched.css Updated to Bootstrap 3.3.7 Jun 27, 2017
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
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


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)


  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)


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


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:



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

You can’t perform that action at this time.