'Bootstrap 5 navbar align items right
How do you align Bootstrap 5 navbar items to the right? In Bootstrap 3 it's navbar-right
. In Bootstrap 4 it's ml-auto
. But not work for Bootstrap 5.
Solution 1:[1]
Bootstrap 5 (update 2021)
As of Bootstrap 5 beta, left and right have been replaced by start and end for RTL support. Therefore the margin utilities changed for Bootstrap 5 beta:
ml-auto
=>ms-auto
(start)mr-auto
=>me-auto
(end)
Also note, all uses of left and right have been replaced with start and end in Bootstrap 5...
- ml-* => ms-*
- pl-* => ps-*
- mr-* => me-*
- pr-* => pe-*
- text-left => text-start
- text-right=> text-end
- float-left => float-start
- float-right=> float-end
- border-left => border-start
- border-right=> border-end
- rounded-left => rounded-start
- rounded-right=> rounded-end
- dropleft => dropstart
- dropright=> dropend
- dropdown-menu-left => dropdown-menu-start
- dropdown-menu-right => dropdown-menu-end
- carousel-item-left => carousel-item-start
- carousel-item-right=> carousel-item-end
Bootstrap 5 alpha (original answer)
This question was asked for Bootstrap 5 alpha, and therefore ml-auto
should still work.
Solution 2:[2]
I changed mr
to ms
and it worked for me, this is the best solution.
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
Solution 3:[3]
You need to use ms-auto
instead of ml-auto
in bootstrap 5.
Horizontal direction sensitive variables, utilities and mixins are renamed with more logical names — start
and end
in lieu of left
and right
in Bootstrap 5.
- Renamed
.left-*
and.right-*
to.start-*
and.end-*
. - Renamed
.float-left
and.float-right
to.float-start
and.float-end
. - Renamed
.border-left
and.border-right
to.border-start
and.border-end
. - Renamed
.rounded-left
and.rounded-right
to.rounded-start
and.rounded-end
. - Renamed
.ml-*
and.mr-*
to.ms-*
and.me-*
. - Renamed
.pl-*
and.pr-*
to.ps-*
and.pe-*
. - Renamed
.text-left
and.text-right
to.text-start
and.text-end
.
You can see more bootstrap 5 migration details here: https://getbootstrap.com/docs/5.0/migration/#sass
Solution 4:[4]
The justify-content-end class makes the difference.
<div class="collapse navbar-collapse justify-content-end" id="navbarResponsive">
Solution 5:[5]
This question is already answered here
For more clarification, as per Bootstrap 5 documentation, some utilities are renamed. including left and right.
left ==> start
right ==> end
therefore
ml has changed to ms
mr has changed to me
so right now:
ml-auto ==> ms-auto
mr-auto ==> me-auto
you can see this here in bootstrap documentation
Therefore, if you want your navbar items to be aligned "right", you have to put:
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
Solution 6:[6]
It is the same as Bootstrap 4 you should use ml-auto
. Here is a snippet from. Navbar Bootstrap 5 offical
And here is the official home page for Bootstrap 5
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarNavAltMarkup">
<!-- ml-auto still works just fine-->
<div class="navbar-nav ml-auto">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
<!--bootstrap 5 -->
<!-- JavaScript and dependencies -->
<script src=" https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js " integrity=" sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo " crossorigin=" anonymous "></script>
<script src=" https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js " integrity=" sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/ " crossorigin=" anonymous "></script>
Edit
The question was asked when bootstrap 5
was in alpha
. But right now we have beta
out and they did change the naming to be margin-start and margin-end
Renamed .ml-* and .mr-* to .ms-* and .me-*
Renamed .pl-* and .pr-* to.ps-* and .pe-*
So the answer should be like this:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
<!--bootstrap 5 -->
<!-- JavaScript and dependencies -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
Solution 7:[7]
I gave my <div class="collapse navbar-collapse" id="navLinks">
an #id
. then in css, I used the id to #navLinks {justify-content:flex-end;}
. Workred fine. Just run the code and do full page.
body {
background: #f5d9d5;
}
#navLinks {
justify-content: flex-end;
}
#home, #about, #portfolio, #testimonials {
margin: 2em 1em 0 1em;
font-size: large;
}
#brand_name {
font-size: 1.75em;
font-weight: 500;
padding-top: 4vh;
}
#bavbar-button {
align-items: flex-end;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<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-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!--Custom CSS-->
<link rel="stylesheet" href="KT.css">
<title>My_portofolio_home</title>
</head>
<body>
<header>
<!--navbar as a link-->
<nav id="mainNavbar" class="navbar navbar-expand-sm navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#" target="_blank" id="brand_name">AI</a>
<!--toggle_button-->
<button class="navbar-toggler" id="navbar-button" type="button" data-bs-toggle="collapse" data-bs-target="#navLinks" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!--navbar options/buttons-->
<div class="collapse navbar-collapse" id="navLinks">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="" id="home">Home</a>
<a class="nav-link" href="#" id="about">About</a>
<a class="nav-link" href="KT_portfolio.html" id="portfolio">Portfolio</a>
<a class="nav-link" href="KT_testimonials.html" id="testimonials">Testimonials</a>
</div>
</div>
</div>
</nav>
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
</body>
</html>
Solution 8:[8]
As an alternative approach, you can try flex:
<nav class="navbar navbar-dark bg-dark d-flex justify-content-end">
Solution 9:[9]
Replace mr-auto with ms-auto
This worked for me, hope it helps you :)
Solution 10:[10]
"dependencies": { "bootstrap": "^5.1.3", "next": "12.1.4", "node-sass": "^7.0.1", "react": "18.0.0", "react-bootstrap": "^2.2.3", "react-dom": "18.0.0" },
first option
<Navbar.Collapse id="basic-navbar-nav" className="justify-content-end">
<Nav>
<Link href="/" passHref>
<Nav.Link>Home</Nav.Link>
</Link>
</Nav>
</Navbar.Collapse>
className="justify-content-end"
or second option
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ms-auto">
<Link href="/" passHref>
<Nav.Link>Home</Nav.Link>
</Link>
</Nav>
</Navbar.Collapse>
className="ms-auto"
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | |
Solution 2 | Paul Roub |
Solution 3 | HDP |
Solution 4 | isherwood |
Solution 5 | legacy |
Solution 6 | |
Solution 7 | ABlue |
Solution 8 | Adrian Mole |
Solution 9 | Okhellohey |
Solution 10 |