How to shift a single menu item in bootstrap 4 to the right-CodePudding

I am using Bootstrap 4 as part of a Laravel 8 blog system I am doing now. The menu items are well in place but I want to shift the last menu item to the right. I have tried many options including ml-auto but it does not have any effect on the item. I also tried to benefit from previous similar posts but they all proved not to work for my case. I would so much appreciate any assistance in this regard. Please find my code below:

    <div >
      <a  href="#">{{config('app.name', 'Learning')}}</a>
      <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span ></span>
      </button>
      <div  id="navbarNavAltMarkup">
        <div >

          <a  href="/">Home</a>
          <a  href="/about">About Us</a>
          <a  href="/services">Services</a>
          <a  href="/posts">Blog</a>
          <a  href="/posts/create">Create Post</a>

        </div>
      </div>
    </div>
  </nav>```

CodePudding user response：

You can do that by adding this css line:

.nav-link:last-child {
    right: 0;
    position: absolute;
}

CodePudding user response：

The first issue is that you say you are using Bootstrap 4, but your syntax is of Bootstrap 5. data-bs-* attributes are for B5, B4 has only data-* attributes.

Then for aligning the last item to the right, first you'll need your navbar-nav to take all width, thus add w-100 to it. Then you'll need the last item to fill all the remaining space, which you can do by adding flex-fill. And then all you need to do is add the text-end to this same element. Your code becomes:

<div >
    <a  href="/">Home</a>
    <a  href="/about">About Us</a>
    <a  href="/services">Services</a>
    <a  href="/posts">Blog</a>
    <a  href="/posts/create">Create Post</a>
</div>

JSFiddle

Again, if you are indeed not using B5, but B4, then change all the data-bs-* attributes to only data-*, and also text-end becomes text-right.