A Bootstrap 5 rácsrendszere hat osztályt tartalmaz:
.col- (extra kicsi eszközök - képernyőszélesség 576px-nél kisebb)
.col-sm- (kis eszközök - képernyőszélesség 576px vagy nagyobb)
.col-md- (közepes eszközök - képernyőszélesség 768px vagy nagyobb)
.col-lg- (nagy eszközök - képernyőszélesség 992px vagy nagyobb)
.col-xl- (extra nagy eszközök - képernyőszélesség 1200px vagy nagyobb)
.col-xxl- (dupla extra nagy eszközök - képernyőszélesség 1400px vagy nagyobb)
<!-- Szabályozd az oszlopok szélességét és azt, hogy hogyan jelenjenek meg különböző eszközökön -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Vagy csak hagyd, hogy a Bootstrap automatikusan beállítsa -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
Hogyan és mit módosíthatsz a navbarban:
- .navbar-expand-xxl|xl|lg|md|sm --> reszponzivításért felelős
- .navbar-expand-* --> ha eltávolítod ezt a részt, vertikális lesz a sáv
- .justify-content-center - középre állítod a tartalmát
- .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light --> ez módosítja a navbar színét
- .navbar-dark (fehér szöveg), .navbar-light(fekete szöveg)
- .navbar-brand - lógóhoz (a képet autmatikusan körré formálja)
- active (nav-link után) - kiemeli az adott linket
- disabled - inaktívvá teszi a linket