Home > Software design >  Bootstrap-Margin issue
Bootstrap-Margin issue

Time:10-01

I'm currently learning the basics of bootstrap, and am having issues with the margin-auto. I am working with a navbar and trying to position it use ml-auto to separate it from the brand (pushing the navbar to the right of the page) Unfortunately, I cannot figure out why it's not working for me. I've done some searching on getbootstrap.com site, but am finding nothing that helps. Can you please help? Thank you! :)

    <a class="navbar-brand" href="">tindog</a>
    <ul class="navbar-nav ml-auto">
        <li class="nav-item">

            <a class="nav-link" href="">Contact</a>
        </li>
<li class="nav-item">

        <a class="nav-link" href="">Pricing</a>
        </li>
<li class="nav-item">

       <a class="nav-link" href="">Download</a>
        </li>        
    </ul>
</nav>```

CodePudding user response:

Simple put the m-0 and p-0 inside the navbar class. hope so this way your issue will be solved.

CodePudding user response:

Bootstrap includes an .mx-auto class for horizontally centring fixed-width block level content.

Use mx-auto

Refer: https://getbootstrap.com/docs/4.4/utilities/spacing/

  • Related