Ways to position a navigation item on the right side of a navigation bar

Seeking guidance on how to align my navigation items in a specific position. I would like my brand name to appear on the left side and the login button on the right end of the navbar. As a newcomer to bootstrap, I am in need of assistance with this issue.

.navbar-brand {
  font-weight: bold;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link navbar-brand active" href="#">NotePro</a>
    </li>
    <li class="nav-item ">
      <a class="nav-link" href="#">LogIn</a>
    </li>
  </ul>
</div>

View the desired layout here

javascripthtmlcssbootstrap-4

Answer №1

If you want to align items in a ul element, you can utilize Bootstrap classes like d-flex and justify-content-between. For more information, check out the documentation here

.navbar-brand {
  font-weight: bold;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
  <ul class="nav d-flex justify-content-between">
    <li class="nav-item">
      <a class="nav-link navbar-brand active" href="#">NotePro</a>
    </li>
    <li class="nav-item ">
      <a class="nav-link" href="#">LogIn</a>
    </li>
  </ul>
</div>

Answer №2

Inserted the following code into the container:

.container {
  display: flex;
  justify-content: space-between;
}

Moved the brand outside of the ul tag.

.navbar-brand {
  font-weight: bold;
}

.container {
  display: flex;
  justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="new.css">
  <title>NotePro</title>
</head>

<body>
  <div class="container">
    <a class="nav-link navbar-brand active" href="#">NotePro</a>
    <ul class="nav">
      <li class="nav-item ">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item ">
        <a class="nav-link" href="#">about us</a>
      </li>
      <li class="nav-item ">
        <a class="nav-link" href="#">LogIn</a>
      </li>
    </ul>
  </div>
</body>

</html>

Answer №3

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<!--your code starts here-->

<nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
              </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Disabled</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>

Apply the ml-auto class to your UL element.

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

Concealed Text Entry

Hi, I am looking to create a simple input text field that functions like this example. <input type="text" id="pin" name="pin" maxlength="4" size="4" placeholder="____"> I would like the placeholder on the front end to stay visible until all charact ...

javascripthtmlplaceholder

What is the reason for dirname not being a module attribute? (using the __ notation)

Currently, I am learning the fundamentals of Node.js. Based on the documentation, both __dirname and __filename are part of the module scope. As anticipated, when I use them like this: console.log(__dirname) console.log(__filename) They work correctly, d ...

javascriptnode.js

Encountering the error message "require is not defined" in the browser while utilizing gulp-browserify for my React.js modules

I am currently working on using gulp-browserify for creating a bundle.js file that will be utilized in the client's browser to initiate rendering of React components. Below is my App.js file: /** @jsx React.DOM */ var React = require('react&apo ...

javascriptnode.jsgulpreactjsbrowserify

Utilize three.js within a Google web app script - unable to incorporate the script module type for loading three.js

Looking to incorporate three.js into a Google Web Script to load 3D CAD files, I discovered that the installation instructions on threejs.org specify the script needs to be of "module" type. However, after researching for several days, it seems that Google ...

javascriptgoogle-apps-scriptthree.js

Retrieving multiple lines of text from the database and populating a TextArea

I am encountering an issue with multi line text saved in a MySql database as VARCHAR 255. When I retrieve and process it using the nl2br PHP function, it displays correctly (with multiple lines). However, when I retrieve the multi line text from the databa ...

phpjavascriptmysql

Evaluating the functionality of a React JS dropdown using Selenium automation and Java

Could you please advise me on how to select a value from a dynamically populated dropdown using React JS? An example would be greatly appreciated. Below is the HTML code snippet for the page... The division that contains the label "Year" functions as ...

javascriptjavaseleniumreactjs

What could be improved in this Angular script?

angular.module('events.services', []) .factory('EventService', function($http, $cordovaSQLite) { return { fetchData: function() { return 'Data fetched successfully!'; } ...

javascriptangularjs

Excessive content spilling over the div container

Hello everyone I've been trying to set up a div that includes an image, a title, and some text. I want the image to be aligned on the left side, with the title and text following on the right. However, I'm having an issue where the text is overf ...

htmlcssoverflow

Load a 3D object or model using three.js and then make modifications to its individual components

Seeking advice on displaying and manipulating a 3D model of a robot arm in a browser. How can I load the model into three.js to manipulate all the sub-parts of the robot arm? Using Inventor, I have an assembly of a rotary motor and a shaft exported as an ...

javascriptmodel3dloadthree.js

Is it possible to retrieve the current selector as a string in LESS?

Is there a way to utilize the name of my css classes to specify the URL for an image they depend on? I know that using an ampersand within a selector allows you to add additional states, but can it be accessed as a string? For example: .my-image{ back ...

cssless

What causes the CSS `resize` property to be inherited in Chrome browsers?

It was my understanding that elements do not inherit the resize property from their parent elements. However, I recently discovered that in Chromium they actually do: Here is a screenshot of Chromium's inspector: Check out this demo: http://jsfi ...

cssgoogle-chromeresize

npm's protocol for handling callback errors

While exploring the coding style guidelines by npm, I stumbled upon a rather enigmatic suggestion: Be very careful never to ever ever throw anything. It’s worse than useless. Just send the error message back as the first argument to the callback. Thi ...

javascriptasynchronouserror-handlingcallbacknpm

changing the order of items in a list when using ngFor

I'm currently working on setting up a list-group with list-group-items, but I've encountered a CSS issue caused by Angular when using ngFor on the list-group items. It seems like Angular automatically assigns the bootstrap classes .list-group-it ...

angularbootstrap-4

How can I prevent IE10/IE11 from displaying the open or save prompt?

Currently, I am utilizing JavaScript blob to download files from the server as shown below: let blob = new Blob([resposne['_body']], { type: contentType }); if (navigator.msSaveBlob) { navigator.msSaveOrOpenBlob(blob, fileName); // applicabl ...

javascriptangularjstypescriptblobinternet-explorer-11

The type 'Argument of (props: ITableProps) => JSX.Element' cannot be assigned to the parameter type of... - React High Order Component

One of the tools I have in my arsenal is a loader HOC This is how the HOC looks like: const withLoader = <P extends object>(WrappedComponent: new () => React.Component<P, any>, loading: boolean) => { return class WithLoading extends ...

javascriptreactjstypescriptreact-hoc

When I attempt to navigate using a route on my website, all I see is a

Hey everyone, I'm looking to develop a webpage that switches pages using Navbars. I want to utilize bootstrap and react-route-dom to achieve this functionality. However, before incorporating bootstrap, I encountered some errors that went unnoticed. I& ...

javascriptreactjsreact-routerreact-router-domreact-bootstrap

What could be causing a tooltip to remain visible even after a mouseleave event in a React application

My goal is to display a tooltip when the mouse enters an item, and hide it when the mouse leaves. I created a demo that works perfectly fine. Check out the working demo here The above code successfully shows the tooltip on hover and hides it on leave. I ...

javascriptreactjsreact-reduxreact-hooks

The website does not support the zoom out or scrolling features on iOS devices

A portion of our website has been optimized for mobile devices, however, we have decided to direct iPhone users to the desktop version when accessing the Blogs section (all PHP content) at this time. While this functions properly on an iPad, we have encou ...

htmlsafariios6mobile-safariviewport

The elegant scroll-bar (whether directive-based or not) seems to be having trouble functioning within the ng-view

I am looking to add a stylish scroll bar to a paragraph that is located within the ng-view. My module code appears as follows: var myweb = angular.module('myweb' , ['ngRoute', 'perfect_scrollbar']); myweb.config(function($ro ...

javascripthtmlangularjsperfect-scrollbar

Verifying the visibility of an element

I am facing a challenge with a list of apps displayed on a non-angular page. The availability of these apps depends on the subscription level purchased by the user. Even if an app has not been purchased, it is still listed but displayed with an overlay (pl ...

javascriptangularjsseleniumselenium-webdriverprotractor