Breakpoint is a condition that describes a breaking point of layout acquiring next state. The usage of breakpoints is optional, and is often based on the device's characteristics (i.e. size, orientation).
The following properties can be used to describe a breakpoint:
Minimum device width.
Maximum device width.
Minimum device height.
Maximum device height.
Minimum screen resolution of the device.
Maximum screen resolution of the device.
Device screen aspect ratio.
Minimum aspect ratio of the device.
Maximum aspect ratio of the device.
Scanning process of the device.
Device viewport orientation.
Display mode of the application specified in the
Whenever a component's prop is not suffixed by a breakpoint name, a default breakpoint name is used.
The default breakpoint name is
xs, implying mobile-first behavior.
Atomic layout uses Bootstrap 4 Grid breakpoints and mobile-first behavior by default.