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

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

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

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

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯑꯁꯤ ꯇꯣꯉꯥꯟ ꯇꯣꯉꯥꯅꯕꯥ ꯀꯟꯇꯦꯅꯔ ꯑꯍꯨꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯥꯀꯏ:

• .containermax-width, ꯃꯁꯤꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯑꯦ ꯁꯦꯠ ꯇꯧꯏ꯫
• .container-fluid, ꯃꯁꯤ width: 100%ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯂꯩ꯫
• .container-{breakpoint}, ꯃꯁꯤ width: 100%ꯑꯀꯛꯅꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯐꯥꯑꯣꯕꯥ ꯑꯣꯏꯒꯅꯤ꯫

ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯇꯦꯕꯜ ꯑꯁꯤꯅꯥ ꯀꯟꯇꯦꯅꯔ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯑꯔꯤꯕꯥ ꯑꯗꯨꯒꯥ ꯑꯃꯁꯨꯡ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯃꯔꯛꯇꯥ ꯀꯔꯝꯅꯥ max-widthꯆꯥꯡꯗꯝꯅꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯎꯠꯂꯤ꯫.container.container-fluid

ꯃꯈꯣꯌꯕꯨ ꯊꯕꯛ ꯑꯣꯏꯅꯥ ꯎꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯩꯈꯣꯌꯒꯤ ꯒ꯭ꯔꯤꯗꯀꯤ ꯈꯨꯗꯝ ꯑꯁꯤꯗꯥ ꯆꯥꯡꯗꯝꯅꯕꯥ .

ꯑꯣꯜ-ꯏꯟ-ꯋꯥꯟ ꯑꯣꯏꯕꯥ꯫

ꯑꯩꯈꯣꯌꯒꯤ ꯗꯤꯐꯣꯜꯇ .containerꯀ꯭ꯂꯥꯁ ꯑꯁꯤ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ, ꯐꯤꯛꯁ-ꯋꯥꯏꯗ ꯀꯟꯇꯦꯅꯔ ꯑꯃꯅꯤ, ꯃꯁꯤꯒꯤ ꯑꯔꯊꯗꯤ max-widthꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯃꯁꯤꯒꯤ ꯑꯍꯣꯡꯕꯁꯤꯡ ꯑꯁꯤꯅꯤ꯫

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

ꯃꯍꯤ

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

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

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

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯀꯟꯇꯦꯅꯔꯁꯤꯡ ꯑꯁꯤ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ v4.4ꯗꯥ ꯑꯅꯧꯕꯥ ꯑꯃꯅꯤ꯫ ꯃꯈꯣꯌꯅꯥ ꯑꯗꯣꯃꯗꯥ ꯑꯀꯛꯅꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯑꯗꯨ ꯌꯧꯗ꯭ꯔꯤꯉꯩꯗꯥ ꯱꯰꯰% ꯄꯥꯀꯄꯥ ꯀ꯭ꯂꯥꯁ ꯑꯃꯥ ꯂꯦꯄꯊꯣꯀꯄꯥ ꯌꯥꯍꯜꯂꯤ, ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯑꯩꯈꯣꯌꯅꯥ max-widthꯑꯋꯥꯡꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯈꯨꯗꯤꯡꯃꯛꯀꯤꯗꯃꯛ s ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯑꯗꯨ .container-smꯌꯧꯔꯛꯠꯔꯤꯐꯥꯑꯣꯕꯥ ꯍꯧꯅꯕꯥ ꯱꯰꯰% ꯄꯥꯛ-ꯆꯥꯎꯏ , ꯃꯐꯝ ꯑꯗꯨꯗꯥ ꯃꯁꯤꯅꯥ , , ꯑꯃꯁꯨꯡ .smmdlgxl

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

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

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

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

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

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

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

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

// 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;
  }
}

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

// 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) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width

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

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

// 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-ꯏꯟꯗꯦꯛꯁ ꯁ꯭ꯀꯦꯜ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯩ ꯃꯗꯨꯗꯤ ꯃꯁꯤꯅꯥ ꯅꯦꯚꯤꯒꯦꯁꯟ, ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯄꯣꯄꯣꯚꯔꯁꯤꯡ, ꯃꯣꯗꯦꯂꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯑꯇꯩ ꯀꯌꯥ ꯃꯑꯣꯡ ꯆꯨꯝꯅꯥ ꯂꯦꯌꯔ ꯇꯧꯅꯕꯥ ꯗꯤꯖꯥꯏꯟ ꯇꯧꯈ꯭ꯔꯦ꯫

These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used 100+ or 500+.

We don’t encourage customization of these individual values; should you change one, you likely need to change them all.

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

To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit z-index values of 1, 2, and 3 for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher z-index value to show their border over the sibling elements.