Skip to di men tin dɛn we de insay Skip to doks nevigishɔn
in English

Brekpoint dɛn

Brekpoint na width dɛn we yu kin kɔstɔmayz we de sho aw yu rispɔnsiv layout de biev akɔdin to divays ɔ viupɔt saiz dɛn na Bootstrap.

Na dis pej

Di men kɔnsɛpt dɛn

  • Brekpoint na di bildin blɔk dɛn fɔ rispɔnsiv dizayn. Yuz dɛn fɔ kɔntrol ustɛm yu layout kin adap na wan patikyula viupɔt ɔ divays saiz.

  • Yuz midia kwɛstyɔn dɛn fɔ akitɔk yu CSS bay brekpɔynt. Midia kwɛstyɔn dɛn na wan ficha fɔ CSS we de alaw yu fɔ kɔndishɔnal aplay stayl dɛn bays pan wan sɛt fɔ brawza ɛn ɔpreshɔn sistɛm paramita dɛn. Wi kin yuz mɔ min-widthna wi midia kwɛstyɔn dɛn.

  • Mobayl fɔs, rispɔnsiv dizayn na di gol. Bootstrap in CSS aim fɔ yuz di bare minimum ɔf stayl dɛn fɔ mek wan layout wok na di smɔl brekpoint, ɛn afta dat layers pan stayl dɛn fɔ ajɔst da dizayn de fɔ big divays dɛn. Dis de mek yu CSS bɛtɛ, i de mek di tɛm we yu de rɛnd bɛtɛ, ɛn i de mek di wan dɛn we de kam fɛn yu gɛt fayn ɛkspiriɛns.

Di brekpoint dɛn we de

Bootstrap inklud siks difɔlt brekpoint, sɔm tɛm dɛn kin kɔl grid taya , fɔ bil rispɔnsiv wan. Dɛn brekpɔynt ya kin kɔstɔmayt if yu de yuz wi sɔs Sass fayl dɛn.

Brekpɔynt Klas infiks Dimɛnshɔn dɛn
X-Smɔl Nɔn <576px na di pikchɔ
Smɔl sm ≥576px fɔ di pikchɔ
Lukin-grɔn uman md ≥768px fɔ di pikchɔ
Big lg ≥992px fɔ di pikchɔ
Ekstra big wan xl ≥1200px fɔ di pikchɔ
Ekstra ekstra big big wan xxl ≥1400px fɔ di pikchɔ

Dɛn bin pik ɛni brekpɔynt fɔ kɔmfyut fɔ ol kɔntena dɛn we dɛn wit na bɔku bɔku 12. Brekpɔynt dɛn bak de ripresent wan sɔbsɛt fɔ kɔmɔn divays saiz ɛn viupɔt dimɛnshɔn dɛn—dɛn nɔ de spɛshal wan tɔch ɛvri yus kes ɔ divays. Bifo dat, di rɛnj dɛn de gi wan strɔng ɛn kɔnsistɛns fawndeshɔn fɔ bil pan fɔ klos to ɛni divays.

Dɛn brekpoint ya kin kɔstɔmayz bay Sass—yu go fɛn dɛn na wan Sass map na wi _variables.scssstaylshit.

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

Fɔ no mɔ ɛn ɛgzampul dɛn bɔt aw fɔ chenj wi Sass map ɛn vɛriɔbul dɛn, duya luk na di Sass sɛkshɔn na di Grid dɔkyumentri .

Midia kwɛstyɔn dɛn

Bikɔs dɛn dɔn mek Bootstrap fɔ bi mobayl fɔs, wi de yuz wan anful midia kwɛstyɔn dɛn fɔ mek sɛnsful brekpɔynt dɛn fɔ wi layout ɛn intafays dɛn. Dɛn brekpɔynt ya mɔs bies pan di minimum viupɔt wit ɛn dɛn de alaw wi fɔ skel ɔp ɛlimɛnt dɛn as di viupɔt de chenj.

Min-width fɔ di wan dɛn we de

Bootstrap de yuz di fɔs midia kwɛstyɔn rɛnj dɛn—ɔ brekpɔynt dɛn—insay wi sɔs Sass fayl dɛn fɔ wi layout, grid sistem, ɛn kɔmpɔnɛnt dɛn.

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

Dɛn Sass mixins ya de translet insay wi kɔmpil CSS yuz di valyu dɛn we dɛn deklare na wi Sass vɛriɔbul dɛn. Fɔ ɛgzampul:

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

Maks-width fɔ di wan dɛn we de

Wan wan tɛm wi kin yuz midia kwɛstyɔn dɛn we kin go na di ɔda say (di skrin saiz we dɛn gi ɔ di smɔl wan ):

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

Dɛn miksin ya kin tek dɛn brekpɔynt dɛn we dɛn dɔn deklare, pul .02pxfrɔm dɛn, ɛn yuz dɛn as wi max-widthvalyu dɛn. Fɔ ɛgzampul:

// `xs` returns only a ruleset and no media query
// ... { ... }

// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }
Wetin mek fɔ pul .02px? Brawza dɛn nɔ de sɔpɔt rɛnj kɔntɛks kwɛstyɔn dɛn naw , so wi de wok rawnd di limiteshɔn dɛn fɔ min-ɛn max-prɛfiks ɛn viupɔt dɛn wit frakshɔn wid (we kin apin ɔnda sɔm kɔndishɔn dɛn na ay-dpi divays dɛn, fɔ ɛgzampul) bay we wi de yuz valyu dɛn wit ay prɛsishɔn.

Wan wan brekpoint

I gɛt bak midia kwɛstyɔn ɛn miksin fɔ tɔch wan singl sɛgmɛnt pan skrin saiz dɛn we de yuz di minim ɛn maksimal brekpɔynt wit.

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

Fɔ ɛgzampul di @include media-breakpoint-only(md) { ... }go rilizɔt in : .

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

Bitwin di say dɛn we dɛn kin brok

Semweso, midia kwɛstyɔn dɛn kin span bɔku bɔku brekpɔynt wit dɛn:

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

We kin mek:

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