How to align navbar items to the right in Bootstrap 4 ?

02 Mar, 2020
The .ml-auto class in Bootstrap can be used to align navbar items to the right. The .ml-auto class automatically aligns elements to the right. 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:<!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>
<!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>
Output:
Example 2: 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.
Program:<!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>
<!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:
Bootstrap-4
Picked
Bootstrap
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to make Bootstrap table with sticky table head?
How to set vertical alignment in Bootstrap ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?