When To Use

A container is an element designed to contain page elements to a reasonable maximum width based on the size of a user's screen. This is useful to couple with other UI elements like grid or menu to restrict their width to a reasonable size for display.

Container Sizes

Containers are designed to responsively adjust their maximum width based on the size of the screen on which they are appearing.

Responsive Visibility

Since variations in Semantic UI are only assigned in the scope of components, there are no "free floating" responsive class names, however some components include responsive variations to help ease responsive design. Grid for example, includes responsive classes for hiding or showing column, row based on device type.

Determining Maximum Widths

Containers appear at the same width at each device size. This size is calculated programmatically by determining the maximum device width available within a device breakpoint, given a desired minimum gutter size.

For example to determine tablet container size the following formula is used:

/* In site.variables */
@tabletBreakpoint : 768px;
@scrollbarWidth : 17px; /* This is a constant */
 /* In container.variables */
@tabletMinimumGutter : (@emSize  * 1); /* require 1em gutter */
@tabletWidth : @tabletBreakpoint - (@tabletMinimumGutter * 2) - @scrollbarWidth;

This is the same as 768px - (14px * 2) - 17px or 723px

Adjusting site breakpoints in site.variables to use custom values will automatically adjust container widths.