Миграција на в5

Пратите и прегледајте промене у изворним датотекама Боотстрап-а, документацији и компонентама које ће вам помоћи да пређете са в4 на в5.

На овој страници

в5.2.0

Освежен дизајн

Боотстрап в5.2.0 садржи суптилно ажурирање дизајна за неколико компоненти и својстава у целом пројекту, пре свега кроз префињене border-radiusвредности на дугмадима и контролама обрасца . Наша документација је такође ажурирана новом почетном страницом, једноставнијим изгледом докумената који више не сажима делове бочне траке и истакнутијим примерима Боотстрап икона .

Више ЦСС променљивих

Ажурирали смо све наше компоненте да користе ЦСС променљиве. Иако Сасс и даље стоји у основи свега, свака компонента је ажурирана тако да укључује ЦСС променљиве на основне класе компоненти (нпр. .btn), што омогућава више прилагођавања Боотстрапа у реалном времену. У наредним издањима, наставићемо да ширимо нашу употребу ЦСС променљивих у наш изглед, обрасце, помоћнике и услужне програме. Прочитајте више о ЦСС варијаблама у свакој компоненти на њиховим одговарајућим страницама документације.

Наша употреба ЦСС променљиве ће бити помало непотпуна све до Боотстрап 6. Иако бисмо волели да их у потпуности применимо у целости, постоји ризик да изазову неограничене промене. На пример, подешавање $alert-border-width: var(--bs-border-width)у нашем изворном коду разбија потенцијални Сасс у вашем сопственом коду ако сте то радили $alert-border-width * 2из неког разлога.

Као такви, где год је то могуће, наставићемо да тежимо ка већем броју ЦСС варијабли, али имајте на уму да наша примена може бити мало ограничена у в5.

Нова`_maps.scss`

Боотстрап в5.2.0 је представио нову Сасс датотеку са _maps.scss. Извлачи неколико Сасс мапа да _variables.scssби решио проблем где ажурирања оригиналне мапе нису примењена на секундарне мапе које их проширују. На пример, ажурирања се $theme-colorsнису примењивала на друге мапе тема које су се ослањале на $theme-colors, што је прекинуло кључне токове рада прилагођавања. Укратко, Сасс има ограничење где се једном када се користи подразумевана променљива или мапа , не може ажурирати. Постоји сличан недостатак са ЦСС варијаблама када се користе за састављање других ЦСС променљивих.

Због тога прилагођавања променљивих у Боотстрапу морају да дођу после @import "functions", али пре @import "variables"и остатка нашег увозног стека. Исто важи и за Сасс мапе — морате да заобиђете подразумеване вредности пре него што се навикну. Следеће мапе су премештене у нову _maps.scss:

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

Ваше прилагођене Боотстрап ЦСС верзије сада би требало да изгледају отприлике овако са засебним увозом мапа.

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

Нови услужни програми

Проширени font-weightуслужни програми за укључивање .fw-semiboldполуподебљаних фонтова.
Проширени border-radiusуслужни програми да би укључили две нове величине .rounded-4и .rounded-5, за више опција.

Додатне измене

Уведена нова $enable-container-classesопција. — Сада када се одлучите за експериментални ЦСС Грид изглед, .container-*класе ће и даље бити компајлиране, осим ако је ова опција подешена на false. Контејнери такође сада задржавају своје вредности олука.
Компонента Оффцанвас сада има прилагодљиве варијације . Оригинална .offcanvasкласа остаје непромењена—сакрива садржај у свим оквирима за приказ. Да бисте га учинили прилагодљивим, промените ту .offcanvasкласу у било коју .offcanvas-{sm|md|lg|xl|xxl}класу.
Дебљи разделници столова су сада доступни. — Уклонили смо дебљу и коју је теже заобићи границу између група табела и преместили је у опциону класу коју можете применити, .table-group-divider. Погледајте документе табеле за пример.
Сцроллспи је поново написан да користи Интерсецтион Обсервер АПИ , што значи да вам више нису потребни релативни родитељски омоти, застарелаoffsetконфигурација и још много тога. Потражите да ли ваше Сцроллспи имплементације буду тачније и доследније у њиховом навигационом истицање.
Поповерс и тоолтипс сада користе ЦСС променљиве. Неке ЦСС варијабле су ажуриране од својих Сасс колега да би се смањио број варијабли. Као резултат тога, три варијабле су застареле у овом издању: $popover-arrow-color, $popover-arrow-outer-color, и $tooltip-arrow-color.
Додати нови .text-bg-{color}помоћници. Уместо постављања појединачних .text-*и .bg-*услужних програма, сада можете да користите помоћнике.text-bg-* да бисте поставили а background-colorса контрастним предњим планомcolor .
Додан .form-check-reverseје модификатор за окретање редоследа ознака и повезаних поља за потврду/радио.
Додата подршка пругастих колона у табеле преко нове .table-striped-columnsкласе.

За комплетну листу промена, погледајте пројекат в5.2.0 на ГитХуб-у .

в5.1.0

Додата експериментална подршка за ЦСС Грид изглед . — Ово је рад у току и још увек није спреман за производну употребу, али можете се укључити у нову функцију преко Сасс-а. Да бисте је омогућили, онемогућите подразумевану мрежу тако што ћете поставити $enable-grid-classes: falseи омогућити ЦСС мрежу подешавањем $enable-cssgrid: true.
Ажуриране навигационе траке да подржавају оффцанвас. — Додајте фиоке ван платна у било коју навигацијску траку са прилагодљивим .navbar-expand-*класама и неким ознакама ван платна.
Додата нова компонента чувара места . — Наша најновија компонента, начин да обезбедите привремене блокове уместо стварног садржаја који ће вам помоћи да укажете да се нешто још увек учитава на вашем сајту или апликацији.
Додатак Цоллапсе сада подржава хоризонтално сажимање . — Додајте .collapse-horizontalу свој .collapseда бисте скупили widthуместо height. Избегните пресликавање прегледача тако што ћете поставити min-heightили height.
Додати нови помоћници за стек и вертикална правила. — Брзо примените вишеструка својства флексбокса да бисте брзо креирали прилагођене распореде са стековима . Бирајте између хоризонталних ( .hstack) и вертикалних ( .vstack) група. Додајте вертикалне разделнике сличне <hr>елементима са новим .vrпомоћницима .
Додате нове глобалне :rootЦСС променљиве. — Додато неколико нових ЦСС варијабли на :rootниво за контролу <body>стилова. У припреми је још више, укључујући наше услужне програме и компоненте, али за сада прочитајте ЦСС променљиве у одељку Прилагоди .
Ревидирани су услужни програми за боје и позадину за коришћење ЦСС променљивих и додати нове услужне програме за непрозирност текста и непрозирност позадине . — .text-* и .bg-*услужни програми су сада направљени са ЦСС променљивим и rgba()вредностима боја, што вам омогућава да лако прилагодите било који услужни програм новим услужним програмима за непрозирност.
Додати су нови примери исечака који показују како да прилагодимо наше компоненте. — Извуците спремне за коришћење прилагођених компоненти и других уобичајених образаца дизајна са нашим новим примерима исечака . Укључује подножја , падајуће меније , групе листа и модале .
Уклоњени некоришћени стилови позиционирања из искачућих прозора и описа алата јер њима управља искључиво Поппер. $tooltip-marginје застарело и постављено nullу процесу.

Желите више информација? Прочитајте пост на блогу в5.1.0.

Хеј тамо! Промене нашег првог великог издања Боотстрап 5, в5.0.0, су документоване у наставку. Они не одражавају додатне промене приказане изнад.

Зависности

Избачен јКуери.
Надограђен са Поппер в1.к на Поппер в2.к.
Либсасс је замењен Дарт Сасс-ом јер је наш Сасс компајлер с обзиром да је Либсасс застарео.
Мигрирали смо са Џекила у Хуго ради израде наше документације

Подршка за претраживач

Избачени су Интернет Екплорер 10 и 11
Избачен Мицрософт Едге < 16 (Легаци Едге)
Одбачен Фирефок < 60
Одбачен Сафари < 12
Избачен иОС Сафари < 12
Одбачен Цхроме < 60

Промене у документацији

Редизајнирана почетна страница, изглед докумената и подножје.
Додат је нови водич за пакете .
Додан је нови одељак за прилагођавање , који замењује страницу Тхеминг в4 , са новим детаљима о Сасс-у, опцијама глобалне конфигурације, шемама боја, ЦСС варијаблама и још много тога.
Реорганизована је сва документација обрасца у нови одељак Обрасци , раздвајајући садржај на више фокусиране странице.
Слично, ажурирајте одељак Лаиоут , да бисте јасније приказали садржај мреже.
Страница компоненте „Навс“ је преименована у „Навс & Табс“.
Страница „Чекови“ је преименована у „Чекови и радио“.
Редизајнирали смо навигациону траку и додали нову поднав да бисмо олакшали обилажење наших веб локација и верзија докумената.
Додата нова пречица на тастатури за поље за претрагу: Ctrl + /.

Сасс

Одбацили смо подразумевано спајање Сасс мапа да бисмо олакшали уклањање сувишних вредности. Имајте на уму да сада морате да дефинишете све вредности у Сасс мапама као што је $theme-colors. Погледајте како да се носите са Сасс мапама .
Бреакингcolor-yiq()Функција и повезане варијабле су преименоване у color-contrast()јер више није повезана са ИИК простором боја. Погледајте #30168.
- $yiq-contrasted-thresholdје преименован у $min-contrast-ratio.
- $yiq-text-darkи $yiq-text-lightпреименовани су у $color-contrast-darkи $color-contrast-light.
БреакингПараметри миксина упита за медије су промењени ради логичнијег приступа.
- media-breakpoint-down()користи саму тачку прекида уместо следеће тачке прекида (нпр. media-breakpoint-down(lg)уместо media-breakpoint-down(md)циљних области приказа мањих од lg).
- Слично томе, други параметар у media-breakpoint-between()такође користи саму тачку прекида уместо следеће тачке прекида (нпр. media-between(sm, lg)уместо media-breakpoint-between(sm, md)циљаних прозора између smи lg).
БреакингУклоњени стилови штампања и $enable-print-stylesпроменљива. Часови за приказ штампања још увек постоје. Погледајте #28339 .
БреакингИспуштене color(), theme-color(), и gray()функције у корист променљивих. Погледајте #29083 .
БреакингФункција је преименована theme-color-level()у color-level()и сада прихвата било коју боју коју желите уместо само $theme-colorбоја. Видите #29083 Пази: color-level() касније је убачен у v5.0.0-alpha3.
БреакингПреименовано $enable-prefers-reduced-motion-media-queryи $enable-pointer-cursor-for-buttonsу $enable-reduced-motionи $enable-button-pointersради краткоће.
БреакингУклонио bg-gradient-variant()мешавину. Користите .bg-gradientкласу да додате градијенте елементима уместо генерисаних .bg-gradient-*класа.
Бреакинг Уклоњени претходно застарели миксини:
- hover, hover-focus, plain-hover-focus, иhover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(такође је избацио придружену класу корисности, .text-hide)
- visibility()
- form-control-focus()
Бреакингscale-color()Функција је преименована у shift-color()да би се избегла колизија са Сассовом сопственом функцијом скалирања боја.
box-shadowмиксини сада дозвољавају nullвредности и испадају noneиз више аргумената. Погледајте #30394 .
Микин border-radius()сада има подразумевану вредност.

Систем боја

Систем боја који је радио color-level()и $theme-color-intervalуклоњен је у корист новог система боја. Све lighten()и darken()функције у нашој бази кодова су замењене са tint-color()и shade-color(). Ове функције ће мешати боју са белом или црном уместо да мењају њену светлост за фиксну количину. Боја shift-color()ће или нијансирати или затамнити боју у зависности од тога да ли је њен параметар тежине позитиван или негативан. Погледајте #30622 за више детаља.
Додате нове нијансе и нијансе за сваку боју, обезбеђујући девет одвојених боја за сваку основну боју, као нове Сасс варијабле.
Побољшан контраст боја. Однос контраста боја је повећан са 3:1 на 4,5:1 и ажуриране плаве, зелене, цијан и розе боје да би се обезбедио ВЦАГ 2.1 АА контраст. Такође смо променили боју контраста боја са $gray-900на $black.
Да бисмо подржали наш систем боја, додали смо нове прилагођене tint-color()и shade-color()функције за одговарајуће мешање боја.

Ажурирања мреже

Нова тачка прекида! Додата нова xxlтачка прекида за 1400pxи навише. Нема промена у свим осталим тачкама прекида.
Побољшани олуци. Олуци су сада постављени у ремс, и ужи су од в4 ( 1.5rem, или око 24px, доле од 30px). Ово поравнава олуке нашег мрежног система са нашим услужним програмима за размак.
- Додата нова класа олука ( .g-*, .gx-*, и .gy-*) за контролу хоризонталних/вертикалних олука, хоризонталних олука и вертикалних олука.
- БреакингПреименовано .no-guttersу како .g-0би одговарало новим услужним програмима олука.
Колоне се више не position: relativeпримењују, па ћете можда морати да додате .position-relativeнеке елементе да бисте вратили то понашање.
БреакингНапустио неколико .order-*часова који су често остајали неискоришћени. Сада пружамо само .order-1ван .order-5кутије.
БреакингИзбачен је .mediaкомпонента јер се лако може реплицирати услужним програмима. Погледајте #28265 и страницу флек утилитиес за пример .
Бреакинг bootstrap-grid.cssсада се примењује само box-sizing: border-boxна колону уместо да се ресетује глобална величина оквира. На овај начин, наши стилови мреже се могу користити на више места без сметњи.
$enable-grid-classesвише не онемогућава генерисање класа контејнера. Погледајте #29146.
Миксин је make-colажуриран на подразумеване на једнаке колоне без одређене величине.

Садржај, поновно покретање итд

РФС је сада подразумевано омогућен. Наслови који користеfont-size()мешавину ће аутоматски прилагодити својеfont-sizeразмере са оквиром за приказ. Ова функција је раније била укључена у в4.
БреакингРемонтовали смо типографију екрана да бисмо заменили наше $display-*варијабле и $display-font-sizesСасс мапу. Такође су уклоњене појединачне $display-*-weightваријабле за један $display-font-weightи прилагођен font-sizeс.
Додате су две нове .display-*величине наслова .display-5и .display-6.
Везе су подразумевано подвучене (не само при лебдењу), осим ако нису део одређених компоненти.
Редизајниране табеле да освеже своје стилове и поново их саграде помоћу ЦСС променљивих за већу контролу над стилизовањем.
БреакингУгнежђене табеле више не наслеђују стилове.
Бреакинг .thead-lightи .thead-darkодбачени су у корист .table-*класа варијанти које се могу користити за све елементе табеле ( thead, tbody, tfoot, tr, thи td).
БреакингМиксин table-row-variant()је преименован у table-variant()и прихвата само 2 параметра: $color(име боје) и $value(код боје). Боја ивице и боје акцента се аутоматски израчунавају на основу променљивих фактора табеле.
Поделите променљиве за попуњавање ћелија табеле на -yи -x.
БреакингПао .pre-scrollableразред. Погледајте #29135
Бреакинг .text-*услужни програми више не додају стања лебдења и фокуса везама. .link-*уместо њих могу се користити помоћне класе. Погледајте #29267
БреакингПао .text-justifyразред. Погледајте #29793
Бреакинг <hr>елементи сада користе heightуместо borderза бољу подршку sizeатрибута. Ово такође омогућава коришћење услужних програма за попуњавање за креирање дебљих разделника (нпр. <hr class="py-1">).
Ресетујте подразумевано хоризонтално padding-leftна <ul>и <ol>елементе са подразумеваног прегледача 40pxна 2rem.
Додато $enable-smooth-scroll, што се примењује scroll-behavior: smoothглобално – осим за кориснике који траже смањено кретање кроз prefers-reduced-motionмедијски упит. Погледајте #31877

РТЛ

Променљиве, услужни програми и миксинови специфични за хоризонтални правац су преименовани да користе логичка својства попут оних у флексбокс распоредима—нпр. startи endуместо leftи right.

Формс

Додате нове плутајуће форме! Промовисали смо пример плутајућих ознака на потпуно подржане компоненте обрасца. Погледајте нову страницу са плутајућим ознакама.
Бреакинг Консолидовани изворни и прилагођени елементи обрасца. Поље за потврду, радио, избори и други улази који су имали изворне и прилагођене класе у в4 су консолидовани. Сада су скоро сви наши елементи обрасца потпуно прилагођени, већина без потребе за прилагођеним ХТМЛ-ом.
- .custom-control.custom-checkboxје сада .form-check.
- .custom-control.custom-custom-radioје сада .form-check.
- .custom-control.custom-switchје сада .form-check.form-switch.
- .custom-selectје сада .form-select.
- .custom-fileи .form-fileзамењени су прилагођеним стиловима на врху .form-control.
- .custom-rangeје сада .form-range.
- Отпуштено нативе .form-control-fileи .form-control-range.
БреакингИспуштено .input-group-appendи .input-group-prepend. Сада можете само да додате дугмад и .input-group-textкао директне потомке група за унос.
Дугогодишњи недостајући радијус границе на улазној групи са грешком за повратне информације о валидацији је коначно поправљен додавањем додатне .has-validationкласе улазним групама са валидацијом.
Бреакинг Избачене су класе распореда специфичне за форму за наш мрежни систем. Користите нашу мрежу и услужне програме уместо .form-group, .form-row, или .form-inline.
БреакингОзнаке обрасца сада захтевају .form-label.
Бреакинг .form-textвише не поставља display, што вам омогућава да креирате уметнути или блокирани текст помоћи по жељи само променом ХТМЛ елемента.
Контроле обрасца се више не користе фиксно heightкада је то могуће, већ се одлажу да min-heightби побољшале прилагођавање и компатибилност са другим компонентама.
Иконе за валидацију се више не примењују на <select>с са multiple.
Преуређене изворне Сасс датотеке под scss/forms/, укључујући стилове групе за унос.

Компоненте

Обједињене paddingвредности за упозорења, крушне мрвице, картице, падајуће меније, групе листа, модале, искачуће приказе и описе алата које се заснивају на нашој $spacerпроменљивој. Погледајте #30564 .

Хармоника

Додата нова компонента хармонике .

Алертс

Упозорења сада имају примере са иконама .
Уклоњени прилагођени стилови за <hr>с у сваком упозорењу јер већ користе currentColor.

Значке

БреакингИзбачене су све .badge-*класе боја за позадинске услужне програме (нпр. користите .bg-primaryуместо .badge-primary).
БреакингИспуштено — уместо тога .badge-pillкористите .rounded-pillуслужни програм.
БреакингУклоњени су стилови лебдења и фокуса за елементе <a>и <button>елементе.
Повећани подразумевани паддинг за значке од .25em/ .5emдо .35em/ .65em.

Хлебне мрвице

Поједностављени подразумевани изглед хлебних мрвица уклањањем padding, background-color, и border-radius.
Додато је ново прилагођено својство ЦСС-а --bs-breadcrumb-dividerза једноставно прилагођавање без потребе за поновним компајлирањем ЦСС-а.

Дугмад

Бреакинг Дугмад за пребацивање , са пољима за потврду или радијима, више не захтевају ЈаваСцрипт и имају нове ознаке. Више нам није потребан елемент омотача, додајте.btn-checkга у<input>, и упарите га са било којом.btnкласом на<label>. Погледајте #30650 . Документи за ово су премештени са наше странице Дугмад у нови одељак Обрасци.
Бреакинг Отпуштено .btn-blockза комуналије. Уместо да користите .btn-blockна .btn, умотајте дугмад са .d-gridи .gap-*услужним програмом да их размакнете по потреби. Пребаците се на прилагодљиве класе за још већу контролу над њима. Прочитајте документе за неке примере.
Ажурирани су наши button-variant()и button-outline-variant()миксинови да би подржали додатне параметре.
Ажурирана дугмад да би се обезбедио повећан контраст при лебдењу и активним стањима.
Онемогућена дугмад сада имају pointer-events: none;.

Цард

БреакингПао .card-deckу корист наше мреже. Умотајте своје картице у класе колона и додајте родитељски .row-cols-*контејнер да бисте поново креирали шпилове картица (али са већом контролом над одговарајућим поравнањем).
БреакингОтпао .card-columnsу корист масонерије. Погледајте #28922 .
БреакингЗамењена .cardхармоника са новом компонентом хармонике .

Вртешка

Додата је нова .carousel-darkваријанта за тамни текст, контроле и индикаторе (одлично за светлије позадине).
Замењене иконе шеврона за контроле вртешке са новим СВГ-овима из Боотстрап Ицонс .

Дугме за затварање

БреакингПреименовано .closeу .btn-closeза мање генерички назив.
Дугмад за затварање сада користе background-image(уграђени СВГ) уместо а ×у ХТМЛ-у, што омогућава лакше прилагођавање без потребе за додиривањем ваше ознаке.
Додата је нова .btn-close-whiteваријанта која filter: invert(1)омогућава већи ко��траст икона за одбацивање на тамнијој позадини.

Колапс

Уклоњено сидрење за хармонике.

Падајући мени

Додата је нова .dropdown-menu-darkваријанта и повезане варијабле за тамне падајуће меније на захтев.
Додата нова променљива за $dropdown-padding-x.
Затамњен падајући разделник ради побољшаног контраста.
БреакингСви догађаји за падајући мени се сада покрећу на дугмету за пребацивање падајућег менија, а затим се приказују у облачићима до надређеног елемента.
Падајући менији сада имају data-bs-popper="static"подешен атрибут када је позиционирање падајућег менија статично или је падајући мени на навигационој траци. Ово додаје наш ЈаваСцрипт и помаже нам да користимо прилагођене стилове положаја без мешања у Поперово позиционирање.
БреакингИзбачена flipопција за падајући додатак у корист матичне Поппер конфигурације. Сада можете да онемогућите понашање окретања тако што ћете проследити празан низ за fallbackPlacementsопцију у модификатору флип .
Падајући менији сада могу да се кликну са новом autoCloseопцијом за управљање понашањем аутоматског затварања . Ову опцију можете користити да прихватите клик унутар или изван падајућег менија како бисте га учинили интерактивним.
Падајући мени сада подржавају .dropdown-itemс умотане у <li>с.

Јумботрон

БреакингИзбачен је јумботрон компонента јер се може реплицирати услужним програмима. Погледајте наш нови Јумботрон пример за демо.

Група листа

Додан је нови .list-group-numberedмодификатор групама листе.

Навигације и картице

Додате нове nullпроменљиве за font-size, font-weight, color, и :hover colorу .nav-linkкласу.

Навбарс

БреакингТраке за навигацију сада захтевају контејнер унутар (да би се драстично поједноставили захтеви за размаке и потребан ЦСС).
БреакингКласа .activeсе више не може применити на .nav-itemс, мора се применити директно на .nav-linkс.

Оффцанвас

Додата је нова компонента ван платна .

Пагинација

Везе за пагинацију сада имају прилагодљиве margin-leftкоје се динамички заокружују на свим угловима када су одвојене једна од друге.
Додано transitionс везама за пагинацију.

Поповерс

БреакингПреименовано .arrowу .popover-arrowу нашем подразумеваном шаблону искачућег екрана.
whiteListОпција је преименована у allowList.

Спиннерс

Спиннери сада поштују prefers-reduced-motion: reduceуспоравање анимација. Погледајте #31882 .
Побољшано вертикално поравнање спинера.

Здравице

Здравице се сада могу поставити у а .toast-containerуз помоћ услужних програма за позиционирање .
Промењено подразумевано трајање тоста на 5 секунди.
Уклоњено overflow: hiddenиз здравица и замењено одговарајућим border-radiusс са calc()функцијама.

Описи алатки

БреакингПреименовано .arrowу .tooltip-arrowу нашем подразумеваном шаблону објашњења.
БреакингПодразумевана вредност за fallbackPlacementsје промењена у ['top', 'right', 'bottom', 'left']ради бољег постављања поппер елемената.
БреакингwhiteListОпција је преименована у allowList.

Комуналне услуге

БреакингПреименовано је неколико услужних програма да користе имена логичких својстава уместо имена усмерених уз додатак РТЛ подршке:
- Преименовано .left-*и .right-*у .start-*и .end-*.
- Преименовано .float-leftи .float-rightу .float-startи .float-end.
- Преименовано .border-leftи .border-rightу .border-startи .border-end.
- Преименовано .rounded-leftи .rounded-rightу .rounded-startи .rounded-end.
- Преименовано .ml-*и .mr-*у .ms-*и .me-*.
- Преименовано .pl-*и .pr-*у .ps-*и .pe-*.
- Преименовано .text-leftи .text-rightу .text-startи .text-end.
БреакингПодразумевано онемогућене негативне маргине.
Додата нова .bg-bodyкласа за брзо постављање <body>позадине на додатне елементе.
Додати нови услужни програми за позиционирање за top, right, bottom, и left. Вредности укључују 0, 50%, и 100%за свако својство.
Додати нови .translate-middle-xи .translate-middle-yуслужни програми хоризонтално или вертикално центрирати апсолутно/фиксно позициониране елементе.
Додати нови border-widthуслужни програми .
БреакингПреименовано .text-monospaceу .font-monospace.
БреакингУклоњено .text-hideјер је то застарела метода за скривање текста који више не би требало да се користи.
Додати .fs-*услужни програми за font-sizeуслужне програме (са омогућеним РФС-ом). Они користе исту скалу као ХТМЛ-ови подразумевани наслови (1-6, велики према малим) и могу се мењати преко Сасс мапе.
БреакингПреименовани .font-weight-*услужни програми .fw-*због сажетости и доследности.
БреакингПреименовани .font-style-*услужни програми .fst-*због сажетости и доследности.
Додато .d-gridуслужним програмима за приказ и новим gapуслужним програмима ( .gap) за ЦСС Грид и флекбок распореде.
БреакингУклоњена .rounded-smи rounded-lg, и уведена нова скала часова, .rounded-0у .rounded-3. Погледајте #31687 .
Додати нови line-heightуслужни програми: .lh-1, .lh-sm, .lh-baseи .lh-lg. Погледајте овде .
Преместили смо .d-noneуслужни програм у наш ЦСС да бисмо му дали већу тежину у односу на друге услужне програме за приказ.
Проширен је .visually-hidden-focusableпомоћник да ради и на контејнерима, користећи :focus-within.

помагачи

Бреакинг Респонзивни помоћници за уграђивање су преименовани у помоћнике за однос са новим именима класа и побољшаним понашањем, као и корисном ЦСС променљивом.
- Класе су преименоване да би се промениле byу xразмери. На пример, .ratio-16by9сада је .ratio-16x9.
- Избацили смо .embed-responsive-itemи селектор групе елемената у корист једноставнијег .ratio > *селектора. Није потребна више класа, а помоћник за однос сада ради са било којим ХТМЛ елементом.
- Сасс мапа је $embed-responsive-aspect-ratiosпреименована у $aspect-ratiosи њене вредности су поједностављене како би укључиле име класе и проценат као key: valueпар.
- ЦСС променљиве су сада генерисане и укључене за сваку вредност у Сасс мапи. Измените --bs-aspect-ratioпроменљиву на да .ratioбисте креирали било коју прилагођену пропорцију .
Бреакинг Класе „читача екрана“ су сада „визуелно скривене“ класе .
- Промењена Сасс датотека из scss/helpers/_screenreaders.scssуscss/helpers/_visually-hidden.scss
- Преименовано .sr-onlyи .sr-only-focusableу .visually-hiddenи.visually-hidden-focusable
- Преименовано sr-only()и sr-only-focusable()мешање у visually-hidden()и visually-hidden-focusable().
bootstrap-utilities.cssсада укључује и наше помагаче. Помоћници више не морају да се увозе у прилагођене верзије.

ЈаваСцрипт

Избачена је зависност од јКуери-ја и преправљени додаци да буду у обичном ЈаваСцрипт-у.
БреакингАтрибути података за све ЈаваСцрипт додатке су сада распоређени у именском простору како би помогли у разликовању Боотстрап функционалности од трећих страна и вашег сопственог кода. На пример, користимо data-bs-toggleуместо data-toggle.
Сви додаци сада могу прихватити ЦСС селектор као први аргумент. Можете проследити ДОМ елемент или било који важећи ЦСС селектор да бисте креирали нову инстанцу додатка:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigможе се пренети као функција која прихвата Боотстрап-ову подразумевану Поппер конфигурацију као аргумент, тако да можете спојити ову подразумевану конфигурацију на свој начин. Примјењује се на падајуће меније, искачуће елементе и описе алата.
Подразумевана вредност за fallbackPlacementsје промењена у ['top', 'right', 'bottom', 'left']ради бољег постављања Поппер елемената. Примјењује се на падајуће меније, искачуће елементе и описе алата.
Уклоњена доња црта из јавних статичких метода као што је _getInstance()→ getInstance().