Schlagwort: alltag

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

• Bootstrap 3 to 4
• Bootstrap 4 to 5

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.