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:

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 or padding at specific breakpoints.

<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>

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
.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:

some text

<section class="bg-primary bg-opacity-75 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>