Buuka ku bigambo ebikulu Buuka ku docs navigation
in English

Okusenguka okudda ku v5

Londoola era weetegereze enkyukakyuka mu fayiro z'ensibuko ya Bootstrap, ebiwandiiko, n'ebitundu okukuyamba okusenguka okuva ku v4 okudda ku v5.

Ku muko guno

Ebisinziirwako

  • Yasuuliddwa jQuery.
  • Yalongoosebwa okuva ku Popper v1.x okudda ku Popper v2.x.
  • Yakyusa Libsass ne Dart Sass nga Sass compiler yaffe eyaweebwa Libsass yali efuuse deprecated.
  • Yasenguka okuva e Jekyll okudda e Hugo olw'okuzimba ebiwandiiko byaffe

Obuwagizi bwa Browser

  • Yasuula Internet Explorer 10 ne 11
  • Esuuliddwa Microsoft Edge < 16 (Edge ey'edda) .
  • Yasuuliddwa Firefox < 60
  • Safari eyasuuliddwa < 12
  • Yasuuliddwa iOS Safari < 12
  • Chrome eyasuuliddwa < 60

Ebiwandiiko bikyuka

  • Olupapula lw'awaka oluzzeemu okukolebwa, ensengeka y'ebiwandiiko, n'ekiwandiiko wansi.
  • Yayongeddeko ekitabo ekipya eky'Ebipapula .
  • Yayongeddeko ekitundu ekipya Customize , okudda mu kifo kya v4's Theming page , n'ebipya ebikwata ku Sass, enkola z'okusengeka ensi yonna, ensengeka za langi, enkyukakyuka za CSS, n'ebirala.
  • Yaddamu okutegeka ebiwandiiko byonna ebya foomu mu kitundu ekipya ekya Foomu , okumenyaamenya ebirimu mu mpapula ezisinga okussa essira.
  • Mu ngeri y’emu, yalongoosa ekitundu Layout , okusobola okufuula ebirimu mu grid mu ngeri entegeerekeka obulungi.
  • Omuko gw’ekitundu gwakyusibwa erinnya ne gufuuka “Navs & Tabs”.
  • Omuko gwakyusibwa erinnya ne gufuuka “Checks & radios”.
  • Yaddamu okukola navbar era ne twongerako subnav empya okusobola okwanguyiza okutambula ku mikutu gyaffe ne docs versions.
  • Yayongeddeko enkola empya eya kiiboodi ey'ekifo ky'okunoonya: Ctrl + /.

Sass nga bwe kiri

  • Tusuddewo okugatta kwa maapu kwa Sass okusookerwako okwanguyiza okuggyawo emiwendo egy'enjawulo. Kuuma mu birowoozo kati olina okunnyonnyola emiwendo gyonna mu maapu za Sass nga $theme-colors. Laba engeri gy'okola ku maapu za Sass .

  • OkumenyaOkukyusa erinnya lya color-yiq()function n'enkyukakyuka ezikwatagana ku color-contrast()nga bwe kitakyakwatagana na YIQ colorspace. Laba #30168.

    • $yiq-contrasted-thresholdkikyusibwa erinnya ne kifuulibwa $min-contrast-ratio.
    • $yiq-text-darkera $yiq-text-lightnga zikyusibwa amannya ne zifuuka $color-contrast-darkne $color-contrast-light.

  • OkumenyaMedia query mixins parameters zikyuse olw'enkola esingako ensonga.

    • media-breakpoint-down()ekozesa ekifo eky'okumenya kyennyini mu kifo ky'okumenya okuddako (okugeza, media-breakpoint-down(lg)mu kifo ky'ebifo eby'okulaba media-breakpoint-down(md)eby'ebigendererwa ebitono okusinga lg).
    • Mu ngeri y’emu, parameter eyokubiri mu media-breakpoint-between()era ekozesa breakpoint yennyini mu kifo ky’okumenya okuddako (okugeza, media-between(sm, lg)mu kifo ky’ebifo eby’okulaba media-breakpoint-between(sm, md)ebigendererwa wakati smne lg).

  • OkumenyaGgyawo emisono gy'okukuba ebitabo $enable-print-stylesn'enkyukakyuka. Ebisulo by’okulaga okukuba ebitabo bikyaliwo. Laba #28339 .

  • OkumenyaDepped color(), theme-color(), ne gray()functions nga ziwagira enkyukakyuka. Laba #29083 .

  • OkumenyaEnkola eyakyusibwa erinnya theme-color-level()okutuuka color-level()era kati ekkiriza langi yonna gy’oyagala mu kifo kya $theme-colorlangi zokka. Laba #29083 Weegendereze: color-level() oluvannyuma yasuulibwa mu v5.0.0-alpha3.

  • OkumenyaYakyusibwa erinnya $enable-prefers-reduced-motion-media-queryera $enable-pointer-cursor-for-buttonseri $enable-reduced-motionn’okubeera $enable-button-pointersmu bufunze.

  • OkumenyaYaggyewo ekirungo kya bg-gradient-variant()mixin. Kozesa .bg-gradientekibiina okwongera gradients ku elements mu kifo kya .bg-gradient-*classes ezikoleddwa.

  • Okumenya Ggyawo mixins ezaali zikozesebwa emabegako:

    • hover, hover-focus, plain-hover-focus, nehover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(era yasuula ekibiina ky’omugaso ekikwatagana, .text-hide)
    • visibility()
    • form-control-focus()

  • Okumenyascale-color()Omulimu gukyusiddwa erinnya shift-color()okwewala okutomeragana n'omulimu gwa Sass yennyini ogw'okugerageranya langi.

  • box-shadowmixins kati zikkiriza nullemiwendo n'okugwa noneokuva mu nsonga eziwera. Laba #30394 .

  • Mixin border-radius()kati erina omuwendo ogusookerwako.

Enkola ya langi

  • Enkola ya langi eyakola ne color-level()era $theme-color-intervaln’eggyibwawo n’ewagira enkola ya langi empya. Byonna lighten()n'emirimu darken()mu codebase yaffe bikyusibwamu tint-color()ne shade-color(). Emirimu gino gijja kutabula langi oba enjeru oba enjeru mu kifo ky’okukyusa obutangaavu bwayo ku muwendo ogugere. The shift-color()will either tint oba shade a color okusinziira ku oba weight parameter yaayo positive oba negative. Laba #30622 okumanya ebisingawo.

  • Yayongeddeko langi empya n’ebisiikirize ku buli langi, okuwa langi mwenda ez’enjawulo ku buli langi ey’omusingi, nga enkyukakyuka za Sass empya.

  • Okwawukana kwa langi okulongooseddwa. Bumped color contrast ratio okuva ku 3:1 okutuuka ku 4.5:1 ne updated langi za bbulu, green, cyan, ne pink okukakasa WCAG 2.1 AA contrast. Era yakyusa langi yaffe eya langi okuva $gray-900ku $black.

  • Okusobola okuwagira enkola yaffe eya langi, twongeddeko enkola empya tint-color()n’emirimu shade-color()okutabula langi zaffe mu ngeri esaanidde.

Ebipya ebifulumiziddwa mu giridi

  • Ekifo ekipya eky'okumenyawo! xxlYayongeddeko breakpoint empya for 1400pxand up. Tewali nkyukakyuka mu bifo ebirala byonna eby’okumenya.

  • Emifulejje egyalongooseddwa. Gutters kati ziteekebwa mu rems, era nga nfunda okusinga v4 ( 1.5rem, oba nga 24px, wansi okuva 30px). Kino kikwataganya emidumu gyaffe egya grid n’ebikozesebwa byaffe eby’okuteeka ebanga.

    • Yayongeddeko ekibiina ekipya eky’emidumu ( .g-*, .gx-*, ne .gy-*) okufuga emidumu egy’okwesimbye/ egy’okwesimbye, emifulejje egy’okwesimbye, n’emidumu egy’okwesimbye.
    • OkumenyaYakyusibwa erinnya .no-guttersokutuuka .g-0okukwatagana ne gutter utilities empya.

  • Ennyiriri tezikyakola position: relative, kale oyinza okwongera .position-relativeku bintu ebimu okuzzaawo enneeyisa eyo.

  • OkumenyaYasuula kiraasi eziwerako ezatera .order-*okugenda nga tezikozesebwa. Kati tuwaayo .order-1to .order-5out of the box yokka.

  • OkumenyaYasudde .mediaekitundu nga bwe kiyinza okwanguyirwa okukoppa n'ebikozesebwa. Laba #28265 n'olupapula lwa flex utilities okufuna ekyokulabirako .

  • Okumenya bootstrap-grid.csskati ekola box-sizing: border-boxku mpagi yokka mu kifo ky'okuddamu okuteekawo global box-sizing. Mu ngeri eno, emisono gyaffe egya grid gisobola okukozesebwa mu bifo ebisingawo awatali kutaataaganyizibwa.

  • $enable-grid-classestekyalemesa omulembe gwa kiraasi za konteyina. Laba #29146.

  • Yalongoosa make-colmixin okubeera default ku mpagi ezenkanankana awatali sayizi eragiddwa.

Ebirimu, Reboot, n’ebirala

  • RFS kati ekoleddwa nga bwe kibadde. Emitwefont-size()egy'okukozesa mixin gijja kulongoosa gyabwefont-sizeokutuuka ku minzaani n'ekifo eky'okulaba. Ekintu kino emabegako kyali kya opt-in ne v4.

  • OkumenyaYalongoosa ensengeka yaffe ey’okulaga okukyusa $display-*enkyukakyuka zaffe era ne $display-font-sizestussaako maapu ya Sass. Era yaggyawo $display-*-weightenkyukakyuka ssekinnoomu ku s emu $display-font-weightera n’atereezebwa font-size.

  • .display-*Yayongeddeko sayizi z’emitwe emipya bbiri , .display-5ne .display-6.

  • Enkolagana ziteekebwako akabonero wansi nga bwe kibadde (si ku hover yokka), okuggyako nga ziri kitundu kya bitundu ebitongole.

  • Emmeeza eziddamu okukolebwa okuzza obuggya emisono gyazo n’okuddamu okuzizimba n’enkyukakyuka za CSS okusobola okufuga ennyo sitayiro.

  • OkumenyaEmmeeza eziteekeddwa mu kisenge tezikyasikira sitayiro.

  • Okumenya .thead-lightera .thead-darkzisuulibwa nga ziwagira .table-*ebika by’enjawulo ebiyinza okukozesebwa ku bintu byonna eby’emmeeza ( thead, tbody, tfoot, tr, thne td).

  • OkumenyaMixin table-row-variant()ekyusibwa erinnya okutuuka table-variant()era ekkiriza parameters 2 zokka: $color(erinnya lya langi) ne $value(color code). Langi y’ensalosalo ne langi z’ennyiriri zibalirirwa mu ngeri ey’otoma okusinziira ku nkyukakyuka z’ensonga z’emmeeza.

  • Gabanya enkyukakyuka za padding ez'obutoffaali bw'emmeeza mu -yne -x.

  • OkumenyaYasuula .pre-scrollableekibiina. Laba #29135

  • Okumenya .text-*utilities tezikyagattako hover ne focus states ku links. .link-*ebibiina by’abayambi bisobola okukozesebwa mu kifo ky’ekyo. Laba #29267

  • OkumenyaYasuula .text-justifyekibiina. Laba #29793

  • Okumenya <hr>elements kati zikozesa heightmu kifo ky'okuwagira borderobulungi sizeattribute. Kino era kisobozesa okukozesa ebikozesebwa mu kukola padding okukola ebigabanya ebinene (okugeza, <hr class="py-1">).

  • Reset default horizontal padding-lefton <ul>ne <ol>elements okuva ku browser default 40pxokudda ku 2rem.

  • Added $enable-smooth-scroll, ekola scroll-behavior: smoothmu nsi yonna —okuggyako abakozesa okusaba okukendeeza ku ntambula nga bayita mu prefers-reduced-motionkubuuza emikutu. Laba #31877

RTL

  • Horizontal direction specific variables, utilities, ne mixins byonna bikyusiddwa amannya okukozesa eby’obugagga ebitegeerekeka nga ebyo ebisangibwa mu flexbox layouts—okugeza, startne endmu kifo kya leftne right.

Ffoomu

  • Yayongeddeko ffoomu empya ezitengejja! Tutumbula ekyokulabirako kya Floating labels ku bitundu bya ffoomu ebiwagirwa mu bujjuvu. Laba omuko omupya ogwa Floating labels.

  • Okumenya Ebintu ebigattibwa mu ffoomu enzaaliranwa n’ey’ennono. Checkboxes, radios, selects, n'ebiyingizibwa ebirala ebyalina native ne custom classes mu v4 bibadde bigatta. Kati kumpi ebintu byaffe byonna ebya ffoomu biba bya custom ddala, ebisinga tebyetaagisa HTML eya custom.

    • .custom-checkkati ye .form-check.
    • .custom-check.custom-switchkati ye .form-check.form-switch.
    • .custom-selectkati ye .form-select.
    • .custom-fileera .form-filezikyusiddwa ne zifuulibwa emisono egy’ennono waggulu ku .form-control.
    • .custom-rangekati ye .form-range.
    • Yasuuliddwa enzaalwa .form-control-fileera .form-control-range.

  • OkumenyaYasuulibwa .input-group-appendera .input-group-prepend. Kati osobola okumala okugattako buttons era .input-group-textnga abaana obutereevu ab'ebibinja by'okuyingiza.

  • The longstanding Missing border radius on input group with validation feedback bug esembayo okutereezebwa nga kwongerako .has-validationkiraasi ey'okugatta ku bibinja by'okuyingiza ebirina okukakasa.

  • Okumenya Yasuula ebibiina by'ensengeka ebikwata ku ffoomu ku nkola yaffe eya grid. Kozesa grid yaffe n'ebikozesebwa mu kifo kya .form-group, .form-row, oba .form-inline.

  • OkumenyaEbiwandiiko ebiwandiikibwako foomu kati byetaaga .form-label.

  • Okumenya .form-textno longer sets display, okukusobozesa okukola mu layini oba okuziyiza ekiwandiiko ky'obuyambi nga bw'oyagala nga okyusa ekintu kya HTML kyokka.

  • Ebifaananyi by'okukakasa tebikyakozesebwa ku <select>s ne multiple.

  • Fayiro za Sass ez'ensibuko zizzeemu okusengekebwa wansi wa scss/forms/, nga mw'otwalidde n'emisono gy'ebibinja by'okuyingiza.

Ebitundu ebikola omubiri

  • Emiwendo paddingegy’omuggundu egy’okulabula, ebikuta by’omugaati, kaadi, ebikka wansi, ebibinja by’olukalala, modals, popovers, n’ebikozesebwa okusinziira ku $spacernkyukakyuka yaffe. Laba #30564 .

Accordion

Okulabula

Baagi za Baagi

  • OkumenyaYasuula .badge-*kiraasi zonna eza langi ez'ebikozesebwa eby'emabega (okugeza, kozesa .bg-primarymu kifo kya .badge-primary).

  • OkumenyaEsuuliddwa .badge-pill—kozesa ekintu .rounded-pilleky’omugaso mu kifo ky’ekyo.

  • OkumenyaGgyawo emisono gya hover ne focus for <a>ne <button>elements.

  • Okwongera ku padding ezisookerwako ku badge okuva ku .25em/ .5emokutuuka ku .35em/ .65em.

  • Yanguyiza endabika eya bulijjo ey'ebikuta by'omugaati ng'aggyawo padding, background-color, ne border-radius.

  • Yayongeddeko ekintu ekipya eky'ennono ekya CSS --bs-breadcrumb-dividerokusobola okulongoosa okwangu nga tekyetaagisa kuddamu kukungaanya CSS.

Ebikondo ebiyitibwa Buttons

  • Okumenya Toggle buttons , nga zirina checkboxes oba radios, tezikyetaaga JavaScript era zirina markup empya. Tetukyetaaga elementi ya kuzinga, twongerako.btn-checkku<input>, ne tugigatta ne.btnkiraasi zonna ku<label>. Laba #30650 . Docs za kino zivudde ku mukutu gwaffe ogwa Buttons okudda ku kitundu ekipya ekya Forms.

  • Okumenya Yasuuliddwa .btn-blockolw’ebikozesebwa. Mu kifo ky’okukozesa .btn-blockku .btn, zingako buttons zo .d-gridne n’ekintu .gap-*ekiyamba okuziteeka mu bbanga nga bwe kyetaagisa. Kyusa ku kiraasi eziddamu okufuna obuyinza obusingako ku zo. Soma docs okufuna ebyokulabirako ebimu.

  • Updated our button-variant()ne button-outline-variant()mixins okuwagira parameters endala.

  • Butaamu ezitereezeddwa okukakasa nti enjawulo yeeyongedde ku hover ne active states.

  • Butaamu ezilema kati zirina pointer-events: none;.

Kaadi

  • OkumenyaYagwa .card-deckmu favor ya grid yaffe. Zinga kaadi zo mu bibiina by’ennyiriri era osseeko ekintu ekizadde .row-cols-*okuddamu okukola ddeeke za kaadi (naye ng’olina obuyinza obusingawo ku kulaganya okuddamu).

  • OkumenyaYasuulibwa .card-columnsng’awagira Masonry. Laba #28922 .

  • Okumenya Replaced the .card based accordion with a new Accordion component.

  • Added new .carousel-dark variant for dark text, controls, and indicators (great for lighter backgrounds).

  • Replaced chevron icons for carousel controls with new SVGs from Bootstrap Icons.

Close button

  • Breaking Renamed .close to .btn-close for a less generic name.

  • Close buttons now use a background-image (embedded SVG) instead of a &times; in the HTML, allowing for easier customization without the need to touch your markup.

  • Added new .btn-close-white variant that uses filter: invert(1) to enable higher contrast dismiss icons against darker backgrounds.

Collapse

  • Removed scroll anchoring for accordions.

  • Added new .dropdown-menu-dark variant and associated variables for on-demand dark dropdowns.

  • Added new variable for $dropdown-padding-x.

  • Darkened the dropdown divider for improved contrast.

  • Breaking All the events for the dropdown are now triggered on the dropdown toggle button and then bubbled up to the parent element.

  • Dropdown menus now have a data-bs-popper="static" attribute set when the positioning of the dropdown is static and data-bs-popper="none" when dropdown is in the navbar. This is added by our JavaScript and helps us use custom position styles without interfering with Popper’s positioning.

  • Breaking Dropped flip option for dropdown plugin in favor of native Popper configuration. You can now disable the flipping behavior by passing an empty array for fallbackPlacements option in flip modifier.

  • Dropdown menus can now be clickable with a new autoClose option to handle the auto close behavior. You can use this option to accept the click inside or outside the dropdown menu to make it interactive.

  • Dropdowns now support .dropdown-items wrapped in <li>s.

Jumbotron

List group

  • Added new null variables for font-size, font-weight, color, and :hover color to the .nav-link class.
  • Breaking Navbars now require a container within (to drastically simplify spacing requirements and CSS required).

Offcanvas

Pagination

  • Pagination links now have customizable margin-left that are dynamically rounded on all corners when separated from one another.

  • Added transitions to pagination links.

Popovers

  • Breaking Renamed .arrow to .popover-arrow in our default popover template.

  • Renamed whiteList option to allowList.

Spinners

  • Spinners now honor prefers-reduced-motion: reduce by slowing down animations. See #31882.

  • Improved spinner vertical alignment.

Toasts

  • Toasts can now be positioned in a .toast-container with the help of positioning utilities.

  • Changed default toast duration to 5 seconds.

  • Removed overflow: hidden from toasts and replaced with proper border-radiuss with calc() functions.

Tooltips

  • Breaking Renamed .arrow to .tooltip-arrow in our default tooltip template.

  • Breaking The default value for the fallbackPlacements is changed to ['top', 'right', 'bottom', 'left'] for better placement of popper elements.

  • Breaking Renamed whiteList option to allowList.

Utilities

  • Breaking Renamed several utilities to use logical property names instead of directional names with the addition of RTL support:

    • Renamed .left-* and .right-* to .start-* and .end-*.
    • Renamed .float-left and .float-right to .float-start and .float-end.
    • Renamed .border-left and .border-right to .border-start and .border-end.
    • Renamed .rounded-left and .rounded-right to .rounded-start and .rounded-end.
    • Renamed .ml-* and .mr-* to .ms-* and .me-*.
    • Renamed .pl-* and .pr-* to .ps-* and .pe-*.
    • Renamed .text-left and .text-right to .text-start and .text-end.

  • Breaking Disabled negative margins by default.

  • Added new .bg-body class for quickly setting the <body>’s background to additional elements.

  • Added new position utilities for top, right, bottom, and left. Values include 0, 50%, and 100% for each property.

  • Added new .translate-middle-x & .translate-middle-y utilities to horizontally or vertically center absolute/fixed positioned elements.

  • Added new border-width utilities.

  • Breaking Renamed .text-monospace to .font-monospace.

  • Breaking Removed .text-hide as it’s an antiquated method for hiding text that shouldn’t be used anymore.

  • Added .fs-* utilities for font-size utilities (with RFS enabled). These use the same scale as HTML’s default headings (1-6, large to small), and can be modified via Sass map.

  • Breaking Renamed .font-weight-* utilities as .fw-* for brevity and consistency.

  • Breaking Renamed .font-style-* utilities as .fst-* for brevity and consistency.

  • Added .d-grid to display utilities and new gap utilities (.gap) for CSS Grid and flexbox layouts.

  • Breaking Removed .rounded-sm and rounded-lg, and introduced a new scale of classes, .rounded-0 to .rounded-3. See #31687.

  • Added new line-height utilities: .lh-1, .lh-sm, .lh-base and .lh-lg. See here.

  • Moved the .d-none utility in our CSS to give it more weight over other display utilities.

  • Extended the .visually-hidden-focusable helper to also work on containers, using :focus-within.

Helpers

  • Breaking Responsive embed helpers have been renamed to ratio helpers with new class names and improved behaviors, as well as a helpful CSS variable.

    • Classes have been renamed to change by to x in the aspect ratio. For example, .ratio-16by9 is now .ratio-16x9.
    • We’ve dropped the .embed-responsive-item and element group selector in favor of a simpler .ratio > * selector. No more class is needed, and the ratio helper now works with any HTML element.
    • The $embed-responsive-aspect-ratios Sass map has been renamed to $aspect-ratios and its values have been simplified to include the class name and the percentage as the key: value pair.
    • CSS variables are now generated and included for each value in the Sass map. Modify the --bs-aspect-ratio variable on the .ratio to create any custom aspect ratio.

  • Breaking “Screen reader” classes are now “visually hidden” classes.

    • Changed the Sass file from scss/helpers/_screenreaders.scss to scss/helpers/_visually-hidden.scss
    • Renamed .sr-only and .sr-only-focusable to .visually-hidden and .visually-hidden-focusable
    • Renamed sr-only() and sr-only-focusable() mixins to visually-hidden() and visually-hidden-focusable().

  • bootstrap-utilities.css now also includes our helpers. Helpers don’t need to be imported in custom builds anymore.

JavaScript

  • Dropped jQuery dependency and rewrote plugins to be in regular JavaScript.

  • Breaking Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use data-bs-toggle instead of data-toggle.

  • All plugins can now accept a CSS selector as the first argument. You can either pass a DOM element or any valid CSS selector to create a new instance of the plugin:

    var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

  • popperConfig can be passed as a function that accepts the Bootstrap’s default Popper config as an argument, so that you can merge this default configuration in your way. Applies to dropdowns, popovers, and tooltips.

  • The default value for the fallbackPlacements is changed to ['top', 'right', 'bottom', 'left'] for better placement of Popper elements. Applies to dropdowns, popovers, and tooltips.

  • Removed underscore from public static methods like _getInstance() → getInstance().