migrate-bootstrap4-to-bootstrap5

ojo que si se ejecuta repetidamente se duplica el alert-dismissible.

Si se desea ejecutar una y otra vez comentar esta linea 38: '/class="alert/' => 'class="alert alert-dismissible',

Uso

php migrate.php MyPlugin/

Con esto se avanza bastante, pero las siguientes instrucciones hay que hacerlas manualmente.

input-group

Hay que eliminar el wrapper <span class="input-group-append">***</div> y <span class="input-group-prepend">***</div> (span o div)

Antes:

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

Después:

<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

btn-block

Hay que eliminar la clase btn-block y agregar d-grid al div padre

Antes:

<div class="mb-3">
    <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
    <button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
</div>

Después:

<div class="mb-3 d-grid">
    <button type="button" class="btn btn-primary btn-lg">Block level button</button>
    <button type="button" class="btn btn-secondary btn-lg">Block level button</button>
</div>

input select

hay que cambiar la clase form-control por form-select en los inputs select.

Antes:

<select class="form-control">
  <option>Large select</option>
</select>

Después:

<select class="form-select">
  <option>Large select</option>
</select>

boton cerrar de los modales

hay que cambiar la clase close por btn-close y eliminar el <span aria-hidden="true">&times;</span>

Antes:

<div class="modal-header">
  <h5 class="modal-title">Modal title</h5>
  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Después:

<div class="modal-header">
  <h5 class="modal-title">Modal title</h5>
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>

navbar

Hay que añadir un <div class="container-fluid"> dentro del navbar

Antes:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  (...)
</nav>

Después:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    (...)
  </div>
</nav>

card-columns

Se ha eliminado la clase .card-columns y se puede usar en su lugar Masonry:

Bootstrap and Masonry