Breakpoint Generator

Configuration

Breakpoint Overview

Visual Representation

:root {
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* sm: 640px+ */
@media (min-width: 640px) {
  .container-sm {
    max-width: 640px;
  }
}

/* md: 768px+ */
@media (min-width: 768px) {
  .container-md {
    max-width: 768px;
  }
}

/* lg: 1024px+ */
@media (min-width: 1024px) {
  .container-lg {
    max-width: 1024px;
  }
}

/* xl: 1280px+ */
@media (min-width: 1280px) {
  .container-xl {
    max-width: 1280px;
  }
}

/* 2xl: 1536px+ */
@media (min-width: 1536px) {
  .container-2xl {
    max-width: 1536px;
  }
}