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 »>
<head>
<meta charset= »utf-8″> <meta name= »viewport » content= »width=device-width, initial-scale=1″>
<!– Bootstrap CSS ->
<link href= »https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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/[email protected]/font/bootstrap-icons.css »>
<script src= »https://kit.fontawesome.com/852b33b2f1.js » crossorigin= »anonymous »></script>
</head>
<body>
<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>
</button>
<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>
</ul>
</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
</li>
</ul>
</li>
</ul>
</div>
</di>
</nav>
If you find this guide helpful please do not forget to subscribe.