Migration von Bootstrap 3 auf 5

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.

96 Stunden

Neulich, im Drogeriemarkt blieb mein Gehirn an einem Deo hängen: 96h NON-STOP Protection Extreme!

Echt jetzt? 4 Tage nicht waschen?

flauschig

… es sorgt für ein flauschiges Gefühl der Zufriedenheit, das sonst auf legalem Weg nur schwer zu erreichen ist.

Auto brum brum

Gestern ein neues Auto kaufen müssen. Das alte ist kaputt.
Dabei fällt mir auf, dass ich für die Beschaffung von anderen Gebrauchsgegenstände des Alltags zum Teil deutlich mehr Zeit aufwende, um mir darüber klar zu werden, wie die Beschaffenheit, Ästhetik und Funktionalität des Gegenstandes im Idealfall sein sollte, was ich brauche und was ich gerne hätte. Für das letzte Handy habe ich mehrere Tage benötigt und das war deutlich günstiger. Ein Auto hat vier Räder und soll mich von A nach B bringen… fertig!