Bootstrap Breakpoints
Breakpoints are the points at which Bootstrap\'s responsive rules change, allowing the same markup to adapt to different viewport sizes.
Core concept
Explain mobile-first behavior and the meaning of unprefixed classes versus sm, md, lg, xl, and xxl variants. Emphasize that a class such as col-md-6 means six columns from the md breakpoint upward, not only at md.
Using it in a real interface
Teach breakpoint selection from content needs: add a breakpoint when the current layout becomes cramped or unnecessarily sparse. Avoid choosing breakpoints merely because a device has a particular marketing label.
Implementation notes
Test several widths rather than checking only one phone and one desktop width. Responsive bugs often appear between common device sizes, especially when long text, tables, or navigation links are involved.