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

v5 ah migrate a ni

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

He page ah hian

v5.2.0 a ni

Design thar a ni

Bootstrap v5.2.0 hian project pumpuiah component leh property tlemte tan design update fiah lo tak a nei a, a langsar zual chu button leh form control-a value tihthianghlim hmanginborder-radius a ni Kan documentation pawh homepage thar, sidebar section hrang hrang collapse tawh lo docs layout awlsam zawk, Bootstrap Icons entirnan langsar zawk nen update a ni bawk.

CSS variable tam zawk a awm

CSS variable hmang turin kan component zawng zawng kan update vek tawh. Sass hian engkim a la underpin laiin, component tinte chu component base class-a CSS variable awmte dah turin update a ni a (eg, .btn), Bootstrap chu real-time customization tam zawk a siamsak thei a ni. A hnua release turteah chuan CSS variable kan hman dan hi kan layout, form, helper, leh utilities-ah te kan tizau zel ang. Component tina CSS variable awmte chu an documentation page hrang hrangah chhiar belh rawh.

Kan CSS variable hman dan hi Bootstrap 6 thlengin a tling lo deuh ang a, hengte hi across the board-ah a taka kalpui kan duh laiin, breaking changes thlen theihna risk an nei a ni. Entirnan, kan source code-a setting hian eng emaw chhan vanga $alert-border-width: var(--bs-border-width)i tih a nih chuan i code-a Sass awm thei chu a tichhia a ni.$alert-border-width * 2

Chutiang a nih avang chuan a theihna apiangah CSS variable tam zawk lam kan pan chhunzawm zel dawn a, mahse v5-ah hian kan implementation hi a tlem deuh thei tih hre reng ang che.

Thar_maps.scss

Bootstrap v5.2.0 chuan Sass file thar a rawn siam chhuak a, _maps.scss. Sass map engemaw zat a pull chhuak a, _variables.scsschu chu original map-a update-te chu secondary map-a tihzauh a nih lohna hmuna chinfel a ni. Entirnan, updates to chu , key customization workflows a tichhia a, $theme-colorstheme map dangte chungah hman a ni lo . $theme-colorsA tawi zawngin, Sass hian limitation a nei a, chutah chuan default variable emaw map emaw hman a nih tawh chuan update theih a ni lo. CSS variable dang siamna atana hman a nih chuan CSS variable-ah pawh hetiang chiah hian tlakchhamna a awm a ni.

Hei vang hian Bootstrap-a variable customizations te chu @import "functions", hnuah @import "variables"leh kan import stack dang zawng zawngah a lo kal a ngai a ni. Sass map-ah pawh chutiang bawk chu a ni—default-te chu an hman hmain i override hmasa tur a ni. A hnuaia map te hi a tharah sawn a ni tawh _maps.scss:

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

Tunah chuan i custom Bootstrap CSS builds te chu maps import hranpa nen hetiang hian a awm tur a ni.

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

Utilities thar a awm bawk

Hrilhfiahna dang a awm bawk

  • $enable-container-classesOption thar a rawn luh tir. — Tunah chuan experimental CSS Grid layout-a kan opt hunah chuan .container-*class te chu a la compile reng dawn a, he option hi false. Container te pawh tunah chuan an gutter value an vawng reng tawh bawk.

  • Tunah chuan Offcanvas component hian responsive variation a nei tawh a ni . Original .offcanvasclass chu a danglam lo—viewport zawng zawngah content a thup vek a ni. A chhanna tur chuan chu .offcanvasclass chu eng .offcanvas-{sm|md|lg|xl|xxl}class-ah pawh thlak rawh.

  • Tunah chuan table divider thicker zawkte chu opt-in an ni tawh. — Table group inkara border thicker leh override harsa zawk chu kan paih a, optional class i apply theih ah kan sawn a .table-group-divider, Entirnan table docs ah hian en rawh.

  • Scrollspy chu Intersection Observer API hmang turin ziah thar a ni tawh a, chu chu relative parent wrapper, deprecatesoffsetconfig, leh thil dang tam tak i mamawh tawh lo tihna a ni. I Scrollspy implementation te chu an nav highlighting ah a dik zawk leh a inmil zawk nan zawng rawh.

  • Tunah chuan Popovers leh tooltips te hian CSS variable an hmang ta a ni. CSS variable thenkhat chu an Sass counterpart te hnen atangin update an ni a, chu chuan variable awm zat tihtlem a ni. Chuvang chuan he release-ah hian variable pathum deprecated a ni tawh a: $popover-arrow-color, $popover-arrow-outer-color, leh $tooltip-arrow-color.

  • Ṭanpuitu thar a awm belh bawk .text-bg-{color}. .text-*Mimal leh .bg-*utilities setting ai chuan , tunah chuan .text-bg-*helpersbackground-color hmangin a with contrasting foreground set theih a ni tawh colorang.

  • .form-check-reverseLabel leh a kaihhnawih checkbox/radio awm dan tur flip turin modifier dah belh a ni.

  • Class thar kaltlangin table-ah striped column support a dah belh bawk ..table-striped-columns

Hrilhfiahna list kimchang chu GitHub-a v5.2.0 project en rawh .

v5.1.0 a ni

  • CSS Grid layout atan experimental support a awm belh bawk . — Hei hi hna thawh mek a ni a, production hman theih turin a la inpeih lo a, mahse Sass hmangin feature thar hi i thlang thei ang. Enable tur chuan default grid kha disable la, setting $enable-grid-classes: falsehmangin CSS Grid chu enable $enable-cssgrid: truerawh .

  • Offcanvas support turin navbars update a ni. — Navbar eng pawhah offcanvas drawer dah la , responsive .navbar-expand-*class te leh offcanvas markup thenkhat te nen.

  • Placeholder component thar dah belh a ni . — Kan component thar ber, i site emaw app emaw-a thil a la load reng tih hriattirna atana ṭanpui turin thu dik tak aiah temporary block pek theihna kawng.

  • Tunah chuan collapse plugin hian horizontal collapsing a support tawh a ni . — Add .collapse-horizontalto your .collapseto collapse a nih widthchuan height. Browser repainting tih loh chu a min-heightemaw height.

  • Stack thar leh vertical rule helper thar a rawn dah belh bawk. — Stack hmanga custom layout siam rang turin flexbox property tam tak rang takin apply rawh . Horizontal ( .hstack) leh vertical ( .vstack) stack zingah thlang rawh. Helper thar<hr> nen element ang chi vertical divider te dah belh rawh ..vr

  • Global :rootCSS variable thar a dah belh bawk. — Style :rootcontrol na tur level-ah CSS variable thar engemaw zat dah belh . <body>A tam zawk chu hnathawh mek a ni a, kan utilities leh component hrang hrangah te pawh a awm a, mahse tunah chuan Customize section-ah CSS variable te chhiar la .

  • CSS variable hman theih turin color leh background utility te siamthat a ni a, text opacity leh background opacity utility thar a dah belh bawk. — .text-* leh .bg-*utilities te chu CSS variable leh rgba()color value hmangin siam a ni tawh a, awlsam takin opacity utility thar hmangin utility eng pawh i siam thei tawh bawk.

  • Kan components te customize dan tur entir nan snippet entirnan thar kan dah belh bawk. — Kan Snippets entirnan thar hmang hian customized component leh design pattern hman tlanglawn dangte hman turin inpeih rawh . Footer , dropdown , list group , leh modal te a awm bawk .

  • Popper leh tooltips atanga positioning style hman lohte paih chhuah a ni a, hengte hi Popper chauhin a buaipui a nih avangin. $tooltip-margina deprecated tawh a, a nullkal zelnaah set a ni tawh bawk.

Thu belhchian dawl zawk i duh em? v5.1.0 blog post hi chhiar la.

Hei hi! Bootstrap 5 kan release lian ber hmasa ber, v5.0.0-a inthlak danglamna te chu a hnuaiah hian tarlan a ni. A chunga kan tarlan ang hian additional changes te hi an lantir lo.

Innghahna te

  • jQuery chu a thlak ta.
  • 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 pem lut 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()color space 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 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-control.custom-checkboxa ni tawh .form-checka .
    • .custom-control.custom-custom-radioa ni tawh .form-checka .
    • .custom-control.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.

  • Form controls hman tawh loh chu heighta theih chuan fixed a ni a, chu ai chuan deferring to min-heightchu customization leh component dangte nena inmilna tihchangtlun nan 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

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

  • 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 nei rawh).

  • 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 .

  • 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 &times;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-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 data-bs-popper="static"dropdown positioning chu static a nih laiin, a nih loh leh dropdown chu navbar-a a awm laiin attribute set an nei tawh a ni. 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

List group a awm

  • , , , leh class-ah variable nullthar dah belh a ni.font-sizefont-weightcolor:hover color.nav-link
  • Breaking a niTunah chuan Navbars hian container chhungah a mamawh tawh (spacing mamawhna leh CSS mamawhna nasa taka tih awlsam nan).
  • Breaking a ni.activeClass chu s-ah hman theih a ni tawh lo va , .nav-items-ah direct-a hman tur a ni .nav-link.

Offcanvas ah a awm

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%

  • Horizontal emaw vertical emaw atanga absolute/fixed positioned elements te center ah new .translate-middle-x& utilities 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 chu 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:

    const modal = new bootstrap.Modal('#myModal')
const 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().