Display a navigation link in Bootstrap 4 when the website is viewed on a mobile

I am facing an issue with displaying a nav link on a responsive page. Below is the code snippet for reference:

        <div class="collapse navbar-collapse w-100 order-1 order-lg-0" id="navbarNav">
            <ul class="nav navbar-nav ml-auto">
                <ul class="navbar-nav mr-auto mt2 mt-lg-0 text-uppercase">
                    <li class="nav-item">
                        <a class="nav-link" href="#">USD $ <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Cart (1)</a> <!-- This one must display at the right side of the navbar -->
                    </li>
                    <li class="nav-link" id="removeOnCollapse">
                        <a href=""><i class="fa fa-search mt-auto mx-3" style="color: black;"
                                aria-hidden="true"></i></a>
                    </li>
                </ul>
            </ul>
        </div>

Is there any solution to achieve this desired outcome?

htmlcssbootstrap-4

Answer №1

To achieve this layout, simply utilize Bootstrap's flex classes like so: 

<div class="d-flex justify-content-between">...</div>

For further information, you can refer to the following link: https://getbootstrap.com/docs/4.0/utilities/flex/

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

Is there a way to adjust the size of this map?

I’m attempting to adjust the dimensions of the div.wx-imap-pane.wx-module to a height of 346px and a width of 1727px using greasemonkey, but I’m struggling to make the change take effect. My attempt: div#div.wx-imap-pane.wx-module, div#div.wx-imap-pa ...

htmldictionaryresizeweather

The dataTable plugin is malfunctioning, displaying all records on a single page when it should only show 10 per page

I utilized the dataTable plugin to format my HTML table, but unfortunately it is not displaying the results as expected. Instead of showing 10 records per page, it is displaying all records at once. I even tried setting "iDisplayLength: 10" but it didn&apo ...

javascriptphpjqueryhtmlcss

Guidelines on receiving a user's color input and showcasing it with JavaScript

/* Take a color input from the user and apply it to the variable called "message". */ <script type="text/javascript"> var textcol, message = "Great choice of color!"; textcol=window.prompt("Please enter a color:&quo ...

javascripthtmlcolors

What is the best way to replicate floats using flexbox?

Currently, I am exploring the possibility of using flexbox in a similar manner as floats. My main aim is to have one child element create a column on the right side, while the rest of the children form another column on the left side. The challenge is that ...

cssflexboxcss-float

How should HTML5 type "month" be stored in a Django model's database using which data type?

My HTML form includes a field for inputting a month <input type='month' name="last_appraisal" id='txtLastAppraisal' value='2013-12' /> In the Django model, I have defined this field as last_appraisal = models.DateFie ...

pythondjangohtml

Tips for converting plain text output into HTML tags

I recently set up a contact form 7 on my website, and I'm trying to customize the message that appears after submission. However, I'm running into an issue when attempting to split the message into two different colors. I created a span class to ...

phphtmlcsswordpress

What is the best way to create a blurred effect on an image during loading, and then transition to a sharp image once it is fully loaded?

I'm currently working on a project where I want the images to display as a blurred preview initially, and then become clear once fully loaded. This is similar to the feature seen on Instagram, where the app shows a blurred image before displaying the ...

javascripthtmljquerycss

Creating a responsive grid layout with HTML and CSS

Is there a way to adjust the grid layout so that the second row of blocks align just below the corresponding block above instead of creating an entirely new row? http://jsfiddle.net/AndyMP/wSvrN/ body { margin-left: 0px; margin-top: 0px; marg ...

htmlcssgrid

When utilizing the "nofollow/sponsored" attribute, window.open will open in a new window as opposed to a new tab

When using a window.open link with the "nofollow" attribute, I expect it to open in a new tab. However, it opens in a new window instead. This code successfully opens in a new tab: $('.b_link').click(function (e) { e.preventDefau ...

javascripthtmljqueryhyperlink

Enhancing Xcode security login through personalized security question prompts

I have been working on implementing the following code snippet: NSURL *url = [NSURL URLWithString:@"https://login.XXX.com/security/xxxforms// logonchalnp.fcc?TYPE=33554433&REALMOID=06-95b0f0c8-198a-1039-b583 83b02659fd47&GUID=&SMAUTHREASON=0&a ...

htmlauthenticationxcode4.5asihttprequest

Do you require a lightbox for a white text box set against a semi-transparent black background?

Currently, I am in the process of developing a Chrome extension that will be compatible with my Android app. As part of this development, I need to code the HTML/CSS for the extension. The main functionality of the extension allows users to add tags to a s ...

htmlcssgoogle-chrome

The Lifecycle of an HTML Page

Trying to grasp the life cycle of an HTML page has been a challenge for me. Unable to find comprehensive resources online, I took matters into my own hands by experimenting with the f12 tool in Internet Explorer. Through these experiments, I have formulate ...

html

Combine the filter and orderBy components in AngularJS ng-options for a customized select dropdown menu

I am facing a challenge with my AngularJS dropdown that uses ng-options. I want to apply both the filter and orderBy components together in the ng-options section. The filter for the select is functioning correctly, but it seems like the OrderBy component ...

javascripthtmlangularjsdropdownng-options

Ways to retrieve an input field value without triggering form submission

I'm currently working on a payment form where users input the amount in a text field. I also have another text field on the same form that should automatically display the amount in words based on the user input. However, I'm struggling to figure ...

javascriptphphtml

elevate design css/widget/components

I am currently on the lookout for samples of boot strap floating css/widget/parts. Despite googling with keywords like 'floating / fixed', I have only come across sticky footer and header examples, or some simple panel samples. By 'floatin ...

csstwitter-bootstrap

designing an uncomplicated button that incorporates the column size feature of Bootstrap

My concept involves crafting a minimalist green button with no text or border, just a sleek green shape that would automatically match the size of col-md-12 from Bootstrap. While I've come across similar inquiries, my limited understanding is hinderin ...

htmlcsstwitter-bootstrap

Cannot apply "!important" using Jquery to a dynamically sized tag in IE11

Here is a script I have: box.copyHeight = function() { var heights = [], i, hT; for (i = 0; i < arguments.length; i++) { if ($(arguments[i])) { $(arguments[i]).css('height', ''); ...

javascriptjqueryhtmlcss

send a variable across multiple web pages at the same time

Currently, I have a variable that needs to be passed through multiple PHP pages. The code below effectively sends the variable to one page (index.php). echo "<a href='index.php?PHOTO=".$i."'>select</a>"; However, I am wondering how ...

phpvariableshrefhtml

Dynamic content display using AJAX

Having already tried to find a solution through Google with no success, I am at a loss. I have articles where a paragraph is initially displayed, followed by a "read more" link which reveals more content using JavaScript. However, this approach may slow do ...

phpjavascripthtmlajax

Is it possible in Javascript to trace the origins of a particular element's property inheritance for debugging purposes?

I'm currently dealing with an issue where the computed style font-size of a particular element is "16px". I've been attempting to pinpoint where in the CSS or JavaScript this font size setting is coming from, specifically within one of its parent ...

javascripthtmlcssdebuggingproperties