Breakpoints

Breakpoints are the widths at which the layout adapts. The library ships the six standard Bootstrap tiers, and every responsive prop across the layout components is named for one of them — so “responsive” is just a matter of which tier a prop belongs to.

The scale

There are six tiers. The base tier, xs, starts at 0 and needs no suffix; the other five each have a min-width at which they take over.

text

xs   0        // base — always on (no suffix)
sm   576px    // small — landscape phones and up
md   768px    // medium — tablets and up
lg   992px    // large — desktops and up
xl   1200px   // extra large — wide desktops and up
xxl  1400px   // extra extra large — larger desktops and up

The library exports the ordered list of tier names, so you can iterate the breakpoints programmatically instead of hard-coding them.

tsx

import { BREAKPOINTS } from '@metatoy/bootstrap-styled';

// ['base', 'sm', 'md', 'lg', 'xl', 'xxl']
// ('base' is the xs tier — the suffix-less default.)

Mobile-first: min-width and up

The tiers are mobile-first. Each one is a min-width media query, so a value set at a breakpoint applies at that width and every width above it — until a larger breakpoint overrides it. That is why you style the smallest screen first (the base prop) and layer on larger tiers as needed.

tsx

// Base applies from 0 up; md overrides from 768px up; xl from 1200px up.
<Col span={12} md={6} xl={4} />

// Reads as: full width on phones, half at md, a third at xl.

Responsive props

Every layout prop that varies by screen size follows the same naming rule: the bare prop is the base (xs) value, and the suffixed variants target a tier — Sm, Md, Lg, Xl, Xxl. This holds across the grid:

tsx

// Col — span, offset, order
<Col span={12} sm={6} lg={3} offsetMd={2} orderLg="first" />

// Row — row-cols and gutters
<Row cols={1} colsMd={2} colsXl={4} g={2} gxLg={4} />

// Container — the responsive-container variant
<Container breakpoint="lg" />

See Grid for each of these props in depth.

Breakpoints in action

The demo below sets span={12} sm={6} lg={3}: one column per row on the smallest screens, two from sm, and four from lg. Resize the window (or your browser devtools viewport) to watch it reflow at 576px and 992px.

Containers and breakpoints

Container is tied to the same scale. A default Container caps its max-width at each tier; a responsive Container (breakpoint="md") stays full width until that tier, then caps above it; and a fluid container ignores the caps entirely.

tsx

<Container />              // caps at 540 / 720 / 960 / 1140 / 1320px
<Container breakpoint="lg" /> // 100% wide below lg, capped from lg up
<Container fluid />        // always 100% wide

The cap widths per tier are 540px (sm), 720px (md), 960px (lg), 1140px (xl), and 1320px (xxl).

Theming

Breakpoints are structural, not visual, so they carry no color tokens. The tier widths live in the theme and back both the Container max-widths and the min-width media queries the responsive props generate. Iterate the exported BREAKPOINTS tier names when you need to drive layout logic off the same scale rather than re-listing the tiers by hand.

Accessibility

Responsive layout should adapt the presentation without changing what content is available or the order in which it is read. Keep the DOM order logical at every tier, and prefer reflowing (letting columns wrap) over hiding content so the page stays usable when zoomed or on small screens. Reordering props such as order change only the visual arrangement — the reading and tab order still follow the source.

Explore in Ladle

See the responsive grid in Ladle ↗