Note: If present, a vertical scrollbar overlays the viewport, which can obscure the right edge of the black bars when changing the viewport width. To possibly eliminate the vertical scrollbar, visualize Bootstrap 3.x media query viewport breakpoints (learnwebcoding.com) by themselves.
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.
3.) Medium screen (desktop). md. @media (min-width: 992px) { ... }. Styles applied to content when viewport width is 992+ pixels.
4.) Large screen (large desktop). lg. @media (min-width: 1200px) { ... }. Styles applied to content when viewport width is 1200+ pixels.
Note: If present, a vertical scrollbar overlays the viewport, which can obscure the right edge of the black bars when changing the viewport width. To possibly eliminate the vertical scrollbar, visualize Bootstrap 4.x media query viewport breakpoints (learnwebcoding.com) by themselves.
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.
3.) Medium screen (tablet). md. @media (min-width: 768px) { ... }. Styles applied to content when viewport width is 768+ pixels.
4.) Large screen (desktop). lg. @media (min-width: 992px) { ... }. Styles applied to content when viewport width is 992+ pixels.
5.) Extra large screen (large desktop). xl. @media (min-width: 1200px) { ... }. Styles applied to content when viewport width is 1200+ pixels.
Last reviewed/updated: 04 Mar 2019 | Published: 08 Jul 2015 | Status: Active