Bootstrap Navbar Organization

Question

I have a navbar that I'm building in React with Bootstrap 5, and I am not sure how to get the items to the right of the navbar. I'm trying to follow the Bootstrap docs, but it is not the same as the example.

I would like the 'About', 'Login', and 'Register' links to be on the right side of the navbar. Here is the code I'm using:

<nav
        className='navbar sticky-top navbar-expand-lg navbar-light'
        style={{ backgroundColor: "#5ed67a" }}>
        <div className='container-fluid'>
            <i className='far fa-newspaper' style={{ fontSize: "3rem" }}></i>
            <Link
                to='/'
                className='navbar-brand mx-3'
                style={{ fontSize: "1.85rem" }}>
                Site News
            </Link>
            <div
                className='collapse navbar-collapse'
                id='navbarSupportedContent'>
                <ul className='navbar-nav me-auto mb-2 mb-lg-0'>
                    <li className='nav-item'>
                        <Link to='/about' className='nav-link active'>
                            About
                        </Link>
                    </li>
                    <li className='nav-item'>
                        <Link to='/login' className='nav-link active'>
                            Login
                        </Link>
                    </li>
                    <li className='nav-item'>
                        <Link to='/register' className='nav-link active'>
                            Register
                        </Link>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

If anyone knows, I am not great with styling and do not have a designer right now. Thank you!

Does this answer your question? [Bootstrap 5 navbar align items right](https://stackoverflow.com/questions/63948287/bootstrap-5-navbar-align-items-right) — Carol Skelly, May 12 '21 at 16:30

score -1 · Answer 1 · answered May 12 '21 at 17:10

-1

You should use ml-auto for this. ml-auto gives auto margin from left that means take as much margin as possible from the left , which in turn pushed the content to the right.

answered May 12 '21 at 17:10

shiv k

24
4

There is no ml-auto in Bootstrap 5 – Carol Skelly May 12 '21 at 19:03

Bootstrap Navbar Organization

1 Answers1