Responsive Utility Patterns

Resize your browser to see responsive utilities in action.

xs sm md lg xl xxl

Responsive Display

Use .d-{breakpoint}-{value} to control visibility at different screen sizes.

Hide on Mobile, Show on Desktop

.d-none .d-md-block - Hidden on xs/sm, visible on md+

Show Only on Mobile

.d-block .d-md-none - Visible on xs/sm only

Hide at Specific Breakpoint

.d-block .d-lg-none .d-xl-block - Hidden only on lg

Context-Specific Content

Desktop View: This detailed description appears on larger screens where users have more space to read.

Mobile View: Condensed info for small screens.

Responsive Spacing

Use .{m|p}{side}-{breakpoint}-{size} for responsive margins and padding.

Responsive Margins

.mt-2 .mt-md-4 .mt-lg-5
Top margin: 0.5rem on xs, 1.5rem on md, 3rem on lg

Responsive Padding

.p-2 .p-md-4 .p-lg-5
Padding increases with screen size

Responsive Gap (Flexbox/Grid)

Item 1
Item 2
Item 3
Item 4

.gap-1 .gap-md-3 .gap-lg-4 - Gap grows with viewport

Responsive Flexbox

Use responsive flex utilities to change layouts at different breakpoints.

Stack to Horizontal

Item 1
Item 2
Item 3

.d-flex .flex-column .flex-md-row - Vertical on mobile, horizontal on md+

Responsive Alignment

Start
Middle
End

.justify-content-center .justify-content-md-between - Centered on mobile, spread on md+

Responsive Order

First on desktop (order-md-1)
First on mobile (order-1)
Always third

Responsive Text

Use .text-{breakpoint}-{value} for responsive text alignment.

Responsive Text Alignment

.text-center .text-md-start - Centered on mobile, left on md+

.text-start .text-lg-end - Left aligned, right on lg+

Responsive Sizing Patterns

Width utilities aren't responsive by default, but combine with display utilities.

Full Width Mobile, Contained Desktop

Combine with container or custom CSS for responsive widths

Viewport-Based Sizing

.min-vh-100, .vh-100, .vw-100

Use viewport units for full-screen sections

Practical Patterns

Responsive Navigation Bar

Responsive Card Grid

Card 1

Extended description for larger screens.

Brief text.

Card 2

Extended description for larger screens.

Brief text.

Card 3

Extended description for larger screens.

Brief text.

Card 4

Extended description for larger screens.

Brief text.

Responsive Hero Section

Welcome to Our Site

This is a longer description that provides more context for desktop users who have more screen real estate.

Short mobile description.

Print Utilities

Use .d-print-{value} to control visibility when printing.

Screen only: This content is hidden when printing (.d-print-none)

Print only: This appears only in print (.d-none .d-print-block)