Breakpoints

Mobile first

Responsive utilities are mobile-first. Classes without a breakpoint apply to all screen sizes.

Breakpoint classes apply from the defined breakpoint and up.

<div class="col-12 col-md-6 col-lg-4">Responsive column</div>

This means:

.col-12   applies to all screen sizes
.col-md-6 applies from md and up
.col-lg-4 applies from lg and up

Available breakpoints

css-utils provides the following default breakpoints:

Sass mixin

Use the published breakpoint mixins when custom styles need to share the library’s configured breakpoints:

@use '@oardi/css-utils/scss/mixins/breakpoints' as bp;

.custom-layout {
	@include bp.media-up(md) {
		display: grid;
	}

	@include bp.media-down(md) {
		display: none;
	}
}

The mixin reads the same theme map as the responsive utilities and reports an error for unknown breakpoint names.

Responsive display

Use responsive display utilities to show, hide or change the display behavior of elements at specific breakpoints.

<div class="d-block d-md-none">Visible below md</div>

<div class="d-none d-md-block">Visible from md and up</div>

Responsive grid

Use responsive grid column utilities to change the column width across breakpoints.

<div class="grid">
	<div class="col-12 col-md-6 col-lg-4">...</div>
	<div class="col-12 col-md-6 col-lg-4">...</div>
	<div class="col-12 col-md-6 col-lg-4">...</div>
</div>

Responsive spacing

Use responsive spacing utilities to change margin, padding, gap or direct-child spacing at specific breakpoints. Whole and half steps from 0 through 5 are available.

<div class="p-2 p-md-3 p-lg-4">Responsive padding</div>

Axis and direction utilities also support breakpoints:

<div class="px-2 px-md-3 px-lg-4">Responsive horizontal padding</div>

<div class="mt-2 mt-md-3 mt-lg-4">Responsive margin top</div>

<div class="d-flex gap-1.5 gap-md-2.5">Responsive gap</div>

<div class="space-y-1.5 space-y-md-2.5">Responsive child spacing</div>

Responsive flex

Use responsive flex utilities to change layout direction and alignment across breakpoints.

<div class="d-flex flex-column flex-md-row gap-2">
	<div>Item 1</div>
	<div>Item 2</div>
	<div>Item 3</div>
</div>

You can also combine responsive flex alignment utilities:

<div
	class="d-flex justify-content-start justify-content-md-center align-items-start align-items-md-center">
	...
</div>

Naming pattern

Responsive utilities follow a predictable naming pattern.

[property]-[breakpoint]-[value]

Examples:

.d-md-flex
.col-lg-6
.mt-xl-4
.px-md-3
.gap-lg-2
.gap-lg-2.5
.space-y-md-2.5
.flex-md-row
.justify-content-lg-center
.align-items-xl-start

Common examples

A simple responsive content and sidebar layout:

<div class="grid">
	<div class="col-12 col-md-8">Content</div>
	<div class="col-12 col-md-4">Sidebar</div>
</div>

A responsive section with changing spacing:

<section class="bg-primary px-2 px-md-3 px-lg-4 py-3 py-lg-5">some text</section>

A responsive button group:

<div class="d-flex flex-column flex-md-row gap-2">
	<button class="btn btn-primary btn-solid" type="button">Primary</button>
	<button class="btn btn-primary btn-outline" type="button">Secondary</button>
</div>