V projektech používám Webpack a naštěstí dokumentace Bootstrap 5 ohledně použití této varianty je dobrá.
Instalace nových knihoven
Oproti verzi 4.5.3 jsem akorát změnil v package.json verzi aktuálního balíčku bootstrap
"bootstrap": "^5.0.0-beta1",
a doinstaloval jsem Popper.
npm install –save @popperjs/core
Přizpůsobení proměnných Bootstrapu 5
Na přepisování proměnných Bootstrapu jsem začal používat importovaný sass soubor /assets/styles/scss/partials/_custom-bootstrap.scss, kde si nejdříve načtu proměnné.
@import '~bootstrap/scss/variables';
A pak si je přepíšu podle sebe. Např. sladím barvy s již používanýma barvama webu.
$primary: $color-primary;
Soubor _custom-bootstrap.scss importuj před importem Bootstrapu v /assets/styles/scss/style.scss
@import 'partials/custom-bootstrap';
@import '~bootstrap/scss/bootstrap';
A soubor style.scss dále importuju v /assets/app.js
import './styles/scss/style.scss';
Navbar má jinak pojmenované atributy
Musel jsem přepsat všude, kde používám komponentu navbar, dva atributy v toggle button.
1/ data-toggle -> data-bs-toggle 2/ data-target -> data-bs-target
Zarovnání textu
Nově přibyla možnost zarovnávat text podle viewportu např. prozarovnání textu vpravo jen pro XL se použije text-xl-end.
text-right -> text-endOdsazení margin/padding
Pro margin-right v Bootstrap 4 byla class „mr-*“, v Bootstrap 5 toto chybí. Místo right (r) se používá end (e).
mr-* -> me-* (např. mr-3 -> me-3 )
ml-* -> ms-*
pr-* -> pe-*
pl-* -> ps-*
float-sm-right -> float-sm-end
Badge
badge-secondary -> bg-secondary
badge-pill -> rounded-pill
badge-light - > bg-light
badge-alert -> bg-alert