Naar de inhoud
Gratis naslagwerk over HTML
HTML leren en naslaan
Bootstrap 5.2

Migreren naar v5

Volg en bekijk de wijzigingen in de Bootstrap-bronbestanden, documentatie en componenten om je te helpen migreren van v4 naar v5.

v5.2.0

Vernieuwd ontwerp

Bootstrap v5.2.0 bevat een subtiele ontwerpupdate voor een handvol componenten en eigenschappen in het hele project, het meest opvallend via verfijnde border-radius-waarden op knoppen en formulierbesturingselementen. Ook onze documentatie is bijgewerkt met een nieuwe homepage, een eenvoudiger docs-layout waarin secties van de zijbalk niet meer inklappen, en prominentere voorbeelden van Bootstrap Icons.

Meer CSS-variabelen

We hebben al onze componenten bijgewerkt zodat ze CSS-variabelen gebruiken. Sass ligt nog steeds aan alles ten grondslag, maar elk component is bijgewerkt met CSS-variabelen op de basisklassen van het component (bijv. .btn), waardoor Bootstrap beter in realtime aan te passen is. In volgende releases breiden we het gebruik van CSS-variabelen verder uit naar onze layout, formulieren, helpers en utilities. Lees op de betreffende documentatiepagina's meer over CSS-variabelen per component.

Ons gebruik van CSS-variabelen blijft tot Bootstrap 6 enigszins onvolledig. Hoewel we ze het liefst overal volledig zouden doorvoeren, brengen ze het risico van breaking changes met zich mee. Zou we bijvoorbeeld $alert-border-width: var(--bs-border-width) in onze broncode zetten, dan breekt dat mogelijk Sass in je eigen code als je om wat voor reden dan ook $alert-border-width * 2 gebruikte.

Daarom blijven we waar mogelijk richting meer CSS-variabelen werken, maar houd er rekening mee dat onze implementatie in v5 mogelijk wat beperkt is.

Nieuwe _maps.scss

Bootstrap v5.2.0 introduceerde met _maps.scss een nieuw Sass-bestand. Het haalt een aantal Sass-maps uit _variables.scss om een probleem op te lossen waarbij updates aan een oorspronkelijke map niet werden toegepast op secundaire maps die daarop voortbouwen. Zo werden updates aan $theme-colors niet toegepast op andere themamaps die op $theme-colors leunden, waardoor belangrijke aanpassingsworkflows braken. Kort gezegd heeft Sass de beperking dat een standaardvariabele of -map, zodra die is gebruikt, niet meer bijgewerkt kan worden. Bij CSS-variabelen bestaat een vergelijkbare beperking wanneer ze gebruikt worden om andere CSS-variabelen samen te stellen.

Daarom moeten variabele-aanpassingen in Bootstrap ná @import "functions" komen, maar vóór @import "variables" en de rest van onze importstack. Hetzelfde geldt voor Sass-maps — je moet de standaardwaarden overschrijven voordat ze gebruikt worden. De volgende maps zijn naar de nieuwe _maps.scss verhuisd:

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

Je eigen Bootstrap-CSS-builds horen er nu ongeveer zo uit te zien, met een aparte maps-import.

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

Nieuwe utilities

Aanvullende wijzigingen

  • Nieuwe optie $enable-container-classes geïntroduceerd. — Wanneer je nu voor de experimentele CSS Grid-layout kiest, worden .container-*-klassen alsnog gecompileerd, tenzij deze optie op false staat. Containers behouden nu ook hun gutter-waarden.

  • Het offcanvas-component heeft nu responsieve varianten. De oorspronkelijke klasse .offcanvas blijft ongewijzigd — die verbergt content op alle viewports. Om hem responsief te maken, verander je die .offcanvas-klasse in een .offcanvas-{sm|md|lg|xl|xxl}-klasse.

  • Dikkere tabelscheidingen zijn nu opt-in. — We hebben de dikkere en lastiger te overschrijven rand tussen tabelgroepen verwijderd en verplaatst naar een optionele klasse die je kunt toepassen: .table-group-divider. Zie de tabeldocumentatie voor een voorbeeld.

  • Scrollspy is herschreven en gebruikt nu de Intersection Observer API, wat betekent dat je geen relatieve bovenliggende wrappers meer nodig hebt, dat de offset-configuratie verouderd is, en meer. Verwacht dat je Scrollspy-implementaties nauwkeuriger en consistenter zijn in het uitlichten van de navigatie.

  • Popovers en tooltips gebruiken nu CSS-variabelen. Sommige CSS-variabelen zijn ten opzichte van hun Sass-tegenhangers bijgewerkt om het aantal variabelen te beperken. Daardoor zijn er in deze release drie variabelen verouderd: $popover-arrow-color, $popover-arrow-outer-color en $tooltip-arrow-color.

  • Nieuwe .text-bg-{color}-helpers toegevoegd. In plaats van losse .text-*- en .bg-*-utilities in te stellen, kun je nu de .text-bg-*-helpers gebruiken om een background-color met een contrasterende voorgrond-color in te stellen.

  • Modifier .form-check-reverse toegevoegd om de volgorde van labels en bijbehorende selectievakjes/radioknoppen om te draaien.

  • Ondersteuning voor gestreepte kolommen toegevoegd aan tabellen via de nieuwe klasse .table-striped-columns.

Voor een volledige lijst met wijzigingen, zie het v5.2.0-project op GitHub.

v5.1.0

  • Experimentele ondersteuning voor CSS Grid-layout toegevoegd. — Dit is werk in uitvoering en nog niet klaar voor productie, maar je kunt de nieuwe functionaliteit via Sass inschakelen. Zet daarvoor het standaardgrid uit met $enable-grid-classes: false en schakel CSS Grid in met $enable-cssgrid: true.

  • Navbars bijgewerkt met ondersteuning voor offcanvas. — Voeg offcanvas-lades toe aan elke navbar met de responsieve .navbar-expand-*-klassen en wat offcanvas-markup.

  • Nieuw placeholder-component toegevoegd. — Ons nieuwste component: een manier om tijdelijke blokken te tonen in plaats van echte content, om aan te geven dat er nog iets laadt in je site of app.

  • De collapse-plugin ondersteunt nu horizontaal inklappen. — Voeg .collapse-horizontal toe aan je .collapse om de width in plaats van de height in te klappen. Voorkom hertekenen door de browser door een min-height of height in te stellen.

  • Nieuwe stack- en vertical rule-helpers toegevoegd. — Pas snel meerdere flexbox-eigenschappen toe om met stacks eigen layouts te maken. Kies uit horizontale (.hstack) en verticale (.vstack) stacks. Voeg verticale scheidingen toe die op <hr>-elementen lijken met de nieuwe .vr-helpers.

  • Nieuwe globale :root-CSS-variabelen toegevoegd. — Er zijn diverse nieuwe CSS-variabelen op :root-niveau toegevoegd om <body>-stijlen te sturen. Er zijn er meer in de maak, ook in onze utilities en componenten, maar lees voor nu over CSS-variabelen in de sectie Aanpassen.

  • Kleur- en achtergrond-utilities herzien zodat ze CSS-variabelen gebruiken, plus nieuwe utilities voor tekstdekking en achtergronddekking. — .text-*- en .bg-*-utilities zijn nu gebouwd met CSS-variabelen en rgba()-kleurwaarden, waardoor je elke utility eenvoudig kunt aanpassen met nieuwe opacity-utilities.

  • Nieuwe snippet-voorbeelden toegevoegd om te laten zien hoe je onze componenten aanpast. — Haal kant-en-klare aangepaste componenten en andere gangbare ontwerppatronen op met onze nieuwe snippet-voorbeelden. Inclusief footers, dropdowns, list groups en modals.

  • Ongebruikte positioneringsstijlen uit popovers en tooltips verwijderd, omdat die volledig door Popper worden afgehandeld. $tooltip-margin is daarbij verouderd en op null gezet.

Meer informatie? Lees de blogpost over v5.1.0.

Let op

Hallo daar! De wijzigingen in onze eerste hoofdrelease van Bootstrap 5, v5.0.0, staan hieronder gedocumenteerd. Ze bevatten niet de aanvullende wijzigingen die hierboven staan.

Afhankelijkheden

  • jQuery losgelaten.
  • Geüpgraded van Popper v1.x naar Popper v2.x.
  • Libsass vervangen door Dart Sass als onze Sass-compiler, omdat Libsass verouderd was.
  • Voor het bouwen van onze documentatie gemigreerd van Jekyll naar Hugo.

Browserondersteuning

  • Internet Explorer 10 en 11 laten vallen
  • Microsoft Edge < 16 (Legacy Edge) laten vallen
  • Firefox < 60 laten vallen
  • Safari < 12 laten vallen
  • iOS Safari < 12 laten vallen
  • Chrome < 60 laten vallen

Wijzigingen in de documentatie

  • Homepage, docs-layout en footer opnieuw ontworpen.
  • Nieuwe Parcel-gids toegevoegd.
  • Nieuwe sectie Aanpassen toegevoegd, die de Theming-pagina van v4 vervangt, met nieuwe details over Sass, globale configuratieopties, kleurschema's, CSS-variabelen en meer.
  • Alle formulierdocumentatie gereorganiseerd tot de nieuwe sectie Formulieren, waarbij de content is opgesplitst in meer gerichte pagina's.
  • Op vergelijkbare wijze is de sectie Layout bijgewerkt om de grid-content duidelijker uit te werken.
  • Componentpagina "Navs" hernoemd naar "Navs & Tabs".
  • Pagina "Checks" hernoemd naar "Checks & radios".
  • De navbar opnieuw ontworpen en een nieuwe subnav toegevoegd om makkelijker door onze sites en docsversies te navigeren.
  • Nieuwe sneltoets voor het zoekveld toegevoegd: Ctrl + /.

Sass

  • We hebben de standaard Sass-map-merges losgelaten om het makkelijker te maken overbodige waarden te verwijderen. Houd er rekening mee dat je nu alle waarden in Sass-maps zoals $theme-colors moet definiëren. Bekijk hoe je met Sass-maps omgaat.

  • Breaking De functie color-yiq() en bijbehorende variabelen zijn hernoemd naar color-contrast(), omdat die niet langer met de YIQ-kleurruimte te maken heeft. Zie #30168.

    • $yiq-contrasted-threshold heet nu $min-contrast-ratio.
    • $yiq-text-dark en $yiq-text-light heten nu respectievelijk $color-contrast-dark en $color-contrast-light.

  • Breaking De parameters van de media query-mixins zijn gewijzigd voor een logischere aanpak.

    • media-breakpoint-down() gebruikt het breakpoint zelf in plaats van het volgende breakpoint (bijv. media-breakpoint-down(lg) in plaats van media-breakpoint-down(md) richt zich op viewports smaller dan lg).
    • Op vergelijkbare wijze gebruikt ook de tweede parameter in media-breakpoint-between() het breakpoint zelf in plaats van het volgende breakpoint (bijv. media-between(sm, lg) in plaats van media-breakpoint-between(sm, md) richt zich op viewports tussen sm en lg).

  • Breaking Printstijlen en de variabele $enable-print-styles verwijderd. De print-display-klassen bestaan nog wel. Zie #28339.

  • Breaking De functies color(), theme-color() en gray() laten vallen ten gunste van variabelen. Zie #29083.

  • Breaking De functie theme-color-level() heet nu color-level() en accepteert nu elke gewenste kleur in plaats van alleen $theme-color-kleuren. Zie #29083 Let op: color-level() is later in v5.0.0-alpha3 alsnog vervallen.

  • Breaking $enable-prefers-reduced-motion-media-query en $enable-pointer-cursor-for-buttons hernoemd naar $enable-reduced-motion en $enable-button-pointers voor de beknoptheid.

  • Breaking De mixin bg-gradient-variant() verwijderd. Gebruik de klasse .bg-gradient om gradiënten aan elementen toe te voegen, in plaats van de gegenereerde .bg-gradient-*-klassen.

  • Breaking Eerder verouderde mixins verwijderd:

    • hover, hover-focus, plain-hover-focus en hover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide() (ook de bijbehorende utility-klasse .text-hide is vervallen)
    • visibility()
    • form-control-focus()

  • Breaking De functie scale-color() hernoemd naar shift-color() om botsing met Sass' eigen kleurschalingsfunctie te voorkomen.

  • box-shadow-mixins accepteren nu null-waarden en laten none bij meerdere argumenten vallen. Zie #30394.

  • De mixin border-radius() heeft nu een standaardwaarde.

Kleursysteem

  • Het kleursysteem dat met color-level() en $theme-color-interval werkte, is vervangen door een nieuw kleursysteem. Alle lighten()- en darken()-functies in onze codebase zijn vervangen door tint-color() en shade-color(). Deze functies mengen de kleur met wit of zwart in plaats van de lichtheid met een vast bedrag te wijzigen. shift-color() maakt een kleur lichter of donkerder, afhankelijk van of de gewichtsparameter positief of negatief is. Zie #30622 voor meer details.

  • Nieuwe tinten en schaduwen voor elke kleur toegevoegd, met negen aparte kleuren per basiskleur, als nieuwe Sass-variabelen.

  • Kleurcontrast verbeterd. De contrastverhouding is van 3:1 naar 4.5:1 verhoogd en de kleuren blauw, groen, cyaan en roze zijn bijgewerkt om aan WCAG 2.1 AA-contrast te voldoen. Ook is onze kleurcontrastkleur van $gray-900 naar $black gewijzigd.

  • Ter ondersteuning van ons kleursysteem hebben we nieuwe eigen functies tint-color() en shade-color() toegevoegd om onze kleuren goed te mengen.

Grid-updates

  • Nieuw breakpoint! Nieuw xxl-breakpoint toegevoegd voor 1400px en breder. Aan alle andere breakpoints is niets gewijzigd.

  • Verbeterde gutters. Gutters worden nu in rems ingesteld en zijn smaller dan in v4 (1.5rem, oftewel ongeveer 24px, in plaats van 30px). Daarmee sluiten de gutters van ons grid-systeem aan op onze spacing-utilities.

    • Nieuwe gutter-klasse toegevoegd (.g-*, .gx-* en .gy-*) om horizontale/verticale gutters, horizontale gutters en verticale gutters te sturen.
    • Breaking .no-gutters hernoemd naar .g-0 om aan te sluiten op de nieuwe gutter-utilities.

  • Kolommen krijgen niet langer position: relative, dus je moet mogelijk .position-relative aan sommige elementen toevoegen om dat gedrag terug te krijgen.

  • Breaking Diverse .order-*-klassen die vaak ongebruikt bleven, zijn vervallen. We leveren nu standaard alleen .order-1 tot en met .order-5.

  • Breaking Het .media-component laten vallen, omdat het eenvoudig met utilities na te bootsen is. Zie #28265 en de flex-utilities-pagina voor een voorbeeld.

  • Breaking bootstrap-grid.css past box-sizing: border-box nu alleen op de kolom toe, in plaats van de globale box-sizing te resetten. Zo kunnen onze grid-stijlen op meer plekken worden gebruikt zonder interferentie.

  • $enable-grid-classes schakelt het genereren van containerklassen niet meer uit. Zie #29146.

  • De mixin make-col gebruikt nu standaard gelijke kolommen wanneer er geen formaat is opgegeven.

Content, Reboot enzovoort

  • RFS staat nu standaard aan. Koppen die de mixin font-size() gebruiken, passen hun font-size automatisch aan zodat die met de viewport meeschaalt. In v4 was dit nog opt-in.

  • Breaking Onze display-typografie herzien: de $display-*-variabelen zijn vervangen door een Sass-map $display-font-sizes. Ook zijn de individuele $display-*-weight-variabelen vervangen door één $display-font-weight en zijn de font-sizes aangepast.

  • Twee nieuwe .display-*-kopformaten toegevoegd: .display-5 en .display-6.

  • Links zijn standaard onderstreept (niet alleen bij hover), tenzij ze deel uitmaken van specifieke componenten.

  • Tabellen opnieuw ontworpen om hun stijlen op te frissen en ze met CSS-variabelen te herbouwen, voor meer controle over de styling.

  • Breaking Geneste tabellen erven geen stijlen meer.

  • Breaking .thead-light en .thead-dark zijn vervallen ten gunste van de .table-*-variantklassen, die voor alle tabelelementen gebruikt kunnen worden (thead, tbody, tfoot, tr, th en td).

  • Breaking De mixin table-row-variant() heet nu table-variant() en accepteert nog maar 2 parameters: $color (kleurnaam) en $value (kleurcode). De randkleur en accentkleuren worden automatisch berekend op basis van de tabel-factorvariabelen.

  • Variabelen voor cel-padding in tabellen opgesplitst in -y en -x.

  • Breaking De klasse .pre-scrollable laten vallen. Zie #29135

  • Breaking .text-*-utilities voegen geen hover- en focus-states meer toe aan links. In plaats daarvan kun je de .link-*-hulpklassen gebruiken. Zie #29267

  • Breaking De klasse .text-justify laten vallen. Zie #29793

  • Breaking <hr>-elementen gebruiken nu height in plaats van border om het size-attribuut beter te ondersteunen. Daardoor kun je ook padding-utilities gebruiken om dikkere scheidingen te maken (bijv. <hr class="py-1">).

  • De standaard horizontale padding-left op <ul>- en <ol>-elementen teruggezet van de browserstandaard 40px naar 2rem.

  • $enable-smooth-scroll toegevoegd, dat scroll-behavior: smooth globaal toepast — behalve voor gebruikers die via de media query prefers-reduced-motion om minder beweging vragen. Zie #31877

RTL

  • Variabelen, utilities en mixins die specifiek met de horizontale richting te maken hebben, zijn hernoemd zodat ze logische eigenschappen gebruiken zoals in flexbox-layouts — bijv. start en end in plaats van left en right.

Formulieren

  • Nieuwe floating forms toegevoegd! We hebben het voorbeeld met floating labels gepromoveerd tot volledig ondersteunde formuliercomponenten. Zie de nieuwe pagina Floating labels.

  • Breaking Native en eigen formulierelementen samengevoegd. Selectievakjes, radioknoppen, selects en andere inputs die in v4 zowel native als eigen klassen hadden, zijn samengevoegd. Vrijwel al onze formulierelementen zijn nu volledig eigen, en de meeste zonder dat er eigen HTML nodig is.

    • .custom-control.custom-checkbox is nu .form-check.
    • .custom-control.custom-custom-radio is nu .form-check.
    • .custom-control.custom-switch is nu .form-check.form-switch.
    • .custom-select is nu .form-select.
    • .custom-file en .form-file zijn vervangen door eigen stijlen boven op .form-control.
    • .custom-range is nu .form-range.
    • De native .form-control-file en .form-control-range zijn vervallen.

  • Breaking .input-group-append en .input-group-prepend laten vallen. Je kunt knoppen en .input-group-text nu gewoon als directe kinderen van de input groups toevoegen.

  • De langlopende bug ontbrekende border-radius bij input group met validatiefeedback is eindelijk opgelost door een extra klasse .has-validation aan input groups met validatie toe te voegen.

  • Breaking Formulierspecifieke layoutklassen laten vallen ten gunste van ons grid-systeem. Gebruik ons grid en onze utilities in plaats van .form-group, .form-row of .form-inline.

  • Breaking Formulierlabels vereisen nu .form-label.

  • Breaking .form-text stelt geen display meer in, waardoor je naar wens inline of block-helptekst kunt maken door simpelweg het HTML-element te wijzigen.

  • Formulierbesturingselementen gebruiken waar mogelijk geen vaste height meer, maar min-height, voor betere aanpasbaarheid en compatibiliteit met andere componenten.

  • Validatie-iconen worden niet meer toegepast op <select>s met multiple.

  • Sass-bronbestanden opnieuw ingedeeld onder scss/forms/, inclusief de stijlen voor input groups.

Componenten

  • padding-waarden voor alerts, breadcrumbs, cards, dropdowns, list groups, modals, popovers en tooltips gelijkgetrokken op basis van onze variabele $spacer. Zie #30564.

Accordion

Alerts

  • Alerts hebben nu voorbeelden met iconen.

  • Eigen stijlen voor <hr>s in elke alert verwijderd, omdat die al currentColor gebruiken.

Badges

  • Breaking Alle .badge-*-kleurklassen laten vallen ten gunste van achtergrond-utilities (gebruik bijv. .bg-primary in plaats van .badge-primary).

  • Breaking .badge-pill laten vallen — gebruik in plaats daarvan de utility .rounded-pill.

  • Breaking Hover- en focus-stijlen voor <a>- en <button>-elementen verwijderd.

  • Standaardpadding voor badges verhoogd van .25em/.5em naar .35em/.65em.

  • Het standaarduiterlijk van breadcrumbs vereenvoudigd door padding, background-color en border-radius te verwijderen.

  • Nieuwe CSS custom property --bs-breadcrumb-divider toegevoegd om eenvoudig aan te passen zonder CSS te hoeven hercompileren.

Buttons

  • Breaking Toggle-knoppen, met selectievakjes of radioknoppen, hebben geen JavaScript meer nodig en hebben nieuwe markup. Er is geen omhullend element meer nodig; voeg .btn-check toe aan de <input> en combineer die met .btn-klassen op het <label>. Zie #30650. De documentatie hiervoor is van onze Buttons-pagina naar de nieuwe sectie Formulieren verhuisd.

  • Breaking .btn-block laten vallen ten gunste van utilities. In plaats van .btn-block op de .btn te gebruiken, wikkel je je knoppen in .d-grid met een .gap-*-utility om ze naar wens te spatiëren. Schakel over op responsieve klassen voor nog meer controle. Lees de documentatie voor een paar voorbeelden.

  • Onze mixins button-variant() en button-outline-variant() bijgewerkt zodat ze extra parameters ondersteunen.

  • Knoppen bijgewerkt voor meer contrast in hover- en active-states.

  • Uitgeschakelde knoppen hebben nu pointer-events: none;.

Card

  • Breaking .card-deck laten vallen ten gunste van ons grid. Wikkel je cards in kolomklassen en voeg een bovenliggende .row-cols-*-container toe om card decks na te bootsen (maar met meer controle over responsieve uitlijning).

  • Breaking .card-columns laten vallen ten gunste van Masonry. Zie #28922.

  • Breaking De op .card gebaseerde accordion vervangen door een nieuw accordion-component.

  • Nieuwe .carousel-dark-variant toegevoegd voor donkere tekst, bedieningselementen en indicatoren (ideaal voor lichtere achtergronden).

  • Chevron-iconen voor carousel-bedieningselementen vervangen door nieuwe SVG's uit Bootstrap Icons.

Close button

  • Breaking .close hernoemd naar .btn-close voor een minder generieke naam.

  • Sluitknoppen gebruiken nu een background-image (ingesloten SVG) in plaats van een &times; in de HTML, waardoor aanpassen eenvoudiger is zonder je markup aan te raken.

  • Nieuwe variant .btn-close-white toegevoegd die filter: invert(1) gebruikt voor sluiticonen met meer contrast op donkere achtergronden.

Collapse

  • Scroll-anchoring voor accordions verwijderd.

  • Nieuwe variant .dropdown-menu-dark en bijbehorende variabelen toegevoegd voor donkere dropdowns op aanvraag.

  • Nieuwe variabele voor $dropdown-padding-x toegevoegd.

  • De dropdown-scheidingslijn donkerder gemaakt voor beter contrast.

  • Breaking Alle gebeurtenissen voor de dropdown worden nu op de dropdown-toggle-knop afgevuurd en bubbelen daarna omhoog naar het bovenliggende element.

  • Dropdownmenu's krijgen nu het attribuut data-bs-popper="static" wanneer de positionering van de dropdown statisch is, of wanneer de dropdown in de navbar zit. Dat wordt door onze JavaScript toegevoegd en helpt ons eigen positioneringsstijlen te gebruiken zonder de positionering van Popper te verstoren.

  • Breaking De optie flip voor de dropdown-plugin laten vallen ten gunste van de native Popper-configuratie. Je kunt het flip-gedrag nu uitschakelen door een lege array mee te geven aan de optie fallbackPlacements in de flip-modifier.

  • Dropdownmenu's kunnen nu aanklikbaar zijn met een nieuwe optie autoClose om het gedrag bij automatisch sluiten te bepalen. Met deze optie kun je klikken binnen of buiten het dropdownmenu toestaan om het interactief te maken.

  • Dropdowns ondersteunen nu .dropdown-items die in <li>s gewikkeld zijn.

Jumbotron

List group

  • Nieuwe null-variabelen voor font-size, font-weight, color en :hover-color toegevoegd aan de klasse .nav-link.
  • Breaking Navbars vereisen nu een container erin (om de vereisten voor tussenruimte en de benodigde CSS drastisch te vereenvoudigen).
  • Breaking De klasse .active kan niet langer op .nav-items worden toegepast; die moet direct op .nav-links staan.

Offcanvas

Pagination

  • Pagineringslinks hebben nu een aanpasbare margin-left, en worden dynamisch aan alle hoeken afgerond wanneer ze van elkaar gescheiden zijn.

  • transitions toegevoegd aan pagineringslinks.

Popovers

  • Breaking .arrow hernoemd naar .popover-arrow in onze standaard popover-template.

  • Optie whiteList hernoemd naar allowList.

Spinners

  • Spinners houden nu rekening met prefers-reduced-motion: reduce door animaties te vertragen. Zie #31882.

  • Verticale uitlijning van spinners verbeterd.

Toasts

  • Toasts kunnen nu met behulp van position-utilities in een .toast-container worden gepositioneerd.

  • Standaardduur van toasts gewijzigd naar 5 seconden.

  • overflow: hidden uit toasts verwijderd en vervangen door correcte border-radius-waarden met calc()-functies.

Tooltips

  • Breaking .arrow hernoemd naar .tooltip-arrow in onze standaard tooltip-template.

  • Breaking De standaardwaarde voor fallbackPlacements is gewijzigd in ['top', 'right', 'bottom', 'left'] voor een betere plaatsing van popper-elementen.

  • Breaking Optie whiteList hernoemd naar allowList.

Utilities

  • Breaking Diverse utilities hernoemd zodat ze namen van logische eigenschappen gebruiken in plaats van richtingsnamen, met daarbij ondersteuning voor RTL:

    • .left-* en .right-* hernoemd naar .start-* en .end-*.
    • .float-left en .float-right hernoemd naar .float-start en .float-end.
    • .border-left en .border-right hernoemd naar .border-start en .border-end.
    • .rounded-left en .rounded-right hernoemd naar .rounded-start en .rounded-end.
    • .ml-* en .mr-* hernoemd naar .ms-* en .me-*.
    • .pl-* en .pr-* hernoemd naar .ps-* en .pe-*.
    • .text-left en .text-right hernoemd naar .text-start en .text-end.

  • Breaking Negatieve marges standaard uitgeschakeld.

  • Nieuwe klasse .bg-body toegevoegd om de achtergrond van de <body> snel op extra elementen toe te passen.

  • Nieuwe position-utilities toegevoegd voor top, right, bottom en left. De waarden zijn per eigenschap 0, 50% en 100%.

  • Nieuwe utilities .translate-middle-x en .translate-middle-y toegevoegd om absoluut/fixed gepositioneerde elementen horizontaal of verticaal te centreren.

  • Nieuwe border-width-utilities toegevoegd.

  • Breaking .text-monospace hernoemd naar .font-monospace.

  • Breaking .text-hide verwijderd, omdat het een verouderde methode is om tekst te verbergen die niet meer gebruikt zou moeten worden.

  • .fs-*-utilities toegevoegd voor font-size (met RFS ingeschakeld). Ze gebruiken dezelfde schaal als de standaardkoppen van HTML (1-6, groot naar klein) en zijn via een Sass-map aan te passen.

  • Breaking .font-weight-*-utilities hernoemd naar .fw-* voor beknoptheid en consistentie.

  • Breaking .font-style-*-utilities hernoemd naar .fst-* voor beknoptheid en consistentie.

  • .d-grid toegevoegd aan de display-utilities, plus nieuwe gap-utilities (.gap) voor CSS Grid- en flexbox-layouts.

  • Breaking .rounded-sm en rounded-lg verwijderd en een nieuwe schaal klassen geïntroduceerd: .rounded-0 tot en met .rounded-3. Zie #31687.

  • Nieuwe line-height-utilities toegevoegd: .lh-1, .lh-sm, .lh-base en .lh-lg. Zie hier.

  • De .d-none-utility in onze CSS verplaatst zodat die meer gewicht krijgt dan andere display-utilities.

  • De helper .visually-hidden-focusable uitgebreid zodat die ook op containers werkt, via :focus-within.

Helpers

  • Breaking Responsive embed-helpers zijn hernoemd naar ratio-helpers, met nieuwe klassenamen, verbeterd gedrag en een handige CSS-variabele.

    • In de klassenamen is by in de beeldverhouding vervangen door x. Zo heet .ratio-16by9 nu .ratio-16x9.
    • We hebben .embed-responsive-item en de element-groepselector laten vallen ten gunste van een eenvoudiger .ratio > *-selector. Er is geen klasse meer nodig, en de ratio-helper werkt nu met elk HTML-element.
    • De Sass-map $embed-responsive-aspect-ratios heet nu $aspect-ratios en de waarden zijn vereenvoudigd tot de klassenaam en het percentage als key: value-paar.
    • Er worden nu CSS-variabelen gegenereerd en opgenomen voor elke waarde in de Sass-map. Pas de variabele --bs-aspect-ratio op de .ratio aan om een aangepaste beeldverhouding te maken.

  • Breaking "Screen reader"-klassen zijn nu "visually hidden"-klassen.

    • Het Sass-bestand is gewijzigd van scss/helpers/_screenreaders.scss naar scss/helpers/_visually-hidden.scss
    • .sr-only en .sr-only-focusable hernoemd naar .visually-hidden en .visually-hidden-focusable
    • De mixins sr-only() en sr-only-focusable() hernoemd naar visually-hidden() en visually-hidden-focusable().

  • bootstrap-utilities.css bevat nu ook onze helpers. Helpers hoeven in eigen builds niet meer apart geïmporteerd te worden.

JavaScript

  • jQuery-afhankelijkheid laten vallen en plugins herschreven in gewone JavaScript.

  • Breaking Data-attributen voor alle JavaScript-plugins hebben nu een eigen namespace, om Bootstrap-functionaliteit te onderscheiden van die van derden en van je eigen code. Zo gebruiken we data-bs-toggle in plaats van data-toggle.

  • Alle plugins accepteren nu een CSS-selector als eerste argument. Je kunt een DOM-element of een geldige CSS-selector meegeven om een nieuwe instantie van de plugin te maken:

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

  • popperConfig kan worden meegegeven als functie die de standaard Popper-configuratie van Bootstrap als argument accepteert, zodat je die standaardconfiguratie op je eigen manier kunt samenvoegen. Geldt voor dropdowns, popovers en tooltips.

  • De standaardwaarde voor fallbackPlacements is gewijzigd in ['top', 'right', 'bottom', 'left'] voor een betere plaatsing van Popper-elementen. Geldt voor dropdowns, popovers en tooltips.

  • Underscore verwijderd uit publieke statische methodes, zoals _getInstance() → getInstance().