Responsive

Available breakpoints

Define the minimum and maximum dimensions at which your layout will change, adapting to different screen sizes, for use in media queries.

Basic usage

To access or change the breakpoints in the scss use $grid-breakpoints variable.

Example when the screen is narrower than md breakpoint.

@include media-breakpoint-down(map-get($grid-breakpoints, 'md')) { // styles here }

Example when the screen is wider than lg breakpoint.

@include media-breakpoint-up(map-get($grid-breakpoints, 'lg')) { // styles here }