Containers

To have a clean layout using containers to limit the width will be a practical example, there are some predefined container classes that you can use:

.container-sm
.container-md
.container-lg
.container-xl
.container-xxl

These classes are generated based on the $RESPONSIVE_BREAKPOINTS variable inside the _config.scss file:

_config.scss

$RESPONSIVE_BREAKPOINTS: (
  xs: 575.98px,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
) !default;