How To Align Navbar Items To The Right In Bootstrap 4

Posted By Bajarangi soft , Posted On 10-10-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.

<!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-warning">

    <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>

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.

<!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 -->
<h2>Using css</h2>
<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>

Related Post

Difference Between Navs and Navbar In Bootstrap 4
How To Change The Background Color of The Active Navbar Link
How To Align Navbar Items To Center Using Bootstrap
How To Align Navbar Items To The Right In Bootstrap 4
Creating Navbar Vanilla Html And Css Vs Bootstrap
How To Design Full Width dropdown Navbar Using Bootstrap
How To Create Transparent Navbar Using HTML And CSS
How To Create Transparent Navbar With Video Header Using CSS
How Do I Shrink Navbar on Scroll Using Html and CSS