Tips for moving a specific menu item to the right in bootstrap 4

Currently, I am integrating Bootstrap 4 into a Laravel 8 blog platform that I am working on. While the menu items are correctly positioned, I am facing an issue where I need to move the last menu item to the right. Despite trying various options like ml-auto, I have not been able to achieve the desired effect on the item. Previous solutions from similar posts have also failed in my case. Any help or guidance on this matter would be greatly appreciated. Below is the code snippet for reference:

  <nav class="navbar navbar-expand-lg navbar-light navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">{{config('app.name', 'Learning')}}</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="nav navbar-nav">

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

        </div>
      </div>
    </div>
  </nav>
htmlcsstwitter-bootstrapbootstrap-4html-lists

Answer №1

One issue that stands out is the discrepancy between your statement of using Bootstrap 4 and the syntax being more aligned with Bootstrap 5. In Bootstrap 4, you should be using data-* attributes instead of data-bs-*.

To align the last item to the right, ensure that your navbar-nav takes up the full width by adding w-100. Then make the last item fill the remaining space by adding flex-fill, followed by applying text-end to achieve the desired alignment. Here's how your code should look:

<div class="nav navbar-nav w-100">
    <a class="nav-link" href="/">Home</a>
    <a class="nav-link" href="/about">About Us</a>
    <a class="nav-link" href="/services">Services</a>
    <a class="nav-link" href="/posts">Blog</a>
    <a class="nav-link flex-fill text-end" href="/posts/create">Create Post</a>
</div>

JSFiddle

If you are indeed using Bootstrap 4 and not Bootstrap 5, remember to replace all instances of data-bs-* with data-*, and switch text-end to text-right.

Answer №2

To achieve this effect, simply include the following CSS code snippet:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Bootstrap is designed to dynamically adjust to the size of the browser window, ensuring a smooth

After completing the construction of a new website, I encountered an issue where the styles and layouts are responsive when adjusting the browser window size. However, upon opening responsive inspect tool, no changes occur - columns refuse to break and t ...

htmlcsstwitter-bootstrapresponsive-design

Bespoke HTML helper dropdown selection box

Here's a snippet I have: @Html.DropDownList("consultations", Model.ConsultationsTruncated, new { @class = "form-control", @id = "consultations" }) The displayed texts are truncated: For instance string s = "Hello everybody" ==> Text ="Hel..." ...

c#html.netasp.net-mvcrazor

Display a specific paragraph inside a div using jQuery

I am having trouble getting my jQuery code to display a specific paragraph when a particular div is clicked on. My goal is for the content "v" to be displayed if the user clicks on the ".Virus" div, and for the contents of ".screenInfo" to be shown if the ...

javascriptjqueryhtmlcssfunction

Issue: CSS breaking in Node.js Express app when navigating with multiple child paths or parameter paths in the route.Description: Encounter

When attempting to load a page like /patient_profile, the CSS loads correctly. However, when continuing the path to /patient_profile/settings_patient_profile, the CSS breaks. Both pages mentioned are the same file, just testing the routing. The route is m ...

cssnode.jsexpressejs

Include a flexible div in the hero section and change the position when resizing the screen

Looking to achieve a specific layout with only two resolutions in mind (767px minimum and maximum). For screens larger than 767px, display two divs side by side: one with text on the left and the other with an image on the right. The text remains in a fi ...

htmlcssbootstrap-4

How can I implement a hover-over image change effect similar to the one seen in Gmail accounts?

I am attempting to implement a feature that allows users to change their image, similar to what can be done in a GMail account. When the user hovers over the image, an option to "change image" should appear. This may be a new concept for me because I am ...

javascripthtmlcss

How come I am unable to squeeze in 4 columns with cards on a compact screen while utilizing Bootstrap 4?

After several attempts, the 4 columns still refuse to conform to a smaller screen size. The final column ends up being displayed horizontally at the bottom of the cards. @media (max-width: 575px) { .crd-group { flex-wrap: wrap; } .cr ...

htmlcssbootstrap-4

Aligning labels vertically with inputs

How can I align all my input fields (image) to the same vertical line? I tried using the vertical-align css property and a sass mixin I found (see below), but neither seemed to work. @mixin vertical-align($pos) { position: $pos; top: 50%; -we ...

cssvertical-alignment

Is there an HTML5 input option specifically for timecodes?

Looking to implement an HTML5 input field for editing video and audio timecode, but struggling to find a suitable solution. The goal is to display and edit the following time components: Hours, minutes, seconds, and milliseconds. After researching, the ...

javascripthtmlinput

Retrieve information from HTML elements

I am looking to extract the paragraph content surrounded by HTML tags using Python. &lt;p style=&quot;text-align: justify;&quot;&gt;&lt;span style=&quot;font-size: small; font-family: lato, arial, helvetica, sans-serif;&quot;& ...

pythonhtmlpython-3.x

unable to render the JavaScript code

Utilizing JavaScript post an ajax request to showcase the data in a div using new JS content. The example code is provided below: //ajax call from a.jsp var goUrl = "/testMethod/getTestMethod; var httpRequest=null; var refreshCont ...

javascripthtmlajaxjsp

Keep the CSS Grid cell blank without explicitly defining the position of other elements

I am trying to have an icon with a specific class element positioned in the center in relation to the first row, while skipping a cell in the second row's first column. Is there a way to skip that cell without explicitly specifying the grid-column po ...

htmlcss

What is the method for activating or deactivating pointer events for a particular section of an element?

Is it feasible to deactivate pointer events for only a portion of an element rather than the entire element? For instance, as shown in the image below.. https://i.sstatic.net/rnS7M.png Perhaps one could utilize another element to cover the specific area ...

htmlcss

Creating a div with a fixed size in Tailwind CSS: A beginner's guide

I received some initial code from a tutorial and I've been having trouble setting the correct size. Despite searching through documentation for solutions, it seems like there's a fundamental aspect that I'm overlooking. The main issue is tha ...

htmlreactjstailwind-css

Examining a specific element node to see if it contains a certain string

When using PHP Unit with Selenium Server, my goal is to verify if a specific element in an xpath contains a certain string value, like this: <table> <thead></thead> <tbody> <tr> <th>1</th> < ...

phphtmlxpathseleniumphpunit

Alternative content can be pasted into the webpage

After finding out a peculiar phenomenon related to copy and paste, I decided to share it. If you head over to the Diablo 3 website () and scroll down to the bottom of the page, you will notice: ©2012 Blizzard Entertainment, Inc. All rights reserved A ...

csscopy-pasteuppercase

.mouseleave() triggers when exiting a designated boundary area

I'm attempting to implement a roll-up feature for a div when the mouse is over another div. The issue I'm facing is that the roll-up div closes even if the mouse just exits through the bottom border. Is there a way to achieve this using JavaScrip ...

javascriptjqueryhtmlcss

The modal window displays an error upon submission and prevents itself from closing

Below is the HTML code for a modal form: <form action="" class="cd-form" method="POST" id="signinform" onsubmit="return: false;"> <p class="fieldset" id="warningPanel"> <?php ShowAlertWarning(); ?> </p> <p ...

javascriptphpjqueryhtmltwitter-bootstrap

What could be causing ReactNative Dimensions component to display lower resolutions?

Currently, I am developing an application using React Native v0.45.1 and testing it on my S6 device. Despite setting a background image that matches the resolution of my phone, it appears excessively large on the screen, cutting off most of the content. T ...

androidcssreactjsreact-nativebackground

In Google Chrome, the input types for email, URL, and search feature a thin 1px padding on the left and right sides

If you are a user of Google Chrome (the only browser I am familiar with that exhibits this behavior), please visit this example, uncheck the "Normalized CSS" box, and observe the input elements. In Google Chrome, the email, URL, and search input fields ha ...

htmlgoogle-chromeinput