Standard Screen Width Classes

Bellow is a Demonstration of How Standard Screen Width Classes Works

Viewport Width Classes
All classes set width to 100vw (full viewport width)
Extended Viewport Width Classes
Practical Examples

Full-width Banner

Full width banner (extends beyond container)

Viewport-Width Container

Content constrained within max-width inside viewport-width container
Responsive Behavior
Resize your browser window to see how viewport units work

This element is always 100% of viewport width

Important Notes
  • vw units are relative to the viewport width (1vw = 1% of viewport width)
  • All shown classes currently set width to 100vw (full viewport width)
  • Viewport units are useful for creating full-width elements that extend beyond containers
  • Combine with max-width for responsive designs that don't get too wide on large screens
  • Note that these elements will ignore parent container padding and extend to screen edges
  • Mobile browsers handle viewport units slightly differently - test on multiple devices