The alignment of the items on the right side of a CSS bootstrap navigation bar is not working

I am currently working on a project using Bootstrap and I have created this navbar:


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

        <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav my-2 my-lg-0">
                <li className="nav-item">
                    <Link to="/register" className="navbar-link">Register</Link>
                </li>
                <li className="nav-item">
                    <Link to="/login" className="navbar-link">Login</Link>
                </li>
            </ul>
        </div>
    </nav>

For styling, I am using Bootstrap CDN version 4.4.1:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.4.1/flatly/bootstrap.min.css" />

My goal is to achieve a layout like this:

https://i.sstatic.net/xvLr4.png

However, despite my efforts, my current result looks like this:

https://i.sstatic.net/cuQIa.png

I'm a bit stuck here, can anyone point out what I might be missing?

Thanks for your help!

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To enhance the alignment of 'Register' and 'Login', consider appending ml-auto to the class list for the <ul>

Answer №2

To enhance your navbar layout, insert the code 

<div class="navbar-nav mr-auto"></div>
directly following 
<div class="collapse navbar-collapse" id="navbarSupportedContent">
. Also update the class name from navbar-link to nav-link in your <Link/> components.

Take a look at the demonstration here: https://jsfiddle.net/rnm617jz/1/

Keep in mind that I modified the className attribute to class, as React is not included in the demo and this change was made for testing purposes.

Answer №3

To achieve the desired result, simply include the ml-auto class next to the navbar-nav.

<ul className="navbar-nav ml-auto my-2 my-lg-0">

In order to correct your navbar links, replace the navbar-link class with nav-link.

<Link to="/" className="nav-link">sample</Link>

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

Obtaining your CSGO inventory via Steam API using jsonp: A step-by-step guide

Hey there! I'm currently facing an issue while trying to access a player's CSGO inventory using Valve's API. Unfortunately, I keep running into the error message stating that no 'access-control-allow-origin' header is present on th ...

javascripthtmljsonapijsonp

Is it possible to showcase a FullCalendar event in full width while being positioned behind other events scheduled for the same time slot?

Is there a way to customize FullCalendar so that concurrent events in the same timeslot are not vertically divided? I have a Google calendar named "time-blocking template" where I want all events to take up 100% of the timeslot width, even if there are ot ...

jquerycssfullcalendar

What could be the reason for my Javascript and JQuery code not functioning properly?

Recently, while browsing through a question thread I stumbled upon some advice given to an individual whose Javascript code was not functioning properly. They were suggested to place a function that started on loading of the page. I decided to experiment ...

javascriptjqueryhtml

How to adjust the size of an SVG image on an HTML webpage

I've got an SVG file nestled inside my HTML code, and one of the cool things I've learned about this format is its ability to stay crisp and clear even when zoomed in. Typically, with a JPEG file, you might store it as a small 50 by 50 icon, the ...

htmlsvg

Ways to conceal HTML tags within a text box

Currently, I am utilizing PHP to extract content from a text file and display it in a textbox. However, I am interested in finding a way to conceal the HTML tags within the textbox (as shown in the image) without deleting them, making them invisible to use ...

phphtmlcsstextboxtags

What is the best way to transfer attribute values from multiple elements and paste them each into a separate element?

I have multiple elements with the tag <a class="banner2">. Each of these elements has a different URL for the background image and href value. <a href="#" target="_blank" class="banner2" style="background-image:url('<?php echo get_templat ...

javascriptphpjqueryhtmlcss

Even when applying a class, the CSS link:hover style will only affect the initial occurrence

I've hit a wall on this issue and can't seem to find a solution. I styled a few links using classes, but it seems that only the first link is accepting the :hover and :visited state styling. I made sure to use classes to style all of them. Not su ...

htmlcsshyperlinkhovervisited

"Create dynamic tables with AngularJS using ng-repeat for column-specific rendering

I have a model called Item with the following structure: {data: String, schedule: DateTime, category: String} I want to create a report that displays the data in a table format like this: <table> <tr> <th>Time Range</th&g ...

javascripthtmlangularjs

What is the best way to implement smooth scrolling to an anchor tag from a different page in NextJS?

In my NextJS project, I have two main pages - the Home page and the Leaderboard page. The navigation bar code looks like this: <div className={styles.navItem}> <Link href="/"> <a className={styles.navLinks} onClic ...

javascripthtmlcssnext.js

The time discrepancy in Django caused by importing data from MySQL with mismatched timezones

Currently, I am utilizing Django 3 with Bootstrap 4 and MySQL 5.7 on a Laragon server running Windows 10. In my Django settings: TIME_ZONE = 'Europe/Paris' In my MySQL settings: TIME_ZONE = SYSTEM (My system is set to 'Europe/Paris') ...

mysqldjangobootstrap-4timezonedjango-timezone

Having trouble applying CSS to SVG icons from defs file in Webkit Browser

I've been tinkering with a project that incorporates SVG icons, hoping to style them using CSS for various scenarios and hover effects. However, my attempts are falling short in Webkit, while Firefox is displaying the icons as intended: http://codepe ...

htmlcsssvg

Inject AngularJS variable bindings into the view alongside HTML code

Is it possible to insert HTML markup into an Angular variable? app.js function myController($scope){ $scope.myItem = '<p>' + Example + '</p>'; } index.html <div ng-controller="myController">{{myItem}}</div&g ...

htmlangularjs

What is the best way to create an element that is clickable but transparent in appearance?

Is there a way to achieve an inset box shadow on elements like an iframe without blocking clicks on the element itself? The common strategy of overlaying a div over the iframe achieves the desired visual effect but unfortunately hinders interaction with th ...

htmlcss

Tips on accessing attribute values within a loop using jQuery

I've got this snippet of code from an HTML form. <?php foreach ($charges as $c): ?> <br><input type="checkbox" id="charge<?php echo $c->id; ?>" cash="<?php echo $c->amount; ?>"> <?php echo $c->description ...

javascriptjqueryhtml

Keep HTML in sync across browser and server

Is there a way to efficiently update a large unordered list in a web application without sending the entire list over the network or resorting to pagination, while ensuring it stays synchronized with a memoized server-generated copy? ...

htmlajaxsynchronization

Having trouble with the Bootstrap float right class? Your buttons are refusing to respond?

Currently, I am experimenting with ExpressJS and EJS rendering. I have noticed that the Bootstrap float-right class is not working properly on the navbar. I even attempted using d-flex, but the issue persists. I am unsure if I am missing something in my co ...

cssnode.jsexpressbootstrap-4ejs

HTML Date Form: Setting the Start Date to Tomorrow with JavaScript

Is there a way to restrict the start date to tomorrow's local date? I'm having trouble with the code below: <form method="POST"> <div> <label for="s2">pickup_date</label> ...

javascripthtmlformsdatelocaltime

I prefer not to have the entire URL visible to me

function updateDate(day, month, year) { month += ""; if (month.length <= 1) month = "0" + month; document.location.href = "<?php $_SERVER['PHP_SELF'];?>?page=events&day=" + day + "&month=" + m ...

javascriptphphtmlurlget

Leveraging PHP Variables within HTML Content

Hello everyone, I am facing an issue with reprogramming and would greatly appreciate some help. <div style="width:800px;height:100px;border:2px solid black;"> <html> <body> <br> <?php mysql_connect("localhost", "user", "passw ...

phphtml

Enhancing the Canvas with JavaScript: Implementing 2048

In my high school computer science class, my partner and I chose to create a unique version of the game 2048 for our final project. Instead of traditional moving tiles, we are implementing a grid with properties like number and color assigned to each til ...

javascripthtmlcanvas