ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡ꯫

ꯃꯔꯨꯑꯣꯏꯕꯥ ꯋꯥꯈꯜꯂꯣꯅꯁꯤꯡ꯫

• ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯗꯤꯖꯥꯏꯅꯒꯤ ꯕꯤꯜꯗꯤꯡ ꯕ꯭ꯂꯣꯀꯁꯤꯡꯅꯤ꯫ ꯑꯀꯛꯅꯕꯥ ꯚꯤꯎꯄꯣꯔꯠ ꯅꯠꯠꯔꯒꯥ ꯗꯤꯚꯥꯏꯁ ꯁꯥꯏꯖ ꯑꯃꯗꯥ ꯅꯍꯥꯛꯀꯤ ꯂꯦꯑꯥꯎꯠ ꯑꯗꯨ ꯀꯗꯥꯏꯗꯥ ꯑꯦꯗꯞꯇꯦꯟꯇ ꯇꯧꯕꯥ ꯌꯥꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯀꯟꯠꯔꯣꯜ ꯇꯧꯅꯕꯥ ꯃꯈꯣꯌꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫

• ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯀꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯅꯍꯥꯛꯀꯤ CSS ꯑꯗꯨ ꯑꯥꯔꯀꯤꯇꯦꯀꯆꯔ ꯇꯧꯅꯕꯥ ꯃꯤꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯃꯦꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯁꯤꯡ ꯑꯁꯤ CSSꯒꯤ ꯐꯤꯆꯔ ꯑꯃꯅꯤ ꯃꯁꯤꯅꯥ ꯅꯍꯥꯀꯄꯨ ꯕ꯭ꯔꯥꯎꯖꯔ ꯑꯃꯁꯨꯡ ꯑꯣꯄꯔꯦꯇꯤꯡ ꯁꯤꯁ꯭ꯇꯦꯝ ꯄꯦꯔꯥꯃꯤꯇꯔꯁꯤꯡꯒꯤ ꯁꯦꯠ ꯑꯃꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯀꯟꯗꯤꯁꯅꯦꯜ ꯑꯣꯏꯅꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯕꯥ ꯌꯥꯍꯜꯂꯤ꯫ min-widthꯑꯩꯈꯣꯌꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯃꯤꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯁꯤꯡꯗꯥ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯌꯥꯝꯅꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫

• ꯃꯣꯕꯥꯏꯜ ꯑꯍꯥꯅꯕꯥ, ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯗꯤꯖꯥꯏꯟ ꯑꯁꯤ ꯄꯥꯟꯗꯝꯅꯤ꯫ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯅꯥ ꯂꯦꯑꯥꯎꯠ ꯑꯃꯥ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯑꯄꯤꯀꯄꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯇꯥ ꯊꯕꯛ ꯇꯧꯅꯕꯥ ꯕꯦꯔꯦ ꯃꯤꯅꯤꯃꯝ ꯑꯣꯏꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯅꯕꯥ ꯄꯥꯟꯗꯝ ꯊꯝꯂꯤ, ꯑꯃꯁꯨꯡ ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯑꯆꯧꯕꯥ ꯗꯤꯚꯥꯏꯁꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯗꯤꯖꯥꯏꯟ ꯑꯗꯨ ꯑꯦꯗꯖꯁ꯭ꯠ ꯇꯧꯅꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯗꯥ ꯂꯦꯌꯔꯁꯤꯡ ꯊꯝꯅꯕꯥ ꯄꯥꯟꯗꯝ ꯊꯝꯂꯤ꯫ ꯃꯁꯤꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯕꯨ ꯑꯣꯞꯇꯤꯃꯥꯏꯖ ꯇꯧꯏ, ꯔꯦꯟꯗꯔ ꯇꯧꯕꯒꯤ ꯃꯇꯝ ꯐꯒꯠꯍꯜꯂꯤ, ꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯀꯤ ꯚꯤꯖꯤꯇꯔꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯑꯆꯧꯕꯥ ꯑꯦꯛꯁꯄꯔꯤꯌꯦꯟꯁ ꯑꯃꯥ ꯄꯤꯔꯤ꯫

ꯐꯪꯂꯤꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯅꯥ ꯁꯦꯃꯒꯠꯅꯕꯒꯤꯗꯃꯛ ꯗꯤꯐꯣꯜꯇ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯶ ꯌꯥꯑꯣꯔꯤ, ꯃꯁꯤ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯇꯃꯗꯥ ꯒ꯭ꯔꯤꯗ ꯇꯤꯌꯔ ꯍꯥꯌꯅꯥ ꯀꯧꯏ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯁꯣꯔꯁ ꯁꯥꯁ ꯐꯥꯏꯂꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯔꯕꯗꯤ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯈꯨꯗꯤꯡꯃꯛ ꯑꯁꯤ ꯅꯨꯡꯉꯥꯏꯅꯥ ꯀꯟꯇꯦꯅꯔꯁꯤꯡ ꯊꯝꯅꯕꯥ ꯈꯅꯈꯤ ꯃꯈꯣꯌꯒꯤ ꯄꯥꯛ ꯆꯥꯎꯕꯥ ꯑꯁꯤ ꯱꯲ꯒꯤ ꯃꯜꯇꯤꯄꯜ ꯑꯣꯏꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯀꯃꯟ ꯗꯤꯚꯥꯏꯁ ꯁꯥꯏꯖꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯚꯤꯎꯄꯣꯔꯠ ꯗꯥꯏꯃꯦꯟꯁꯅꯁꯤꯡꯒꯤ ꯁꯕꯁꯦꯠ ꯑꯃꯁꯨ ꯔꯤꯞꯔꯖꯦꯟꯇꯦꯇꯤꯕ ꯑꯣꯏ-ꯃꯈꯣꯌꯅꯥ ꯌꯨꯖꯔ ꯀꯦꯁ ꯅꯠꯠꯔꯒꯥ ꯗꯤꯚꯥꯏꯁ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯑꯀꯛꯅꯅꯥ ꯇꯥꯔꯒꯦꯠ ꯇꯧꯗꯦ꯫ ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ, ꯔꯦꯟꯖꯁꯤꯡ ꯑꯁꯤꯅꯥ ꯆꯥꯎꯔꯥꯛꯅꯥ ꯗꯤꯚꯥꯏꯁ ꯑꯃꯍꯦꯛꯇꯒꯤꯗꯃꯛ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯆꯦꯠꯄꯥ ꯑꯃꯁꯨꯡ ꯂꯦꯞꯄꯥ ꯂꯩꯇꯕꯥ ꯌꯨꯝꯐꯝ ꯑꯃꯥ ꯄꯤꯔꯤ꯫

ꯍꯥꯌꯔꯤꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯁꯥꯁꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯀꯁ꯭ꯇꯃꯁ ꯑꯣꯏꯕꯥ ꯌꯥꯏ—ꯃꯈꯣꯌꯁꯤꯡ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯒꯤ _variables.scssꯁ꯭ꯇꯥꯏꯂꯁꯤꯠꯇꯥ ꯁꯥꯁ ꯃꯦꯞ ꯑꯃꯗꯥ ꯅꯍꯥꯛꯅꯥ ꯐꯪꯒꯅꯤ꯫

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

ꯑꯩꯈꯣꯌꯒꯤ ꯁꯥꯁ ꯃꯦꯄꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯒꯗꯒꯦ ꯍꯥꯌꯕꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯑꯍꯦꯅꯕꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯟ ꯑꯃꯁꯨꯡ ꯈꯨꯗꯃꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ, ꯆꯥꯅꯕꯤꯗꯨꯅꯥ ꯒ꯭ꯔꯤꯗ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯦꯁꯅꯒꯤ ꯁꯥꯁ ꯁꯦꯛꯁꯟ ꯑꯗꯨ ꯌꯦꯡꯕꯤꯌꯨ .

ꯃꯤꯗꯤꯌꯥꯒꯤ ꯋꯥꯍꯪꯁꯤꯡ꯫

Since Bootstrap is developed to be mobile first, we use a handful of media queries to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.

Min-width

Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.

// Source mixins

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

These Sass mixins translate in our compiled CSS using the values declared in our Sass variables. For example:

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

Max-width

We occasionally use media queries that go in the other direction (the given screen size or smaller):

// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

These mixins take those declared breakpoints, subtract .02px from them, and use them as our max-width values. For example:

// X-Small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width

Single breakpoint

There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }

For example the @include media-breakpoint-only(md) { ... } will result in :

@media (min-width: 768px) and (max-width: 991.98px) { ... }

Between breakpoints

Similarly, media queries may span multiple breakpoint widths:

@include media-breakpoint-between(md, xl) { ... }

Which results in:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }