Responsive Columns

Responsive Columns

Responsive column classes allow one HTML structure to represent several layouts as the viewport grows.

Core concept

Explain patterns such as col-12 col-md-6 and col-12 col-sm-6 col-lg-3. The first class establishes the mobile arrangement; later prefixes progressively introduce additional columns.

Using it in a real interface

Use cards as a practical example: one card per row on a narrow screen, two per row at medium widths, and four per row on a large screen. Explain how wrapping happens automatically when the row reaches its twelve-column capacity.

Implementation notes

Choose breakpoints from content density. If a card becomes too narrow to display its title and action clearly, change the column span or breakpoint instead of shrinking the typography excessively.