Bootstrap Navs

Bootstrap 4 ile Navs yani bir menü oluşturmak için .nav sınıfına sahip <ul> etiketi içine ekleyeceğiniz her bir <li> etiketine .nav-item ve her bir <li> etiketi içine ekleyeceğiniz <a> etiketine ise .nav-link sınıfını vermemiz gerekiyor.

• Link
• Link
• Link
• Disabled

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Örnek 1 için tıklayınız.

Boostrap 4 Yatay Menü Hizalama (Aligned Navs)

Bootstrap 4 navs' leri hizalamak için bootstrap flexbox sınıflarını kullanabiliriz.

** Ortaya almak için .justify-content-center sınıfını kullanmalıyız.

** Sağa hizalamak için .justify-content-end sınıfını kullanmalıyız.

  
   <ul class="nav justify-content-center">
   
   </ul>    
 
   <ul class="nav justify-content-end">
 
  </ul>
 

Örnek 2 için tıklayınız.

Boostrap 4 ile Dikey Menü Hazırlama (Vertical Navs)

Boostrap 4 navs ile dikey menü hazırlamak için .flex-column sınıfını kullanmalıyız.

  <ul class="nav flex-column">  
  
  </ul>

Örnek 3 için tıklayınız.