I have tried using ml-5 and various other spacers. This is for bootstrap 5
<body>
<nav class="navbar navbar-expand navbar-dark bg-dark">
<a class="navbar-brand" href="#">Welcome</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="Signup.html">Sign In</a>
</li>
</ul>
</nav>
</body>
CodePudding user response:
You need to add container class to the navbar like below
<!DOCTYPE html>
<html>
<head>
<title>Navbar</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand navbar-dark bg-dark">
<div class="container-fluid">
<!-- Wrapped with container-fluid -->
<a class="navbar-brand" href="#">Welcome</a>
<div class="collapse navbar-collapse">
<!-- Wrapped with collapse navbar-collapse, otherwise navs won't be visible -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="Signup.html">Sign In</a>
</li>
</ul>
<!-- Wrapped with collapse navbar-collapse, otherwise navs won't be visible -->
</div>
<!-- Wrapped with container-fluid -->
</div>
</nav>
</body>
</html>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
- Add container-fluid inside the navbar
- Wrap navs with collapse navbar-collapse
Source - > https://getbootstrap.com/docs/5.0/components/navbar/
CodePudding user response:
for bootstrap 5 u have to use ms-5 not ml-5 or in this case ps-5
<nav class="navbar navbar-expand navbar-dark bg-dark ps-5">
<a class="navbar-brand" href="#">Welcome</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="Signup.html">Sign In</a>
</li>
</ul>
</nav>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>