Visualize Bootstrap Media Query Viewport Breakpoints

  1. Visualize Bootstrap 3.3.x Media Query Viewport Breakpoints
  2. Visualize Bootstrap 4.x Media Query Viewport Breakpoints
  3. Resources And Additional Information

1. Visualize Bootstrap 3.3.x Media Query Viewport Breakpoints

1.) Extra small screen. Phone. xs. No media query required. Styles applied to content at all viewport widths.

2.) Small screen. Tablet. sm. @media (min-width: 768px) { ... }. Styles applied to content when viewport width is 768+ pixels.
Width 767px.

3.) Medium screen. Desktop. md. @media (min-width: 992px) { ... }. Styles applied to content when viewport width is 992+ pixels.
Width 991px.

4.) Large screen. Large desktop. lg. @media (min-width: 1200px) { ... }. Styles applied to content when viewport width is 1200+ pixels.
Width 1199px.


2. Visualize Bootstrap 4.x Media Query Viewport Breakpoints

1.) Extra small screen. Portrait phone. xs. No media query required. Styles applied to content at all viewport widths.

2.) Small screen. Landscape phone. sm. @media (min-width: 576px) { ... }. Styles applied to content when viewport width is 576+ pixels.
Width 575px.

3.) Medium screen. Tablet. md. @media (min-width: 768px) { ... }. Styles applied to content when viewport width is 768+ pixels.
Width 767px.

4.) Large screen. Desktop. lg. @media (min-width: 992px) { ... }. Styles applied to content when viewport width is 992+ pixels.
Width 991px.

5.) Extra large screen. Large desktop. xl. @media (min-width: 1200px) { ... }. Styles applied to content when viewport width is 1200+ pixels.
Width 1199px.


3. Resources And Additional Information

Last reviewed/updated: 05 Dec 2018 | Published: 08 Jul 2015 | Status: Active

Learn Web Coding

Valid HTML5 Valid CSS Level 3