März 2024 – Notizen

Zentrale Dokumente für die Migration sind hier zu finden:

Der Text kommt von hier: https://nodebb.org/blog/nodebb-specific-bootstrap-3-to-5-migration-guide/

Grundsätzliches

pull-left changed to float-start
pull-right changed to float-end
text-right changed to text-end
img-responsive changed to img-fluid

Buttons

Vertically stacked buttons change from .btn-block to using display/spacer classes.

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button> 
</div>

btn-xs removed use btn-sm
btn-default removed use btn-outline-secondary

Grid/Breakpoints

col-xs-<n> changed to col-<n>
col-md-offset-<n> changed to offset-md-<n>

Display

inline-block changed to d-inline-block

Media Component

… has been removed completely, use flex display classes instead:

<div class="d-flex">
  <div class="flex-shrink-0">
    image
  </div>
  <div class="flex-grow-1 ms-3">
    text
  </div>
</div>

Navbar

navbar-toggle changed to navbar-toggler

Panels, Wells, and Jumbotrons

… have all been removed in favour of the “card” component.

To convert a panel into a card:

<div class=”card”>
  <div class=”card-header”>header</div>
  <div class=”card-body”>body</div>
  <div class=”card-footer”>footer</div>
</div>

<div class="well"> changed to <div class="card card-body text-bg-light">

Forms

<select class="form-control"> changed to <select class="form-select">
Add form-label class to labels
Add form-check-input to checkboxes. Sample checkbox with label:

<div class="”form-check”">
  <input class="”form-check-input”" type="”checkbox”" />
  <label class="”form-check-label”">a checkbox</label>
</div>

form-group, .form-row, or .form-inline are removed use spacing utilities
help-block changed to form-text

Dropdowns

data-toggle="dropdown" changed to data-bs-toggle="dropdown"
Add dropdown-item to dropdown list item <a class="dropdown-item">Item 1</a>
dropdown-menu-right changed to dropdown-menu-end
Divider changed to dropdown-divider

Collapse

data-toggle="collapse" changed to data-bs-toggle="collapse"
data-target=".classname" changed to data-bs-target=".classname"

Modals

data-dismiss="modal" changed to data-bs-dismiss="modal"

Responsive Breakpoints

Instead of using media queries using old Bootstrap 3 variables (e.g. @media (max-width: @screen-sm-max) { ... }), Bootstrap 5 introduces a new mixin for breakpoints.

Read more about it in Bootstrap 5’s article re: responsive breakpoints.

Monat: März 2024

Migration von Bootstrap 3 auf 5