 |
VOOZH | about |
|
VOOZH | about |
The .ml-auto class in Bootstrap 4 is used to apply an automatic left margin to an element. This moves the element to the right side of its container, which is especially helpful for aligning items when using a flex layout. In this article, we will align the navbar to the right in two different ways, below both the approaches are discussed with proper example.
Example 1: In the first example, we use the .ml-auto class of Bootstrap 4 to align navbar items to the right. The .ml-auto class automatically gives a left margin and shifts navbar items to the right.
Program:
</p><pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<!-- Including the bootstrap CDN -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">
</script>
</head>
<body>
<!-- Creating a navigation bar using the
.navbar class of bootstrap -->
<nav class="navbar navbar-expand-sm bg-light">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">
About
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Contacts
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Settings
</a>
</li>
</ul>
</nav>
</body>
</html></code></pre><p></p><p dir="ltr"><b><strong>Output:</strong></b><img src="https://media.geeksforgeeks.org/wp-content/uploads/20200224102118/righalignnavbar.png" width="inherit" height="inherit"></p><p dir="ltr"><b><strong>Example 2:</strong></b><span> In this example, we do not use any pre-defined Bootstrap 4 class to align the items. In this example, we create a navbar and then using CSS gives the left margin as an auto which shifts the navbar items to the right. </span></p><p dir="ltr"><b><strong>Program:</strong></b><gfg-tabs data-run-ide="true" data-mode="light"><gfg-tab slot="tab">HTML
<!DOCTYPE html>
<html>
<head>
<!-- Including the bootstrap CDN -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">
</script>
<style>
.navbar-nav {
margin-left: auto;
}
</style>
</head>
<body>
<!-- Creating a navigation bar using the
.navbar class of bootstrap -->
<nav class="navbar navbar-expand-sm bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">
About
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Contacts
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Settings
</a>
</li>
</ul>
</nav>
</body>
</html>Output:👁 Image
