Home / Questions / 459731
Accepted
Pedro
Asked: 2022-06-06 08:41:15 +0800 CST 2022-06-06 08:41:15 +0800 CST

Apply in bootstrap the rule justify-content: space-between; in the navigation menu

  • 772

In the navigation menu I have the following

<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
            <div class="container">
                <a class="navbar-brand" href="#">Viajes Chile</a> <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button"><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="#">Inicio</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Quienes somos</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Destacados</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Contacto</a>
                        </li>
                        
                    </ul>
                </div>
            </div>
        </nav>

Now , I need the term VIAJES CHILE to be on the left and the rest of the buttons on the right . This is how it looks when the css rule is used justify-content: space-between; } . It doesn't work for me. I would like to know how it can be done.

bootstrap

1 Answers

  1. Best Answer

    I have tested the code you publish and I see that with Bootstrap 4.1 it works as you want: the VIAJES CHILE button on the left and the rest on the right. At least using Chrome and Mozilla.

    But if I use Bootstrap 5 effectively it doesn't work. To fix it you can apply ms-auto class applied to ul instead of ml-auto.
    The cause of this difference is that version 5 of Bootstrap changes left (ml is margin left) to start (ms is margin start).

    If you haven't modified Bootstrapp's CSS rules, it should work for you. If not you can use the justify-content: end rule applied to the ul list container (the div id="navbarSupportedContent"). Or manually set the margins as well with CSS: margin-left: auto.

    • 2