We de muf go na v5

Trak ɛn rivyu chenj dɛn to di Bootstrap sɔs fayl dɛn, dɔkyumentri, ɛn kɔmpɔnɛnt dɛn fɔ ɛp yu fɔ muf frɔm v4 to v5.

Na dis pej

v5.2.0 fɔ di wan dɛn we de

Dizayn we dɔn rifresh

Bootstrap v5.2.0 ficha wan subtil dizayn ɔpdet fɔ wan anful kɔmpɔnɛnt ɛn prɔpati dɛn akɔdin to di prɔjek, mɔs notably tru rifin border-radiusvalyu dɛn pan bɔtin ɛn fɔm kɔntrol dɛn . Wi dɔkyumentri dɛn dɔn ɔpdet bak wit nyu hom pej, simpul dɔkyumɛnt layout we nɔ de kɔlaps sɛkshɔn dɛn na di saydba igen, ɛn mɔ impɔtant ɛgzampul dɛn fɔ Bootstrap Aykɔn dɛn .

Mɔ CSS vɛriɔbul dɛn

Wi dɔn ɔpdet ɔl wi kɔmpɔnɛnt dɛn fɔ yuz CSS vɛriɔbul dɛn. Wail Sass stil de ɔndapin ɔltin, dɛn dɔn ɔpdet ɛni kɔmpɔnɛnt fɔ inklud CSS vɛriɔbul dɛn na di kɔmpɔnɛnt bays klas dɛn (ɛgz., .btn), we de alaw fɔ mɔ rial-taym kɔstɔmayshɔn fɔ Bootstrap. Insay di rilis dɛn we de kam, wi go kɔntinyu fɔ mek wi yuz CSS vɛriɔbul dɛn mɔ ɛn mɔ insay wi layout, fɔm dɛn, ɛp pipul dɛn, ɛn yutiliti dɛn. Rid mɔ bɔt CSS vɛriɔbul dɛn na ɛni kɔmpɔnɛnt na dɛn rispektiv dɔkyumentri pej dɛn.

Wi CSS variebul yus go bi somtin inkomplit te Bootstrap 6. Wail wi go laik fo ful impliment dis kross di bod, dem do run di risk fo mek brek chenj. Fɔ ɛgzampul, sɛtin $alert-border-width: var(--bs-border-width)na wi sɔs kɔd de brok pɔtnɛshɛl Sass na yu yon kɔd if yu bin de du $alert-border-width * 2fɔ sɔm rizin.

As a so, ɛnisay we i pɔsibul, wi go kɔntinyu fɔ push to mɔ CSS vɛriɔbul dɛn, bɔt duya no se wi implimɛnt kin smɔl smɔl na v5.

Nyu`_maps.scss`

Bootstrap v5.2.0 introdyus wan nyu Sass fayl wit _maps.scss. I pul sɔm Sass map dɛn frɔm _variables.scssfɔ fiks wan prɔblɛm usay dɛn nɔ bin aplay ɔpdet to wan ɔrijinal map to sɛkɔndari map dɛn we de ɛkstɛnd dɛn. Fɔ ɛgzampul, ɔpdet dɛn to $theme-colorsnɔ bin de aplay to ɔda tim map dɛn we bin de abop pan $theme-colors, we bin de brok di ki kɔstɔmayshɔn wokflɔ dɛn. In shot, Sass gɛt limiteshɔn usay wans dɛn dɔn yuz difɔlt vɛriɔbul ɔ map , dɛn nɔ go ebul fɔ ɔpdet am. Na di sem kayn shɔtkɔm de wit CSS vɛriɔbul dɛn we dɛn yuz dɛn fɔ kɔmpoz ɔda CSS vɛriɔbul dɛn.

Dis na di rizin we mek vayriɔbul kɔstɔmayshɔn dɛn na Bootstrap gɛt fɔ kam afta @import "functions", bɔt bifo @import "variables"ɛn di ɔda pat pan wi import stak. Na di sem tin kin apin to Sass map dɛn—yu fɔ ɔvalayz di difɔlt dɛn bifo dɛn yus. Dɛn dɔn muf dɛn map dɛn ya go na di nyu wan _maps.scss:

$theme-colors-rgb
$utilities-colors
$utilities-text
$utilities-text-colors
$utilities-bg
$utilities-bg-colors
$negative-spacers
$gutters

Yu kɔstɔm Bootstrap CSS bil dɛn fɔ naw luk sɔntin lɛk dis wit wan sɛpret map import.

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

Nyu yutiliti dɛn

Ekspand font-weightyutiliti fɔ inklud .fw-semiboldfɔ sɛmibold font dɛn.
Ɛkspɛn border-radiusyutiliti dɛn fɔ inklud tu nyu saiz dɛn, .rounded-4ɛn .rounded-5, fɔ mɔ opshɔn dɛn.

Ɔda chenj dɛn we dɛn mek

Introdyus nyu $enable-container-classesopshɔn. — Naw we yu de opt insay di ɛkspirimɛnt CSS Grid layout, .container-*klas dɛn go stil kɔmpilayt, pas nɔmɔ dɛn sɛt dis opshɔn to false. Kɔntena dɛnsɛf naw de kip dɛn gɔta valyu.
Offcanvas komponent naw gɛt rispɔnsiv vɛryushɔn dɛn . Di ɔrijinal .offcanvasklas nɔ chenj—i de ayd kɔntinyu akɔdin to ɔl di viupɔt dɛn. Fɔ mek i go ebul fɔ ansa, chenj da .offcanvasklas de to ɛni .offcanvas-{sm|md|lg|xl|xxl}klas.
Tik tebul divayda dɛn naw de opt-in. — Wi dɔn pul di bɔda we tik ɛn we at fɔ ɔvalayz bitwin tebul grup dɛn ɛn muf am to wan opshɔnal klas we yu kin aplay, .table-group-divider. Si di tebul doks fɔ wan ɛgzampul.
Scrollspy dɔn rayt bak fɔ yuz di Intersection Observer API , we min se yu nɔ nid rilitiv mama ɛn papa wrap igen, deprecatesoffsetconfig, ɛn ɔda tin dɛn. Luk fɔ yu Scrollspy implimɛnt dɛn fɔ bi mɔ akchual ɛn kɔnsistɛns insay dɛn nav aylaytin.
Popovers ɛn tultip dɛn naw de yuz CSS vɛriɔbul dɛn. Sɔm CSS vɛriɔbul dɛn dɔn ɔpdet frɔm dɛn Sass kɔmpin dɛn fɔ ridyus di nɔmba fɔ di vɛriɔbul dɛn. As a rizulyt, tri vεriεbul dεm dεn dεprεkt insay dis rilis: $popover-arrow-color, $popover-arrow-outer-color, εn $tooltip-arrow-color.
Dɛn ad nyu .text-bg-{color}pipul dɛn we de ɛp dɛn. Bifo yu sɛt wan wan .text-*ɛn .bg-*yutiliti dɛn, yu kin yuz di .text-bg-*ɛlda dɛn naw fɔ sɛt wan background-colorwit kɔntrast fɔgrɔn color.
Ad .form-check-reversemodifya fɔ flip di ɔda fɔ di lɛbl dɛn ɛn di chɛkbɔks/redio dɛn we gɛt fɔ du wit am.
Ad strɛp kɔlɔm dɛn sɔpɔt to tebul dɛn via di nyu .table-striped-columnsklas.

Fɔ wan kɔmplit list fɔ chenj dɛn, si di v5.2.0 prɔjek na GitHub .

v5.1.0 fɔ di wan dɛn we de

Ad ɛkspirimɛnt sɔpɔt fɔ CSS Grid layout . — Dis na wok we de go bifo, ɛn i nɔ rɛdi yet fɔ yuz fɔ prodakshɔn, bɔt yu kin opt insay di nyu ficha via Sass. Fɔ mek yu ebul fɔ wok, disable di difɔlt grid, bay we yu sɛt $enable-grid-classes: falseɛn ɛnabul di CSS Grid bay we yu sɛt $enable-cssgrid: true.
Updated navbars fɔ sɔpɔt ɔfkanvas. — Ad ɔfkanvas drɔwa dɛn na ɛni navbar wit di rispɔnsiv .navbar-expand-*klas dɛn ɛn sɔm ɔfkanvas mak-ap.
Dɛn ad nyu pleshɔlda kɔmpɔnɛnt . — Wi nyu kɔmpɔnɛnt, we na we fɔ gi tɛmporari blɔk dɛn insay di ples fɔ rial tin dɛn fɔ ɛp fɔ sho se sɔntin stil de lod na yu sayt ɔ ap.
Kɔlaps plɔgin naw de sɔpɔt ɔrizɔntal kɔlapshɔn . — Ad .collapse-horizontalto yu .collapsefɔ kɔlaps di widthinstead fɔ di height. Nɔ peint di brɔwza bak bay we yu sɛt wan min-heightɔ height.
Add nyu stak ɛn vertikal rul ɛlda dɛn. — Kwik kwik wan aplay bɔku fleksbɔks prɔpati dɛn fɔ mek kɔstɔm layout dɛn kwik kwik wan wit stak dɛn . Pik frɔm ɔrizɔntal ( .hstack) ɛn vertikal ( .vstack) stak dɛn. Ad vertikal divayda dɛn we fiba di <hr>ɛlimɛnt dɛn wit di nyu .vrɛlda dɛn .
Dɛn ad nyu glob ɔl :rootCSS vɛriɔbul dɛn. — Ad sɔm nyu CSS vɛriɔbul dɛn to di :rootlɛvɛl fɔ kɔntrol <body>stayl dɛn. Mɔ de na di wok dɛn, inklud akɔdin to wi yutiliti ɛn kɔmpɔnɛnt dɛn, bɔt fɔ naw rid ɔp CSS vɛriɔbul dɛn na di Kastamayz sɛkshɔn .
Ovahol kala ɛn bakgrɔn yutiliti fɔ yuz CSS vɛriɔbul dɛn, ɛn ad nyu tɛks opasiti ɛn bakgrɔn opasiti yutiliti dɛn. — .text-* ɛn .bg-*yutiliti dɛn dɔn bil naw wit CSS vɛriɔbul ɛn rgba()kɔlɔ valyu dɛn, we de alaw yu fɔ izi fɔ kɔstɔmayz ɛni yutiliti wit nyu opasiti yutiliti dɛn.
Ad nyu snipet ɛgzampul dɛn bays fɔ sho aw fɔ kɔstɔmayz wi kɔmpɔnɛnt dɛn. — Pul rɛdi fɔ yuz kɔstɔmayt kɔmpɔnɛnt dɛn ɛn ɔda kɔmɔn dizayn patɛn dɛn wit wi nyu Snipɛt ɛgzampul dɛn . Inklud futmɛnt dɛn , drɔpdɔwn dɛn , list grup dɛn , ɛn modal dɛn .
Rimov di pozishɔn stayl dɛn we dɛn nɔ yuz frɔm popovers ɛn tultips as dɛn wan ya na Popper nɔmɔ de handle am. $tooltip-margindɔn deprecated ɛn sɛt to nullin di prɔses.

Yu want fɔ no mɔ? Rid di v5.1.0 blɔk post.

Hey dey! Chenj dɛn to wi fɔs big rilis fɔ Bootstrap 5, v5.0.0, de dɔŋ ya. Dɛn nɔ de sho di ɔda chenj dɛn we dɛn dɔn sho ɔp.

Dipɛnsin dɛn

Dɛn dɔn drɔp jQuery.
Dɛn dɔn ɔpgrɛd am frɔm Popper v1.x to Popper v2.x.
Riples Libsass wit Dart Sass as wi Sass kɔmpayla we dɛn gi Libsass bin deprecated.
Migrated frɔm Jekyll to Hugo fɔ bil wi dɔkyumentri

Brawza sɔpɔt

Dɛn dɔn drɔp Intanɛt Ɛksplɔrɔ 10 ɛn 11
Drɔp Maykrosoft Edj < 16 (Lɛgasi Edj) .
Dɛn dɔn drɔp Fayafaks < 60
Safari we dɛn dɔn drɔp < 12
Di iOS Safari we dɛn dɔn drɔp < 12
Krom we dɛn dɔn drɔp < 60

Di dɔkyumɛnt dɛn kin chenj

Ridizayn di hom pej, doks layout, ɛn fut.
Dɛn dɔn ad nyu Pasɛl gayd .
Ad nyu Customize sɛkshɔn , we de riples v4 in Theming pej , wit nyu ditel dɛn bɔt Sass, glob ɔl kɔnfigyushɔn opshɔn dɛn, kɔlɔ skim dɛn, CSS vɛriɔbul dɛn, ɛn ɔda tin dɛn.
Riɔganayz ɔl di fɔm dɔkyumentri dɛn insay nyu Fɔm dɛn sɛkshɔn , brok di kɔntinyu insay pej dɛn we gɛt mɔ fɔs.
Semweso, dɛn dɔn ɔpdet di Layout sɛkshɔn , fɔ mek yu ebul fɔ flesh di tin dɛn we de insay di grid klia wan.
Rinem “Navs” kɔmpɔnɛnt pej to “Navs & Tabs”.
Dɛn chenj di nem “Checks” pej to “Checks & radios”.
Ridisayn di navbar ɛn ad wan nyu sabnav fɔ mek i izi fɔ go rawnd wi sayt dɛn ɛn doks vɛshɔn dɛn.
Dɛn ad nyu kibɔd sɔtkat fɔ di say we dɛn de fɛn: Ctrl + /.

Sass we bin de

Wi dɔn ditch di difɔlt Sass map mɛj fɔ mek am izi fɔ pul ridandant valyu dɛn. Kip in maynd yu naw fɔ difayn ɔl di valyu dɛn na di Sass map dɛn lɛk $theme-colors. Chek aw fɔ dil wit Sass map dɛn .
Brek we de brokRinem color-yiq()funkshɔn ɛn rilayt vɛriɔbul dɛn to color-contrast()as i nɔ rili gɛt fɔ du wit YIQ kɔlɔ spɛs igen. Si di #30168.
- $yiq-contrasted-thresholddɛn chenj in nem to $min-contrast-ratio.
- $yiq-text-darkɛn $yiq-text-lightdɛn chenj dɛn nem to $color-contrast-darkɛn $color-contrast-light.
Brek we de brokMidya kwɛstyɔn mixins paramita dɛn dɔn chenj fɔ wan mɔ lɔjik we fɔ du tin.
- media-breakpoint-down()yuz di brekpoint insɛf insted ɔf di nɛks brekpoint (ɛgz., media-breakpoint-down(lg)instead ɔf media-breakpoint-down(md)targets viupɔt dɛn we smɔl pas lg).
- Semweso, di sɛkɔn paramita in media-breakpoint-between()de yuz bak di brekpɔynt sɛf instead ɔf di nɛks brekpɔynt (ɛgz., media-between(sm, lg)instead ɔf media-breakpoint-between(sm, md)targets viupɔt bitwin smɛn lg).
Brek we de brokRimov print stayl ɛn $enable-print-stylesvariebul. Print displei klas dɛn stil de arawnd. Si di #28339 .
Brek we de brokDrɔp color(), theme-color(), ɛn gray()fɛnshɔn dɛn in favɔrit fɔ vɛriɔbul dɛn. Si di #29083 .
Brek we de brokRinem theme-color-level()funkshɔn to color-level()ɛn naw de aksept ɛni kɔlɔ we yu want instead ɔf ɔl di $theme-colorkɔlɔ dɛn. Si #29083 Wach aut: color-level() bin leta pan drɔp in v5.0.0-alpha3.
Brek we de brokRinem $enable-prefers-reduced-motion-media-queryɛn $enable-pointer-cursor-for-buttonsto $enable-reduced-motionɛn $enable-button-pointersfɔ shɔt.
Brek we de brokRimov di bg-gradient-variant()miksin. Yuz di .bg-gradientklas fɔ ad grɛdiɛnt to ɛlimɛnt dɛn instead ɔf di .bg-gradient-*klas dɛn we dɛn dɔn jenarayz.
Brek we de brok Dɛn dɔn pul di miksin dɛn we dɛn nɔ bin dɔn yuz bifo tɛm:
- hover, hover-focus, plain-hover-focus, ɛnhover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(sɛf bin drɔp di yutiliti klas we gɛt fɔ du wit am, .text-hide)
- visibility()
- form-control-focus()
Brek we de brokRinem scale-color()funkshɔn to shift-color()fɔ avɔyd kɔlishin wit Sass in yon kɔlɔ skel fɛnshɔn.
box-shadowmixins naw alaw nullvalyu ɛn drɔp nonefrɔm bɔku argumɛnt dɛn. Si di #30394 .
Di border-radius()mixin naw gɛt difɔlt valyu.

Sistem fɔ kɔlɔ

Di kala sistem we bin de wok wit color-level()ɛn $theme-color-intervaldɛn bin pul am fɔ favɔret wan nyu kala sistem. Ɔl lighten()ɛn di darken()fɛnshɔn dɛn we de na wi kɔdbɛs de riples wit tint-color()ɛn shade-color(). Dɛn wok dɛn ya go miks di kɔlɔ wit wayt ɔ blak instead fɔ chenj in layt bay wan patikyula mɔnt. Di shift-color()go ɔl tu tint ɔ shed wan kɔlɔ dipen pan if in wet paramita na pɔsitiv ɔ nɛgitiv. Si #30622 fɔ no mɔ.
Ad nyu tint ɛn shed fɔ ɛvri kɔlɔ, we de gi nayn difrɛn kɔlɔ fɔ ɛni bays kɔlɔ, as nyu Sass vɛriɔbul dɛn.
Impɔtant kɔlɔ kɔntrast. Bumped kala kɔntrast ratio frɔm 3: 1 to 4.5: 1 ɛn ɔpdet blu, grɛn, sayn, ɛn pink kɔlɔ fɔ mek shɔ se WCAG 2.1 AA kɔntrast. Dɔn bak, chenj wi kɔlɔ kɔntrast kɔlɔ frɔm $gray-900to $black.
Fɔ sɔpɔt wi kɔlɔ sistem, wi dɔn ad nyu kɔstɔm tint-color()ɛn shade-color()fɛnshɔn dɛn fɔ miks wi kɔlɔ dɛn di rayt we.

Grid ɔpdet dɛn

Nyu brekpoint! Add nyu xxlbrekpoint fɔ 1400pxɛn ɔp. Nɔ chenj to ɔl di ɔda brekpoint dɛn.
Impɔtant gɔta dɛn. Gɔta dɛn naw dɔn sɛt insay rems, ɛn dɛn smɔl pas v4 ( 1.5rem, ɔ lɛk 24px, dɔŋ frɔm 30px). Dis de alaynɛd wi grid sistɛm in gɔta dɛn wit wi spɛshal yutiliti dɛn.
- Ad nyu gɔta klas ( .g-*, .gx-*, ɛn .gy-*) fɔ kɔntrol ɔrizɔntal/vɛtikal gɔta, ɔrizɔntal gɔta, ɛn vertikal gɔta.
- Brek we de brokRinem .no-guttersto .g-0fɔ mek i mach nyu gɔta yutiliti dɛn.
Kɔlɔm dɛn nɔ dɔn position: relativeaplay igen, so yu kin gɛt fɔ ad .position-relativesɔm ɛlimɛnt dɛn fɔ mek da bihayvya de bak.
Brek we de brokDrɔp sɔm .order-*klas dɛn we bɔku tɛm nɔ bin de yuz. Wi naw onli provayd .order-1to .order-5out of di box.
Brek we de brokDrɔp di .mediakɔmpɔnɛnt as i kin izi fɔ riplik wit yutiliti dɛn. Si #28265 ɛn di fleks yutiliti pej fɔ ɛgzampul .
Brek we de brok bootstrap-grid.cssnaw i jɔs de aplay box-sizing: border-boxto di kɔlɔm instead fɔ riset di glob ɔl bɔks-sayz. Dis we ya, wi grid stayl dɛn kin yuz na mɔ ples dɛn we nɔ gɛt ɛnitin fɔ ambɔg am.
$enable-grid-classesnɔ de disable di jenɛreshɔn fɔ kɔntena klas dɛn igen. Si di #29146.
Updated di make-colmixin fɔ difɔlt to ikwal kɔlɔm dɛn we nɔ gɛt wan spɛsifikɛd saiz.

Kɔntinɛnt, Ribɔt, ɛn ɔda tin dɛn

RFS dɔn ɛnabul naw bay difɔlt. Di edlayn dɛn we de yuz difont-size()mixin go ɔtomɛtik ajɔst dɛnfont-sizefɔ skel wit di viupɔt. Dis ficha bin bifo opt-in wit v4.
Brek we de brokƆvahɛl wi displei taypografi fɔ riples wi $display-*vɛriɔbul dɛn ɛn wit wan $display-font-sizesSass map. Also rimot di individyual $display-*-weightvariebul fɔ wan singl $display-font-weightɛn adjɔst font-sizes.
Dɛn ad tu nyu .display-*sayz dɛn fɔ di edlayn dɛn, .display-5ɛn .display-6.
Links de ɔndalayn bay difɔlt (nɔto jɔs pan hover), pas nɔmɔ dɛn de pat pan sɔm patikyula kɔmpɔnɛnt dɛn.
Ridizayn tebul dɛn fɔ rifresh dɛn stayl dɛn ɛn bil dɛn bak wit CSS vɛriɔbul dɛn fɔ mɔ kɔntrol pan stayl.
Brek we de brokTebul dɛn we dɛn dɔn nest nɔ de gɛt stayl dɛn igen.
Brek we de brok .thead-lightɛn .thead-darkdɛn kin drɔp in favɔrit fɔ di .table-*vayriɔnt klas dɛn we dɛn kin yuz fɔ ɔl di tebul ɛlimɛnt dɛn ( thead, tbody, tfoot, tr, thɛn td).
Brek we de brokDi table-row-variant()mixin de chenj in nem to table-variant()ɛn i de aksept ɔl 2 paramita dɛn: $color(kɔlɔ nem) ɛn $value(kɔlɔ kɔd). Di bɔda kɔlɔ ɛn aksɛn kɔlɔ dɛn kin ɔtomɛtik kɔlkul bay di tebul faktɔ vɛriɔbul dɛn.
Split tebul sɛl padding vɛriɔbul dɛn insay -yɛn -x.
Brek we de brok.pre-scrollableDi klas we dɛn dɔn drɔp . Si di #29135
Brek we de brok .text-*yutiliti nɔ de ad hova ɛn fɔs stet to link dɛn igen. .link-*yu kin yuz ɛlda klas dɛn insted. Si di #29267
Brek we de brok.text-justifyDi klas we dɛn dɔn drɔp . Si di #29793
Brek we de brok ~~<hr>elemɛnt dɛn naw de yuz heightinstead fɔ borderfɔ bɛtɛ sɔpɔt di sizeatribyut. Dis de mek bak yus di padding yutiliti fɔ mek tik divayda dɛn (ɛgz., <hr class="py-1">).~~
Riset difɔlt ɔrizɔntal padding-lefton <ul>ɛn <ol>ɛlimɛnt dɛn frɔm brawza difɔlt 40pxto 2rem.
Added $enable-smooth-scroll, we de aplay scroll-behavior: smoothɔlsay na di wɔl—eksept fɔ yuzman dɛn we de aks fɔ ridyus muvmɛnt tru prefers-reduced-motionmidia kwɛstyɔn. Si #31877

RTL we dɛn kɔl RTL

Ɔrizɔntal dairekshɔn spɛshal vɛriɔbul dɛn, yutiliti dɛn, ɛn miksin dɛn ɔl dɔn chenj in nem fɔ yuz lɔjik prɔpati dɛn lɛk di wan dɛn we de na fleksbɔks layout dɛn—ɛgz., startɛn endinsay di ples fɔ leftɛn right.

Fɔm dɛn

Dɛn ad nyu fɔm dɛn we de flɔt! Wi dɔn promot di Floating labels ɛgzampul to ful sɔpɔt fɔm kɔmpɔnɛnt dɛn. Si di nyu Floating labels pej.
Brek we de brok Konsolidɛt nativ ɛn kɔstɔm fɔm ɛlimɛnt dɛn. Dɛn dɔn kɔnsolidɛt chɛkbɔks dɛn, redio dɛn, sɛlɛkt dɛn, ɛn ɔda input dɛn we bin gɛt nativ ɛn kɔstɔm klas dɛn na v4. Naw klos to ɔl wi fɔm ɛlimɛnt dɛn na ɔl kɔstɔm, bɔku pan dɛn nɔ nid fɔ kɔstɔm HTML.
- .custom-control.custom-checkboxna naw .form-check.
- .custom-control.custom-custom-radiona naw .form-check.
- .custom-control.custom-switchna naw .form-check.form-switch.
- .custom-selectna naw .form-select.
- .custom-fileɛn .form-filedɛn dɔn tek kɔstɔm stayl dɛn we de ɔp .form-control.
- .custom-rangena naw .form-range.
- Drɔp nativ .form-control-fileɛn .form-control-range.
Brek we de brokDɛn dɔn drɔp .input-group-appendam ɛn .input-group-prepend. Yu kin naw jɔs ad bɔtin ɛn .input-group-textas dairekt pikin dɛn fɔ di input grup dɛn.
Di lɔng tɛm Mising bɔda rayus pan input grup wit validɛshɔn fidbak bɔg dɔn dɔn fiks bay we dɛn ad wan ɔda .has-validationklas to input grup dɛn wit validɛshɔn.
Brek we de brok Drɔp fɔm-spɛsifi k layout klas fɔ wi grid sistem. Yuz wi grid ɛn yutiliti dɛn instead fɔ .form-group, .form-row, ɔ .form-inline.
Brek we de brokFɔm lɛbl dɛn naw nid fɔ .form-label.
Brek we de brok .form-textnɔ de sɛt igen display, we de alaw yu fɔ mek inlayn ɔ blok ɛp tɛks lɛk aw yu want jɔs bay we yu chenj di HTML ɛlimɛnt.
Fɔm kɔntrol dɛn nɔ de yuz igen fiks heightwe i pɔsibul, insted dɛn defɛr to min-heightfɔ impɔtant kɔstɔmayshɔn ɛn kɔmpitibliti wit ɔda kɔmpɔnɛnt dɛn.
Validɛshɔn aykɔn dɛn nɔ de aplay igen fɔ <select>s wit multiple.
Riarenj sɔs Sass fayl dɛn ɔnda scss/forms/, inklud input grup stayl dɛn.

Di tin dɛn we de insay di bɔdi

Yunifayd paddingvalyu fɔ alɛt, bred kram, kad, drɔpdɔwn, list grup, modal, popovers, ɛn tultips fɔ bi bays pan wi $spacervɛriɔbul. Si di #30564 .

Akɔdiɔn we dɛn mek wit

Dɛn ad nyu akodiɔn kɔmpɔnɛnt .

Alɛrt dɛn

Naw alɛt dɛn gɛt ɛgzampul dɛn wit aykɔn dɛn .
Rimov kɔstɔm stayl fɔ <hr>s insay ɛni alɛt bikɔs dɛn dɔn ɔlrɛdi yuz currentColor.

Badge dɛn we dɛn kin yuz

Brek we de brokDrɔp ɔl di .badge-*kɔlɔ klas dɛn fɔ bakgrɔn yutiliti dɛn (ɛgz., yuz .bg-primaryinstead ɔf .badge-primary).
Brek we de brokDrɔp .badge-pill—yuz di .rounded-pillyutiliti insted.
Brek we de brokRimov hover ɛn fɔs stayl fɔ <a>ɛn <button>ɛlimɛnt dɛn.
Inkris difɔlt padding fɔ badge frɔm .25em/ .5emto .35em/ .65em.

Di tin dɛn we dɛn kin yuz fɔ mek bred

Simplify di difɔlt apinans fɔ bred kram bay we dɛn pul padding, background-color, ɛn border-radius.
Ad nyu CSS kɔstɔm prɔpati --bs-breadcrumb-dividerfɔ izi kɔstɔmayshɔn we nɔ nid fɔ kɔmpilayt CSS bak.

Bɔtin dɛn

Brek we de brok Toggle buttons , wit chɛkbɔks ɔ redio, nɔ nid JavaSkript igen ɛn dɛn gɛt nyu mak. Wi nɔ nid fɔ rap ɛlimɛnt igen, ad.btn-checkto di<input>, ɛn pe am wit ɛni.btnklas na di<label>. Si di #30650 . Di doks fɔ dis dɔn muf frɔm wi Bɔtin dɛn pej to di nyu Fɔm dɛn sɛkshɔn.
Brek we de brok Drɔp .btn-blockfɔ yutiliti dɛn. Bifo yu yuz .btn-blockpan di .btn, rap yu bɔtin dɛn wit .d-gridɛn wan .gap-*yutiliti fɔ mek dɛn spes dɛn as nid de. Switch to responsive classes fɔ ivin mɔ kɔntrol pan dɛn. Rid di docs fɔ sɔm ɛgzampul dɛn.
Updated wi button-variant()ɛn button-outline-variant()mixins fɔ sɔpɔt ɔda paramita dɛn.
Updated buttons fɔ mek shɔ se inkris kɔntrast pan hover ɛn aktiv stet dɛn.
Di bɔtin dɛn we nɔ ebul fɔ wok naw gɛt pointer-events: none;.

Kad fɔ di wan dɛn we de

Brek we de brokDrɔp .card-deckin favɔrit fɔ wi grid. Rap yu kad dɛn insay kɔlɔm klas dɛn ɛn ad wan mama ɛn papa .row-cols-*kɔntena fɔ mek yu mek bak kad dɛk dɛn (bɔt wit mɔ kɔntrol pan rispɔnsiv alaynɛshɔn).
Brek we de brokDrɔp .card-columnsin favɔrit fɔ Masonry. Si di #28922 .
Brek we de brokRiples di .cardbays akodiɔn wit wan nyu Akɔdin kɔmpɔnɛnt .

Karusel we dɛn kin yuz fɔ mek

Ad nyu .carousel-darkwe fɔ dak tɛks, kɔntrol, ɛn indikɛtɔ dɛn (i fayn fɔ layt bakgrɔn).
Riples chevron aykɔn fɔ karusel kɔntrol wit nyu SVG dɛn frɔm Bootstrap Aykɔn dɛn .

Klos di bɔtin

Brek we de brokRinem .closeto .btn-closefɔ wan less jenɛrik nem.
Klos bɔtin dɛn naw de yuz wan background-image(ɛmbaded SVG) instead ɔf a ×insay di HTML, we de alaw fɔ kɔstɔmayshɔn izi wan we yu nɔ nid fɔ tɔch yu mak.
Add nyu .btn-close-whitevariant we de yuz filter: invert(1)fɔ ɛnabul ay kɔntrast dismis aykɔn dɛn agens dak bakgrɔn dɛn.

Fɔdɔm

Rimov skrol ankɔrin fɔ akodin dɛn.

Drɔpdɔwn dɛn

Ad nyu .dropdown-menu-darkvayriɔnt ɛn asosiet vɛriɔbul fɔ on-dimand dak drɔpdɔwn dɛn.
Dɛn ad nyu vɛriɔbul fɔ $dropdown-padding-x.
Dak di drɔpdɔwn divayda fɔ impɔtant kɔntrast.
Brek we de brokƆl di ivintɛns fɔ di drɔpdɔwn naw de trig na di drɔpdɔwn tɔgl bɔtin ɛn afta dat dɛn de bɔbul ɔp to di mama ɛn papa ɛlimɛnt.
Di drɔpdɔwn mɛnyu dɛn naw gɛt wan data-bs-popper="static"atribyut we dɛn dɔn sɛt we di pozishɔn fɔ di drɔpdɔwn de statik, ɔ drɔpdɔwn de na di navbar. Dis na wi JavaSkript ad am ɛn i de ɛp wi fɔ yuz kɔstɔm pozishɔn stayl dɛn we nɔ de ambɔg Popper in pozishɔn.
Brek we de brokDrɔp flipopshɔn fɔ drɔpdɔwn plɔgin in favɔrit fɔ nativ Popper kɔnfigyushɔn. Yu kin naw disable di flip bihayvya bay we yu pas wan ɛmti arenjmɛnt fɔ fallbackPlacementsopshɔn insay flip modifya.
Naw yu kin klik di drɔpdɔwn mɛnyu dɛn wit nyu autoCloseopshɔn fɔ handle di ɔto klos bihayvya . Yu kin yuz dis opshɔn fɔ aksept di klik insay ɔ ausayd di drɔpdɔwn mɛnyu fɔ mek i intaraktiv.
Dropdowns naw de sɔpɔt .dropdown-items we dɛn rap insay <li>s.

Jumbotron we dɛn kɔl Jumbotron

Brek we de brokDrɔp di jumbotron kɔmpɔnɛnt as i kin riplik wit yutiliti dɛn. Si wi nyu Jumbotron ɛgzampul fɔ wan demo.

Lista di grup

Ad nyu .list-group-numberedmodifya to list grup dɛn.

Navs ɛn tab dɛn

Ad nyu nullvɛriɔbul dɛn fɔ font-size, font-weight, color, ɛn :hover colorto di .nav-linkklas.

Navbar dɛn

Brek we de brokNavbars naw nid wan kɔntena insay (fɔ drastikli simpul spɛshal rikwaymɛnt ɛn CSS nid).
Brek we de brokDi .activeklas nɔ go ebul fɔ aplay to .nav-items igen, i fɔ aplay dairekt pan .nav-links.

Ɔfkanvas

Add di nyu ɔfkanvas kɔmpɔnɛnt .

Pej dɛn we dɛn rayt

Pegineshɔn link dɛn naw gɛt kɔstɔmayz margin-leftwe de dinamik wan rawnd na ɔl di kɔna dɛn we dɛn separet frɔm wan ɔda wan.
Dɛn ad transitions to pej link dɛn.

Popovers dɛn

Brek we de brokRinem .arrowto .popover-arrowin wi difɔlt popover tɛmplat.
Rinem whiteListopshɔn to allowList.

Di wan dɛn we de spin

Spinners naw de ɔna prefers-reduced-motion: reducebay we dɛn de slo di animashɔn dɛn. Si di #31882 .
Impɔtant spina vertikal alaynɛshɔn.

Tost dɛn we dɛn kin mek

Tost kin naw posishun insay wan .toast-containerwit di ɛp fɔ posishun yutiliti dɛn .
Chenj difɔlt tost durayshɔn to 5 sɛkɔn.
Rimov overflow: hiddenfrɔm tost ɛn riples wit prɔpa border-radiuss wit calc()fɛnshɔn dɛn.

Tultip dɛn fɔ yuz

Brek we de brokRinem .arrowto .tooltip-arrowin wi difɔlt tultip tɛmplat.
Brek we de brokDi difɔlt valyu fɔ di fallbackPlacementsde chenj to ['top', 'right', 'bottom', 'left']fɔ bɛtɛ ples fɔ pɔpa ɛlimɛnt dɛn.
Brek we de brokRinem whiteListopshɔn to allowList.

Yutiliti dɛn

Brek we de brokRinem sɔm yutiliti dɛn fɔ yuz lɔjik prɔpati nem dɛn instead ɔf dairekshɔn nem dɛn wit di addɛshɔn fɔ RTL sɔpɔt:
- Dɛn chenj di nem .left-*ɛn .right-*to .start-*ɛn .end-*.
- Dɛn chenj di nem .float-leftɛn .float-rightto .float-startɛn .float-end.
- Dɛn chenj di nem .border-leftɛn .border-rightto .border-startɛn .border-end.
- Dɛn chenj di nem .rounded-leftɛn .rounded-rightto .rounded-startɛn .rounded-end.
- Dɛn chenj di nem .ml-*ɛn .mr-*to .ms-*ɛn .me-*.
- Dɛn chenj di nem .pl-*ɛn .pr-*to .ps-*ɛn .pe-*.
- Dɛn chenj di nem .text-leftɛn .text-rightto .text-startɛn .text-end.
Brek we de brokDisabled negatif margin dɛn bay difɔlt.
Ad nyu .bg-bodyklas fɔ sɛt di <body>'s bakgrɔn kwik kwik wan to ɔda ɛlimɛnt dɛn.
Ad nyu pozishɔn yutiliti fɔ top, right, bottom, ɛn left. Valyu dɛn inklud 0, 50%, ɛn 100%fɔ ɛni prɔpati.
Add nyu .translate-middle-x& .translate-middle-yyutiliti to ɔrizɔntal ɔ vertikal sɛnt absɔlɔb/fiks pozishɔn ɛlimɛnt dɛn.
Dɛn ad nyu border-widthyutiliti dɛn .
Brek we de brokDɛn chenj di nem .text-monospaceto .font-monospace.
Brek we de brokDɛn dɔn pul .text-hideam bikɔs na wan ol we fɔ ayd tɛks we dɛn nɔ fɔ yuz igen.
Ad .fs-*yutiliti fɔ font-sizeyutiliti dɛn (wit RFS we dɛn dɔn ɛnabul). Dɛn wan ya de yuz di sem skel we HTML in difɔlt ɛd dɛn (1-6, big to smɔl), ɛn dɛn kin chenj dɛn bay Sass map.
Brek we de brokRinem .font-weight-*yutiliti as .fw-*fɔ shɔt ɛn kɔnsistɛns.
Brek we de brokRinem .font-style-*yutiliti as .fst-*fɔ shɔt ɛn kɔnsistɛns.
Dɛn ad .d-gridam fɔ sho yutiliti dɛn ɛn nyu gapyutiliti dɛn ( .gap) fɔ CSS Grid ɛn fleksbɔks layout dɛn.
Brek we de brokRimov .rounded-smɛn rounded-lg, ɛn introduks wan nyu skel fɔ klas, .rounded-0to .rounded-3. Si di #31687 .
Dɛn ad nyu line-heightyutiliti dɛn: .lh-1, .lh-sm, .lh-baseɛn .lh-lg. Si na ya .
Muv di .d-noneyutiliti na wi CSS fɔ gi am mɔ wet oba ɔda displei yutiliti dɛn.
Ekstend di .visually-hidden-focusableɛlda fɔ wok bak pan kɔntena dɛn, yuz :focus-within.

Di wan dɛn we de ɛp

Brek we de brok Dɛn dɔn chenj di nem fɔ di rɛspɔnsiv ɛmbad ɛlda dɛn to ratio ɛlda dɛn wit nyu klas nem ɛn impɔtant bihayvya, ɛn bak wan ɛp CSS vɛriɔbul.
- Dɛn dɔn chenj di nem fɔ di klas dɛn fɔ chenj byto xinsay di aspek rɛsɛshɔn. Fɔ ɛgzampul, .ratio-16by9na naw .ratio-16x9.
- Wi dɔn drɔp di .embed-responsive-itemɛn ɛlimɛnt grup sɛlɛktɔ in favɔrit fɔ wan simpul .ratio > *sɛlɛktɔ. Nɔ mɔ klas nɔ nid, ɛn di ratio ɛlda naw de wok wit ɛni HTML ɛlimɛnt.
- Dɛn $embed-responsive-aspect-ratiosdɔn chenj di nem fɔ di Sass map $aspect-ratiosɛn dɛn dɔn mek in valyu dɛn simpul fɔ put di klas nem ɛn di pasɛnt as di key: valuepe.
- CSS vεriεbul dεm naw dεn de jεnarεt εn inklud fכ εvri valyu na di Sass map. Modify di --bs-aspect-ratiovariebul pan di .ratiofɔ mek ɛni kɔstɔm aspek rɛsɛshɔn .
Brek we de brok “Skrin rida” klas dɛn naw na klas dɛn we dɛn kin “ayd we pɔsin kin si” .
- Chenj di Sass fayl frɔm scss/helpers/_screenreaders.scsstoscss/helpers/_visually-hidden.scss
- Rinem .sr-onlyɛn .sr-only-focusableto .visually-hiddenɛn.visually-hidden-focusable
- Rinem sr-only()ɛn sr-only-focusable()miksin to visually-hidden()ɛn visually-hidden-focusable().
bootstrap-utilities.cssnaw i gɛt bak di wan dɛn we de ɛp wi. Ɛpman dɛn nɔ nid fɔ import insay kɔstɔm bil dɛn igen.

JavaSkript fɔ di Baybul

Drɔp jQuery dipɛnsin ɛn rayt bak plɔgin dɛn fɔ de insay rɛgyula JavaSkript.
Brek we de brokData atribyut fɔ ɔl di JavaSkript plɔgin dɛn naw gɛt nemspɛs fɔ ɛp fɔ difrɛns di Bootstrap funkshɔnaliti frɔm tɔd pati ɛn yu yon kɔd. Fɔ ɛgzampul, wi kin yuz data-bs-toggleinstead fɔ data-toggle.
Ɔl di plɔgin dɛn kin aksept wan CSS sɛlɛktɔ naw as di fɔs argumɛnt. Yu kin pas wan DOM ɛlimɛnt ɔ ɛni valid CSS sɛlɛktɔ fɔ mek wan nyu instans fɔ di plɔgin:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigkin pas as fɛnshɔn we de aksept di Bootstrap in difɔlt Popper kɔnfigyushɔn as argumɛnt, so dat yu go ebul fɔ jɔyn dis difɔlt kɔnfigyushɔn na yu we. I de aplay to dropdowns, popovers, ɛn tultips.
Di difɔlt valyu fɔ di fallbackPlacementschenj to ['top', 'right', 'bottom', 'left']fɔ bɛtɛ ples fɔ Popa ɛlimɛnt dɛn. I de aplay to dropdowns, popovers, ɛn tultips.
Rimov ɔndaskɔ frɔm pɔblik statik mɛtɔd dɛn lɛk _getInstance()→ getInstance().