Main content ah kal rawh Docs navigation ah kal rawh
in English

Breakpoints te a awm

Breakpoints hi Bootstrap-a device emaw viewport size hrang hranga i responsive layout awm dan tur tichiangtu, customizable widths a ni.

Concept bulpui ber berte

  • Breakpoints hi responsive design siamna atana building block a ni. Viewport emaw device size bik emawa i layout chu engtikah nge a inthlak theih ang tih control nan hmang rawh.

  • Media query hmangin i CSS chu breakpoint hmangin architect rawh. Media queries hi CSS feature a ni a, browser leh operating system parameter set atanga style hrang hrang conditionally apply theihna a ni. min-widthKan media zawhnaah kan hmang tam ber .

  • Mobile hmasa ber, responsive design hi a tum ber a ni. Bootstrap hian CSS hian layout pakhat chu breakpoint tenau ber a thawh theih nan styles bare minimum hman a tum a, chutah chuan style hrang hrangah layers hmangin device lian zawk tan chu design chu siamrem a tum a ni. Hei hian i CSS a ti tha a, rendering time a ti tha a, i tlawhtute tan experience tha tak a pe bawk.

Breakpoint awm thei te

Bootstrap hian default breakpoint paruk a keng tel a, a then chuan grid tiers tia sawi a ni bawk a , chu chu responsive taka siam nan a ni. Kan source Sass files i hman chuan heng breakpoint te hi i duh angin i siam thei ang.

Breakpoint a ni Class infix a ni Dimension hrang hrangte
X-Tlemte a ni Pakhatmah <576px a ni
Te sm ≥576px a ni
Hmanrua md ≥768px a ni
Hrawl lg ≥992px a ni
Extra lian tak a ni xl ≥1200px a ni
Extra extra lian tak a ni xxl ≥1400px a ni

Breakpoint tinte chu container zau zawng 12-a tam tak awmna container-te chu nuam taka chelh turin thlan a ni a, Breakpoint-te pawh hi device size leh viewport dimension hman tlanglawn subset pakhat aiawhtu a ni bawk—use case emaw device emaw zawng zawng chu a bik takin an target lo. Chu ai chuan, range-te hian eng device pawh nise, a din theihna tur lungphum nghet leh nghet tak a pe zawk a ni.

_variables.scssHeng breakpoint te hi Sass hmanga siam theih a ni—kan stylesheet -ah Sass map-ah i hmu ang .

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

Kan Sass map leh variable te siam danglam dan tur hriat belh leh entirnan Grid documentation a Sass section ah hian en la .

Media lama zawhna awm thei te

Bootstrap hi mobile atana siam hmasak a nih avangin media query tlemte hmangin kan layout leh interface te tan sensible breakpoint kan siam thin. Heng breakpoint te hi a tam zawk chu minimum viewport widths atanga siam a ni a, viewport a inthlak ang zelin elements te kan scale up theih phah a ni.

Min-a zau zawng

Bootstrap hian kan layout, grid system leh component hrang hrangte tan kan source Sass file-ah hian a hnuaia media query range—or breakpoint—te hi a hmang ber a ni.

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

Heng Sass mixins te hian kan compiled CSS ah hian kan Sass variables a value declare te hmangin an letling thin. Entir nan:

// 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-a zau zawng

Media query kan hmang fo thin a, chu chu kawng danga kal (screen size pek emaw a aia te emaw ):

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

Heng mixin te hian chu breakpoint declared te chu an la a, chuta .02pxtang chuan an paih a, kan max-widthvalue atan an hmang thin. Entir nan:

// 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
Engvangin nge .02px hi kan paih chhuah? Browser te hian tunah hian range context queries an support lo a, chuvangin fractional width nei prefix min-lehmax- viewport te limitation te (chu chu high-dpi device-a condition thenkhat hnuaiah a thleng thei, entirnan) value te chu precision sang zawk hmangin kan thawk chhuak thin.

Breakpoint pakhat chauh a awm

Breakpoint width tlem ber leh sang ber hmanga screen size segment pakhat target theihna tur media query leh mixin te pawh a awm bawk.

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

Entirnan a @include media-breakpoint-only(md) { ... }will result chu :

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

Breakpoint inkar ah

Chutiang bawkin media query te pawh hian breakpoint width tam tak a huam thei bawk:

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

Chu chuan a rah chhuah chu:

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