ꯑꯣꯚꯔꯚꯤꯌꯨ ꯇꯧꯕꯥ꯫

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

ꯀꯟꯇꯦꯅꯔꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫

ꯀꯟꯇꯦꯅꯔꯁꯤꯡ ꯑꯁꯤ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯕꯦꯁꯤꯛ ꯑꯣꯏꯕꯥ ꯂꯦꯑꯥꯎꯠ ꯑꯦꯂꯤꯃꯦꯟꯇꯅꯤ ꯑꯃꯁꯨꯡ ꯑꯩꯈꯣꯌꯒꯤ ꯗꯤꯐꯣꯜꯇ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯁꯤꯖꯤꯟꯅꯕꯗꯥ ꯃꯊꯧ ꯇꯥꯏ . ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ, ꯐꯤꯛꯁ-ꯋꯥꯏꯗ ꯀꯟꯇꯦꯅꯔ ꯑꯃꯗꯒꯤ ( max-widthꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯃꯁꯤꯒꯤ ꯑꯍꯣꯡꯕꯥ ꯂꯥꯀꯄꯥ ꯍꯥꯌꯕꯁꯤꯅꯤ) ꯅꯠꯠꯔꯒꯥ ꯐ꯭ꯂꯨꯏꯗ-ꯋꯥꯏꯗ ( 100%ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯄꯥꯛ-ꯆꯥꯎꯏ ꯍꯥꯌꯕꯅꯤ) ꯑꯃꯗꯒꯤ ꯈꯜꯂꯨ꯫

ꯀꯟꯇꯦꯅꯔꯁꯤꯡ ꯑꯁꯤ ꯅꯦꯁ꯭ꯠ ꯇꯧꯕꯥ ꯌꯥꯏ ꯑꯗꯨꯕꯨ ꯑꯌꯥꯝꯕꯥ ꯂꯦꯑꯥꯎꯇꯁꯤꯡꯗꯥ ꯅꯦꯁ꯭ꯠ ꯇꯧꯕꯥ ꯀꯟꯇꯦꯅꯔ ꯑꯃꯒꯤ ꯃꯊꯧ ꯇꯥꯗꯦ꯫

<div class="container">
  <!-- Content here -->
</div>

.container-fluidꯚꯤꯎꯄꯣꯔꯇꯀꯤ ꯄꯥꯛ ꯆꯥꯎꯕꯥ ꯄꯨꯝꯅꯃꯛ ꯁ꯭ꯄꯦꯟ ꯇꯧꯕꯥ, ꯃꯄꯨꯡ ꯐꯥꯕꯥ ꯄꯥꯀꯆꯥꯎꯕꯥ ꯀꯟꯇꯦꯅꯔ ꯑꯃꯒꯤꯗꯃꯛ ꯁꯤꯖꯤꯟꯅꯧ꯫

<div class="container-fluid">
  ...
</div>

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

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

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

// Extra small devices (portrait phones, less than 576px)
// No media query 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) { ... }

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

ꯑꯩꯈꯣꯌꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯁꯣꯔꯁ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯕꯨ ꯁꯥꯁꯇꯥ ꯏꯔꯀꯄꯗꯒꯤ, ꯑꯩꯈꯣꯌꯒꯤ ꯃꯤꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤ ꯄꯨꯝꯅꯃꯛ ꯁꯥꯁ ꯃꯤꯛꯁꯤꯅꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯐꯪꯏ:

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

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

ꯑꯩꯈꯣꯌꯅꯥ ꯃꯇꯝ ꯃꯇꯃꯒꯤ ꯑꯣꯏꯅꯥ ꯑꯇꯣꯞꯄꯥ ꯃꯥꯏꯀꯩꯗꯥ ꯆꯠꯂꯤꯕꯥ ꯃꯤꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯩ (ꯑꯄꯤꯕꯥ ꯁ꯭ꯛꯔꯤꯟ ꯁꯥꯏꯖ ꯅꯠꯔꯒꯥ ꯃꯁꯤꯗꯒꯤ ꯍꯦꯅꯕꯥ ):

// Extra 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) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

ꯑꯃꯨꯛ ꯍꯟꯅꯥ, ꯍꯥꯌꯔꯤꯕꯥ ꯃꯤꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯁꯤꯡ ꯑꯁꯤ ꯁꯥꯁ ꯃꯤꯛꯁꯤꯅꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯁꯨ ꯐꯪꯒꯅꯤ:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }

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

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

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

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

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

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

ꯍꯥꯌꯔꯤꯕꯥ ꯃꯤꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯁꯤꯡ ꯑꯁꯤ ꯁꯥꯁ ꯃꯤꯛꯁꯤꯅꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯁꯨ ꯐꯪꯒꯅꯤ:

@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) { ... }

ꯃꯇꯧ ꯑꯁꯨꯝꯅꯥ, ꯃꯦꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯁꯤꯡ ꯑꯁꯤꯅꯥ ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯋꯥꯏꯗꯁꯤꯡ ꯁ꯭ꯄꯦꯟ ꯇꯧꯕꯥ ꯌꯥꯏ:

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

ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯁ꯭ꯛꯔꯤꯟ ꯁꯥꯏꯖ ꯔꯦꯟꯖ ꯑꯃꯗꯥ ꯇꯥꯔꯒꯦꯠ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯁꯥꯁ ꯃꯤꯛꯁꯤꯟ ꯑꯁꯤ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯁꯤꯡꯁꯤ ꯑꯣꯏꯒꯅꯤ:

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

ꯖꯦꯗ-ꯏꯟꯗꯦꯛꯁ ꯇꯧꯕꯥ꯫

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

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

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

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

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