Migrace Bootstrap 4 na Bootstrap 5

bootstrap html css programovani

Migraci z Bootstrap 4 na Bootstrap 5 je možné provést vcelku rychle. Zde je vypíchnuto pár hlavních odlišností a co s nimi....

Update balíčku

npm i bootstrap@5.0.1

Najdi a nahraď

data-toggle    ----->   data-bs-toggle
data-target    ----->   data-bs-target
mr-    ----->   me-
pr-    ----->   pe-
pl-    ----->   ps-
ml-    ----->   ms-
-left     ----->   -start
-right     ----->   -end
form-row    ----->   row
<label    ----->   <label class="form-label"
data-dismiss    ----->   data-bs-dismiss
badge badge-danger    ----->   badge bg-danger

Další odlišnosti

Zavírací tlačítko pro modal:

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

Dropdown v menu:

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
          </ul>
        </li>

Někdy je třeba přidat padding pro form label

.form-label {
    margin-top: .5rem;
}

Odkazy jsou podtžené a modré

a, a:link, a:visited {
    color: #000;
    text-decoration: none;
}