v5 ah migrate a ni

Bootstrap source files, documentation leh components a inthlak danglamna te chu track leh review la, v4 atanga v5 a migrate theih nan.

He page ah hian

Innghahna te

jQuery chu a tla thla ta a ni.
Popper v1.x atanga Popper v2.x ah upgrade a ni.
Kan Sass compiler pek Libsass chu deprecated a nih avangin Libsass chu Dart Sass hmangin kan thlak a.
Kan documentation siamna atan Jekyll atanga Hugo ah kan migrate a

Browser hmanga support theih a ni

Internet Explorer 10 leh 11 te chu a tla thla ta a ni
Microsoft Edge < 16 (Legacy Edge) ah a tla thla ta a ni.
Firefox < 60 a tla thla
Safari < 12 a tla thla
iOS Safari < 12 a tla thla
Chrome < 60 a tla thla

Documentation tihdanglam a ni

Homepage, docs layout, leh footer te siam thar a ni.
Parcel guide thar a rawn dah belh bawk .
Customize section thar dah belh a ni a, v4-a Theming page thlak a ni a , Sass chungchang chipchiar thar, global configuration options, color schemes, CSS variables, leh a dangte a awm bawk.
Form documentation zawng zawng chu Forms section thara siam thar a ni a, a thu awmte chu focused page-ah a then a ni.
Chutiang bawkin, Layout section updated , grid content chiang zawka flesh out turin.
“Navs” component page hming chu “Navs & Tabs” tiin thlak a ni.
“Checks” page hming chu “Checks & radios” tiin thlak a ni.
Navbar kan design thar a, kan site leh docs version hrang hranga kal awlsam zawk nan subnav thar kan dah belh bawk.
Search field atan keyboard shortcut thar dah belh a ni: Ctrl + /.

Sass a ni

Redundant value te paih awlsam zawk nan default Sass map merges te kan ditch a. Tunah chuan Sass maps ah value zawng zawng i define vek tur a ni tih hre reng ang che $theme-colors. Sass maps te hmachhawn dan tur hi han en teh .
Breaking a nicolor-yiq()Function leh a kaihhnawih variable te chu YIQ color-contrast()colorspace nen a inzawm tawh loh avangin hming thlak a ni. #30168 en rawh.
- $yiq-contrasted-thresholdtiin a hming thlak a $min-contrast-rationi.
- $yiq-text-darkleh $yiq-text-lightan hming chu $color-contrast-darkleh $color-contrast-light.
Breaking a niMedia query mixins parameter te chu a dik zawka hman theih turin a danglam ta a ni.
- media-breakpoint-down()breakpoint lo awm tur aiah breakpoint ngei a hmang (eg, targets viewports smaller than ai chuan media-breakpoint-down(lg)) .media-breakpoint-down(md)lg
- Chutiang bawkin, parameter pahnihna in pawhin breakpoint lo awm tur aiah media-breakpoint-between()breakpoint ngei pawh a hmang bawk (eg, targets viewports between and ).media-between(sm, lg)media-breakpoint-between(sm, md)smlg
Breaking a niPrint style leh $enable-print-stylesvariable te chu paih chhuah a ni. Print display class pawh a la awm reng a ni. #28339 ah hian en rawh .
Breaking a niVariable duh zawnga function color(), theme-color(), leh function te chu drop a ni. #29083 ah hian en rawh .gray()
Breaking a niRenamed theme-color-level()function to color-level()leh tunah chuan color chauh ni lovin i duh ang color a pawm tawh $theme-color. See #29083 Watch out: color-level() a hnuah a rawn tla thla ta a v5.0.0-alpha3ni .
Breaking a niRenamed $enable-prefers-reduced-motion-media-queryleh $enable-pointer-cursor-for-buttonsto $enable-reduced-motionleh $enable-button-pointerstawi tea sawina atan.
Breaking a niMixin chu a la bg-gradient-variant()chhuak a. Class chu generated class .bg-gradientte ai chuan elements ah gradient add nan hmang ang che ..bg-gradient-*
Breaking a ni Tun hmaa hman tawh loh mixin te paih chhuah tawhte:
- hover, hover-focus, plain-hover-focus, lehhover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(a kaihhnawih utility class pawh a paih bawk, .text-hide)
- visibility()
- form-control-focus()
Breaking a niSass -a color scaling function nena inhnaih loh nan scale-color()function to hming thlak a ni.shift-color()
box-shadowmixins te hian value an phal tawh a, argument tam tak atangin nullan drop thei tawh bawk. #30394 ah hian en rawh .none
Tunah border-radius()chuan mixin hian default value a nei tawh a ni.

Color system a awm bawk

A color system chu a thawk a color-level(), $theme-color-intervala paih chhuak a, color system thar siam a duh a ni. Kan codebase chhunga function zawng zawng lighten()leh function te chu leh . Heng function te hian a lightness chu a zat ruat sa a thlak ai chuan a rawng chu a dum emaw, a dum emaw nen a mix ang. The hian a weight parameter chu positive emaw negative emaw a nih dan azirin color a tint emaw shade emaw ang. A chipchiar zawkna chu #30622 ah en rawh .darken()tint-color()shade-color()shift-color()
Color tin atan tint leh shade thar dah belh a ni a, base color tin tan color hrang hrang 9 a pe a, Sass variable thar angin.
Color contrast tihchangtlun a ni. Bumped color contrast ratio 3:1 atanga 4.5:1 leh blue, green, cyan, leh pink color updated WCAG 2.1 AA contrast a awm theih nan. Tin, kan color contrast color pawh kan thlak bawk a $gray-900, $black.
Kan color system support turin kan color te a inmil theih nan custom tint-color()leh function thar kan dah belh bawk.shade-color()

Grid update a awm bawk

Breakpoint thar a ni! xxlBreakpoint thar a dah belh 1400pxleh a. Breakpoint dang zawng zawngah inthlak danglamna a awm lo.
Gutters siam that a ni. Tunah chuan gutters chu rems-ah dah a ni tawh a, v4 ( 1.5rem, or about 24px, down from 30px) aiin a tawi zawk. Hei hian kan grid system-a gutters te chu kan spacing utilities te nen a inmil tir a ni.
- Horizontal/vertical gutter, horizontal gutter, leh vertical gutter control nan gutter class thar ( .g-*, .gx-*, leh ) dah belh a ni..gy-*
- Breaking a niGutter utility thar nena inmil .no-guttersturin a hming thlak a ni..g-0
position: relativeColumn te hi a apply tawh lo a, chuvangin .position-relativechu behavior chu siamthat leh tur chuan element thenkhatah i belh a ngai mai thei.
Breaking a niClass engemaw zat a drop .order-*a, chu chu hman loha kal fo thin a ni. Tunah chuan out of the box chauh kan pe .order-1ta a ni..order-5
Breaking a ni.mediaUtilities hmanga awlsam taka replicate theih a nih avangin component chu drop a ni. Entirna atan #28265 leh flex utilities page en rawh .
Breaking a ni bootstrap-grid.csstunah chuan box-sizing: border-boxglobal box-sizing reset ai chuan column-ah chauh a hman theih. Chutiang chuan kan grid style te hi hmun tam zawkah inrawlh lovin kan hmang thei ang.
$enable-grid-classescontainer class siamna chu a titawp tawh lo. #29146 en rawh.
make-colMixin chu size tarlan loha column inangah default-ah update a ni.

Content, Reboot tih te hi a ni

Tunah chuan RFS chu default-in a enable tawh a ni. Mixin hmangate chuan viewport hmangin an to scale chu afont-size()siam rem nghal vek angHe feature hi a hmain v4 hmangin opt-in a ni tawh.font-size
Breaking a ni$display-*Kan variable te thlak turin kan display typography kan overhaul a, $display-font-sizesSass map hmangin kan siam bawk. $display-*-weightTin, pakhat zel atan variable hrang hrangte chu paih chhuakin s $display-font-weightsiamrem a ni bawk.font-size
.display-*Heading size thar pahnih dah belh a ni a .display-5, .display-6.
Link te hi default-in underline a ni (hover-ah chauh ni lovin), component bik a tel a nih loh chuan.
Table te chu an style refresh turin redesign a, styling control tam zawk nan CSS variable hmangin siam thar leh a ni.
Breaking a niNested table hian style an inherit tawh lo.
Breaking a ni .thead-lightleh table element zawng zawng ( , , , , leh ) atana hman theih tur variant class te .thead-darkduh zawnga paih an ni bawk..table-*theadtbodytfoottrthtd
Breaking a nitable-row-variant()Mixin hming thlak a ni a , table-variant()parameter 2 chauh a pawm a: $color(color name) leh $value(color code). Border color leh accent color te chu table factor variable te hmangin automatic in a chhut chhuak thin.
Table cell padding variable te chu -yleh -x.
Breaking a niClass a tla thla .pre-scrollableta. #29135 ah hian en rawh
Breaking a ni .text-*utilities te hian link ah hover leh focus state an dah belh tawh lo. .link-*helper class te pawh hman theih a ni. #29267 en rawh
Breaking a niClass a tla thla .text-justifyta. #29793 ah hian en rawh
Breaking a ni <hr>elements te chuan attribute support tha zawk nan hman heightai chuan an hmang ta a ni. Hei hian padding utilities hmangin divider thuk zawk siam theihna a siam bawk (eg, ).bordersize<hr class="py-1">
Default horizontal padding-lefton <ul>leh <ol>elements te chu browser default 40pxatanga 2rem.
Added $enable-smooth-scroll, chu chu khawvel pum huapa hman theih a ni— media query scroll-behavior: smoothhmanga motion tihtlem diltute tih loh chu . #31877 en rawhprefers-reduced-motion

RTL a ni

Horizontal direction specific variable, utilities, leh mixins te chu flexbox layout-a hmuh ang chi logical property hmang turin hming thlak vek a ni— eg , startleh lehendleftright

Form hrang hrang

Floating form thar a rawn dah belh bawk! Floating labels entirnan fully supported form components ah kan promote ta a ni. Floating labels page thar chu en rawh.
Breaking a ni Native leh custom form element hrang hrangte inzawmkhawm. v4-a native leh custom class nei tawh checkbox, radio, select leh input dangte chu an inzawm khawm ta a ni. Tunah chuan kan form element zawng zawng deuhthaw chu custom vek a ni tawh a, a tam zawk chu custom HTML a ngai lo.
- .custom-checka ni tawh .form-checka .
- .custom-check.custom-switcha ni tawh .form-check.form-switcha .
- .custom-selecta ni tawh .form-selecta .
- .custom-fileleh .form-filea chungah custom style hmanga thlak a ni tawh .form-controlbawk.
- .custom-rangea ni tawh .form-rangea .
- A tlak native .form-control-fileleh .form-control-range.
Breaking a niA tlak .input-group-appendleh .input-group-prependa . Tunah chuan buttons chauh i dah thei tawh .input-group-textang a, input group-te direct child angin i dah thei tawh ang.
Validation feedback bug nei input group-a hun rei tak awm tawh Missing border radius chu a tawpah chuan validation nei input group .has-validation-ah class dang dah belhin siamthat a ni.
Breaking a ni Kan grid system atan form-specific layout class te kan thlak a. Kan grid leh utilities te hi .form-group, .form-row, or .form-inline.
Breaking a niTunah chuan form label siam a ngai tawh .form-label.
Breaking a ni .form-textno longer sets display, HTML element thlak mai maiin i duh angin inline emaw block help text emaw siam theih a ni.
Validation icons hi <select>s with ah hian hman a ni tawh lo multiple.
, hnuaia source Sass files te chu rearranged a ni a scss/forms/, input group styles te pawh a tel.

Component hrang hrangte

Kan variable paddingatanga siam tur alerts, breadcrumbs, cards, dropdowns, list groups, modals, popovers, leh tooltips te tan unified value te . #30564 ah hian en rawh .$spacer

Accordion a ni

Accordion component thar a rawn dah belh bawk .

Alerts a awm bawk

Tunah chuan alerts te hian icons nei entirnan an nei tawh a .
<hr>Alert tinah s tan custom styles te chu an hman tawh avangin paih chhuah currentColora ni .

Badge te pawh a awm

Breaking a ni.badge-*Background utilities atan color class zawng zawng a paih vek (eg, use .bg-primaryinstead of .badge-primary).
Breaking a niDropped .badge-pill—utility .rounded-pillhmang zawk rawh.
Breaking a niHover leh focus styles for <a>leh <button>elements te tihbo a ni.
/ atanga .25em/ .5emthlenga badge te default padding tihpun a ni..35em.65em

Chhangphut chi hrang hrang

Breadcrumbs default appearance chu padding, background-color, leh border-radius.
--bs-breadcrumb-dividerCSS recompile ngai lovin awlsam taka siam theih turin CSS custom property thar a dah belh bawk .

Buttons te a awm

Breaking a ni Toggle buttons , checkbox emaw radio emaw nei chuan JavaScript a mamawh tawh lo va, markup thar a nei tawh bawk. Wrappingelement kan mamawh tawh lo va, , ah kan dah.btn-checka<input>,. #30650 ah hian en rawh . Chumi atana docs chu kan Buttons page atang chuan Forms section thar ah a insawn ta a ni..btn<label>
Breaking a ni Utilities .btn-blockatan drop a ni. .btn-blockon the hmang lovin .btn, i buttons te chu wrap la, .d-grida .gap-*tul ang zela space dahna tur utility hmangin wrap rawh. An chunga thuneihna tam zawk neih theih nan responsive class-ah switch rawh. Entirna thenkhat chu docs chhiar la.
Parameter dang support turin kan button-variant()leh button-outline-variant()mixins te update a ni.
Hover leh active state-a contrast tihpun theihna turin button updated.
Tunah chuan disabled button te chuan pointer-events: none;.

Card a ni

Breaking a ni.card-deckKan grid duh zawngin a tla thla . I card te chu column class-ah wrap la, .row-cols-*card deck siam thar leh turin parent container dah la (mahse responsive alignment-ah control tam zawk nen).
Breaking a niMasonry .card-columnsduh zawngin a tla thla. #28922 ah hian en rawh .
Breaking a niBase accordion chu Accordion component thar.card hmangin a thlak a .

Carousel hmanga siam a ni

Dark text, controls, leh indicator te tan .carousel-darkvariant thar dah belh a ni (background lighter tan chuan a tha hle).
Carousel control atana chevron icon te chu Bootstrap Icons atanga SVG thar hmangin thlak a ni .

Kawngkhar khar rawh

Breaking a niGeneric hming tlem zawk atan hming thlak a ni .close..btn-close
Tunah chuan close button hian HTML-ah background-imagea aiah a (embedded SVG) a hmang ×a, i markup khawih ngai lovin awlsam zawka siam theih a ni tawh.
Background dum zawka contrast sang zawk dismiss icons enable theihna tur .btn-close-whitevariant thar dah belh a ni.filter: invert(1)

Chim

Accordion atana scroll anchoring tihbo a ni.

Dropdown te pawh a awm

.dropdown-menu-darkOn-demand dark dropdown atan variant thar leh a kaihhnawih variable te dah belh a ni.
Variable thar a rawn dah belh leh a $dropdown-padding-x.
Contrast tihchangtlun nan dropdown divider chu a thim a.
Breaking a niTunah chuan dropdown atana event zawng zawng chu dropdown toggle button-ah trigger a ni tawh a, chutah chuan parent element thlengin a bubble vek tawh a ni.
Tunah chuan dropdown menu-ah chuan dropdown positioning chu static a nih hunah leh dropdown chu navbar-a a awm data-bs-popper="static"laiin attribute set an nei tawh a ni. data-bs-popper="none"Hei hi kan JavaScript hmanga kan dah belh a ni a, Popper-a positioning tibuai lovin custom position style kan hman theih nan min pui a ni.
Breaking a niflipNative Popper configuration duh zawng dropdown plugin atan option paih a ni. Tunah chuan flip modifier fallbackPlacementsah option atan empty array pass hmangin flipping behavior chu i disable thei tawh ang .
Tunah chuan dropdown menu te chu auto close behaviorautoClose handle theihna tur option thar nen click theih a ni tawh ang . He option hmang hian dropdown menu chhung emaw pawnah emaw click chu pawm theih a ni a, chu chuan interactive a siam thei ang.
.dropdown-itemTunah chuan dropdowns hian s wrapped in s a support ta <li>a ni.

Jumbotron a ni

Breaking a niUtilities hmanga replicate theih a nih avangin jumbotron component chu drop a ni. Demo atan kan Jumbotron entir thar hi en la.

List group a awm

Group list-ah .list-group-numberedmodifier thar dah belh a ni.

Navs leh tabs te a awm

, , , leh class-ah variable nullthar dah belh a ni.font-sizefont-weightcolor:hover color.nav-link

Navbars te a ni

Breaking a niTunah chuan Navbars ah hian container a mamawh tawh a (spacing mamawhna leh CSS mamawhna nasa taka tih awlsam nan).

Offcanvas ah a awm

Offcanvas component thar a rawn dah belh leh a .

Pagination tih a ni

Tunah chuan pagination link te hian customizable an nei tawh a margin-left, an inthen chuan corner zawng zawngah dynamically rounded an ni tawh.
transitionPagination link-ah s dah belh a ni.

Popovers te an ni

Breaking a niKan default popover template ah khan a hming thlak .arrowa ni..popover-arrow
A hming thlak whiteListoption chu allowList.

Spinner te an ni

prefers-reduced-motion: reduceTunah chuan spinner te chuan animation tihhniam hmangin an chawimawi ta a ni. #31882 ah hian en rawh .
Spinner vertical alignment tihchangtlun a ni.

Toasts te pawh a awm

Tunah chuan toasts chu positioning utilities hmangin a ah dah theih a ni.toast-container tawh ang .
Default toast duration chu second 5 ah thlak a ni.
Toast overflow: hiddenatanga lakchhuah a ni a, function nei proper border-radiuss hmanga thlak a ni.calc()

Hmanraw hman dan tur

Breaking a niKan default tooltip template ah khan a hming thlak .arrowa ni..tooltip-arrow
Breaking a niDefault value for the fallbackPlacementschu ['top', 'right', 'bottom', 'left']popper elements dahna tha zawk atan tih a ni.
Breaking a niA hming thlak whiteListoption chu allowList.

Utilities te pawh a awm

Breaking a niRTL support dah belhin directional hming aiah logical property hming hmang turin utility engemaw zat hming thlak a ni:
- A hming thlak .left-*leh .right-*to .start-*leh .end-*.
- A hming thlak .float-leftleh .float-rightto .float-startleh .float-end.
- A hming thlak .border-leftleh .border-rightto .border-startleh .border-end.
- A hming thlak .rounded-leftleh .rounded-rightto .rounded-startleh .rounded-end.
- A hming thlak .ml-*leh .mr-*to .ms-*leh .me-*.
- A hming thlak .pl-*leh .pr-*to .ps-*leh .pe-*.
- A hming thlak .text-leftleh .text-rightto .text-startleh .text-end.
Breaking a niNegative margin te chu default-in a titawp.
's background chu element dangtea .bg-bodyrang taka dah theihna tur class thar dah belh a ni.<body>
, , , leh . _ _ Value-ah chuan , , leh property tin atan te a tel.toprightbottomleft050%100%
Absolute/fixed positioned elements te chu horizontal emaw vertical emaw a center ah new .translate-middle-x& utilities te dah belh a ni..translate-middle-y
border-widthUtility thar a rawn dah belh bawk .
Breaking a niA hming thlak .text-monospacea .font-monospaceni.
Breaking a ni.text-hideText hman tawh loh tur thup dan hlui tak a nih avangin paih a ni.
.fs-*Utility hrang hrangte tana utility dah belh font-size(RFS enabled). Hengte hian HTML-a default heading (1-6, lian atanga te) ang chiah scale an hmang a, Sass map hmangin siam danglam theih a ni bawk.
Breaking a niA tawi leh a inmil theih nan .font-weight-*utilities hming thlak a ni..fw-*
Breaking a niA tawi leh a inmil theih nan .font-style-*utilities hming thlak a ni..fst-*
CSS Grid leh flexbox layout hrang hranga hman tur .d-gridutilities leh utility thar gap( ) tarlanna atan dah belh a ni..gap
Breaking a niRemoved .rounded-smleh rounded-lg, leh class scale thar a rawn luh tir a, .rounded-0to .rounded-3. #31687 ah hian en rawh .
line-heightUtility thar dah belh a ni: .lh-1, .lh-sm, .lh-baseleh .lh-lg. Hetah hian en rawh .
Kan CSS- a .d-noneutility chu display utility dang aiin weight tam zawk pe turin kan sawn a.
.visually-hidden-focusableContainer-ah pawh hna thawk turin helper chu a tizau a, :focus-within.

Ṭanpuitute

Breaking a ni Responsive embed helper te chu class hming thar leh nungchang tha zawk nei ratio helper tia thlak a ni a, chubakah CSS variable ṭangkai tak a awm bawk.
- Class hrang hrangte chu aspect ratio-a thlak turin an hming thlak a byni . xEntirnan, .ratio-16by9is now .ratio-16x9.
- .embed-responsive-itemSelector awlsam zawk duh turin and element group selector kan thlak ta a .ratio > *ni. Class tam zawk a ngai tawh lo va, tunah chuan ratio helper hian HTML element eng pawh hmangin hna a thawk tawh a ni.
- $embed-responsive-aspect-ratiosSass map chu a hming thlak a ni a , $aspect-ratiosa value te chu awlsam zawka siam niin class hming leh percentage chu key: valuepair atan dah a ni.
- Tunah chuan CSS variable siam a ni tawh a, Sass map-a value tin atan dah tel a ni tawh bawk. Custom aspect ratio eng pawh siam turin --bs-aspect-ratiovariable chu siam danglam rawh ..ratio
Breaking a ni Tunah chuan “Screen reader” class chu “hmuh theiha thup” class a ni tawh .
- Sass file chu scss/helpers/_screenreaders.scssto atanga thlak a niscss/helpers/_visually-hidden.scss
- A hming thlak .sr-onlyleh .sr-only-focusableto .visually-hiddenleh.visually-hidden-focusable
- sr-only()A hming thlak leh mixins sr-only-focusable()to visually-hidden()leh visually-hidden-focusable().
bootstrap-utilities.csstunah chuan kan tanpuitute pawh a tel ve bawk. Custom build ah chuan helper te import a ngai tawh lo.

JavaScript hmangin a rawn lang ang

jQuery dependency a paih a , plugins te chu JavaScript pangngaia awm turin a ziak thar leh bawk.
Breaking a niTunah chuan JavaScript plugin zawng zawng data attribute te chu namespaced a ni tawh a, hei hian Bootstrap functionality chu third party leh nangmah ngeiin i code a thliar hrang thei a ni. Entirnan, kan hmang data-bs-toggleai chuan data-toggle.
Tunah chuan plugin zawng zawngin CSS selector chu argument hmasa ber atan an pawm thei tawh ang. Plugin instance thar siam nan DOM element emaw CSS selector dik tak emaw i pass thei ang:
```
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigBootstrap default Popper config chu argument anga pawmtu function angin pass theih a ni a, chutiang chuan he default configuration hi i duh angin i merge thei ang. Dropdown, popovers, leh tooltips-ah te a hman theih.
Default value chu fallbackPlacementsPopper ['top', 'right', 'bottom', 'left']elements dahna tha zawk atan tih a ni. Dropdown, popovers, leh tooltips-ah te a hman theih.
Public static method atanga underscore tihbo a ni a, _getInstance()→ getInstance().