Twitter Bootstrap: add media queries for xxs breakpoint

Question

I was surprised that Twitter Bootstrap does not have media queries for building an adequate website version for mobile portrait screens.

A tricky thing is to define "mobile portrait" width. Previously most phones had 320px screen width, but currently most advisable is to target devices narrower than 375px.

iPhone scren resolutions

I need at least .col-xxs-* classes with a breakpoint at 375px screen width, similar to .col-xs-*. This can be CSS or SCSS code. I'm using Bootstrap-4-alpha, hope solution will work for Bootstrap-3 too.

Answer 1

You can add a new breakpoint to BS 4 by changing the $grid-breakpoints and $container-max-widths variables with SASS.

    /* your _custom.scss */

    @import "bootstrap/functions";
    @import "bootstrap/variables";
    @import "bootstrap/mixins";

    $grid-breakpoints: (
      xxs: 0,
      xs: 375px,
      sm: 544px,
      md: 768px,
      lg: 992px,
      xl: 1200px
    );

    $container-max-widths: (
      xxs: 375px,
      xs: 375px,
      sm: 544px,
      md: 768px,
      lg: 992px,
      xl: 1200px
    );

    @import "bootstrap";

http://codeply.com/go/mPS4Yros4U

Update 2018: Now that the xs- infix has been removed in Bootstrap 4, adding a new smaller xxs breakpoint means that this lowest breakpoint has no infix. For example:

col-6 (50% on xxs)
col-xs-6 (50% on xs)

Notes on customizing Bootstrap using SASS, from the docs...

Modify any of the Sass variables and maps in your custom.scss.... Every Sass variable in Bootstrap 4 includes the !default flag allowing you to override the variable’s default value in your own Sass without modifying Bootstrap’s source code. Copy and paste variables as needed, modify their values, and remove the !default flag. If a variable has already been assigned, then it won’t be re-assigned by the default values in Bootstrap.

Answer 2

In Bootstrap 4 you can just add a new breakpoint by editing the $grid-breakpoints-variable. Originally it is:

$grid-breakpoints: (
  xs: 0,
  sm: 544px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

By changing it to

$grid-breakpoints: (
  xxs: 0,
  xs: 375px,
  sm: 544px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

you would add a new breakpoint xxs. But I would recommend a 2-sign-identifier, something like ms for "medium-small":

$grid-breakpoints: (
  xs: 0,
  ms: 375px,
  sm: 544px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

In TWBS3 it's not that easy - there you will have to hack the code.

Answer 3

Some bootstrap forks are providing additional breakpoints in a pretty solid manner. This one seems to be maintained regularly and works fine for me:

SCSS: https://gist.github.com/Jakobud/c057577daddbde4dd709

// Mid-Small breakpoint

$screen-ms: 480px !default;
$screen-ms-min: $screen-ms !default;
$screen-ms-max: ($screen-sm-min - 1) !default;

// Redefined Extra Small max value (Can't override non-default variables in SASS)
$screen-xs-max-new: ($screen-ms-min - 1) !default;

// Common styles (see make-grid-columns() in bootstrap/mixins/_grid-framework.scss)

.col-ms-1,
.col-ms-2,
.col-ms-3,
.col-ms-4,
.col-ms-5,
.col-ms-6,
.col-ms-7,
.col-ms-8,
.col-ms-9,
.col-ms-10,
.col-ms-11,
.col-ms-12 {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  ($grid-gutter-width / 2);
  padding-right: ($grid-gutter-width / 2);
}

// Misc. class adjustments for col-ms

@media (min-width: $screen-ms) and (max-width: $screen-ms-max) {
  .container {
    max-width: $screen-sm - 20px;
  }
  .hidden-xs {
    display: block !important;
  }
}

// col-ms grid

@media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) {
  @include make-grid(ms);
}

// Visibility utilities

@include responsive-invisibility('.visible-xs, .visible-ms');

.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-ms-block,
.visible-ms-inline,
.visible-ms-inline-block {
  display: none !important;
}

@media (max-width: $screen-xs-max-new) {
  @include responsive-visibility('.visible-xs');
}
.visible-xs-block {
  @media (max-width: $screen-xs-max-new) {
    display: block !important;
  }
}
.visible-xs-inline {
  @media (max-width: $screen-xs-max-new) {
    display: inline !important;
  }
}
.visible-xs-inline-block {
  @media (max-width: $screen-xs-max-new) {
    display: inline-block !important;
  }
}

@media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) {
  @include responsive-visibility('.visible-ms');
}
.visible-ms-block {
  @media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) {
    display: block !important;
  }
}
.visible-ms-inline {
  @media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) {
    display: inline !important;
  }
}
.visible-ms-inline-block {
  @media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) {
    display: inline-block !important;
  }
}

@media (max-width: $screen-xs-max-new) {
  @include responsive-invisibility('.hidden-xs');
}

@media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) {
  @include responsive-invisibility('.hidden-ms');
}

LESS: https://gist.github.com/wdollar/135ec3c80faaf5a821b0

Answer 4

You didn't specify which iPhone you're designing for, so here are most of them to help get you started

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}