CSS bootstrap nav bar right side items fail to align correctly

Question

I'm working with bootstrap, and I have 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>

I am using boostrap cdn 4.4.1:

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

I am trying to achieve this:

And yet, I keep getting this:

What am I missing?

Thanks!

freefall · Accepted Answer · 2020-03-29T00:40:12.427

1

Try adding ml-auto to the end of the class list for the <ul> containing 'Register' and 'Login'

edited Mar 29 '20 at 00:40

answered Mar 29 '20 at 00:34

freefall

319
1
8

That got the items to the right. How do I fix the spacing between them? Thanks! – arcee123 Mar 29 '20 at 00:41
Your alignment worked. Thank you. – arcee123 Mar 29 '20 at 00:44

score 1 · Answer 2 · answered Mar 29 '20 at 00:40

1

Just add <div class="navbar-nav mr-auto"></div> right after <div class="collapse navbar-collapse" id="navbarSupportedContent">. Also change the class name navbar-link as nav-link of your <Link/> components.

See the demo: https://jsfiddle.net/rnm617jz/1/

Note: I have changed the className attr as class, since I don't have React in the demo and wanted to test it without it.

answered Mar 29 '20 at 00:40

Kenan Güler

1,868
5
16

1

THe bigger issue was the alignment in which Zack answered. You got the css navbar-link to nav-link. I appreciate that. I want to set both to correct answers but I can't. Thanks still +1 – arcee123 Mar 29 '20 at 00:44

score 0 · Answer 3 · answered Mar 29 '20 at 00:43

0

just add ml-auto class next to navbar-nav, will do the trick.

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

to fix your navbar links change navbar-link class to nav-link

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

answered Mar 29 '20 at 00:43

Said Benmoumen

166
2
10

CSS bootstrap nav bar right side items fail to align correctly

3 Answers3