Sélectionner une page

I spent a lot of time aligning the navbar to the right in bootstrap 5 finally I found a way to align easily to the right side. which I am going to share through this guide. by default Bootstrap 5 navbar components are aligned to the left side. to align the right side simply copy and paste the Bootstrap 5 CDN and code in your code editor from below or bootstrap’s official side.

And then find the highlighted code below and change the « ml-auto  » to « ms-auto ». if you do ml-auto the navbar goes left side and with ms-auto right side. that’s it. please find the code below:

<!doctype html><html lang= »en »>  


  <meta charset= »utf-8″>  <meta name= »viewport » content= »width=device-width, initial-scale=1″>
  <!– Bootstrap CSS ->  

<link href= »https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css » rel= »stylesheet » integrity= »sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC »   crossorigin= »anonymous »>  
    <link rel= »stylesheet » href= »style.css » >  <title>Web design & development </title>
  <!–boxicons–>  <link  href= »https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css’ rel=’stylesheet »>  <!–boxicon–>  <!–fontawesome–>  <link rel= »stylesheet » type= »style/css » href= »https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css »>        <!–BT5 Icon–>  <link rel= »stylesheet » href= »https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css »>
  <script src= »https://kit.fontawesome.com/852b33b2f1.js » crossorigin= »anonymous »></script>


<nav class= »navbar navbar-expand-lg sticky-top  navbar-light bg-light »> 

<div class= »container-fluid »>

  <a class= »navbar-brand » href= »# »>
  <button class= »navbar-toggler » type= »button » data-bs-toggle= »collapse » data-bs-target= »#navbarNavDropdown »  aria-controls= »navbarNavDropdown » aria-expanded= »false » aria-label= »Toggle navigation »>  <span class= »navbar-toggler-icon »></span> 


<div class= »collapse navbar collapse » id= »navbarNavDropdown »> 

<ul class= »navbar-nav ms-auto »>    

<li class= »nav-item »>  <a class= »nav-link active » aria-current= »page » href= »index.html »>ACCUEIL</a> </li>     

<li class= »nav-item dropdown »> <a class= »nav-link dropdown-toggle » href= »service.html » id= »navbarDropdownMenuLink » role= »button » data-bs-toggle= »dropdown » aria-expanded= »false »>  SERVICES  </a> 

 <ul class= »dropdown-menu » aria-labelledby= »navbarDropdownMenuLink »> 

  <li><a class= »dropdown-item » href= »designdev.html »>Design & Devéloppement</a></li> 

 <li><a class= »dropdown-item » href= »brand.html »> Branding </a></li>  

 <li><a class= »dropdown-item » href= »digitalmarkeeting.html »> Markeeting </a></li>    

<li><a class= »dropdown-item » href= »web.html »>Web-site maintenance </a></li> 

<li><a class= »dropdown-item » href= »graphicservice.html »>Graphique Design</a></li>  



   <li class= »nav-item »> <a class= »nav-link » href= »galerie.html »>PROJECT</a>  </li> 

<li class= »nav-item »> <a class= »nav-link » href= »contact.html »>CONTACT</a>  </li>    

 <li class= »nav-item dropdown »> <a class= »nav-link dropdown-toggle » href= »# » id= »navbarDropdownMenuLink » role= »button »               data-bs-toggle= »dropdown » aria-expanded= »false »> DESIGN  </a>  

<ul class= »dropdown-menu » aria-labelledby= »navbarDropdownMenuLink »>

  <li><a class= »dropdown-item » href= »siteweb.html »>Site-web</a></li>  

<li><a class= »dropdown-item » href= »graphic.html »>Graphique</a


If you find this guide helpful please do not forget to subscribe.

English »