Cant align the unordered list out right using margin auto bu


Topic: Cant align the unordered list out right using "margin auto" but can do it with "justify-content-end"

Jennychiu8201 asked 2 years ago

Expected behavior*** Hi I am fairly new in learning coding, and now try to use bootstrap and html to build a website, I want have my unordered list separated with the logo and go far right on the screen, and in which most case I tried on codeply it work, but for some reasons, the list wont move at all when add more bootstrap elements in the code.

Actual behavior*** enter image description here the code I am using originally to try to separated the list from the logo:

<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
  <a class="navbar-brand" href=""> Tindog</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">

  <ul class="navbar-nav margin 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></div>

So I ended up finding an answer to this issue from this forum, using "Justify-content-end" to fix the issue, it fixed it, but I would like to know the difference between these two, and why I cant use margin auto instead, is this sth in my code override margin auto function? **This is the answer I found in this forum, someone asked the similar question, and the staff Marcin Luczak commented it on it,

Hi @santozsunder@gmail.com,

In this case this might be the problem ml-auto was assigned to the element inside the collapsible container that itself sticks to the left of the navbar. Adding .justify-content-end to the collapse container does the job.

Keep coding, Marcin


So my question is this "collapsible container" affecting the margin auto function? and in what condition can I use "margin-auto" to separated the list from the logo? or as long as their is "navbar-collapse" in the line of the code, I should use "justify-content-end" instead of "margin-auto"? Can you help to clarify why it work this way?

Thank you, might be dumb question, but I really am struggling finding answer to my question from the internet for weeks.


mlazaru staff answered 2 years ago

Hi!

The reason why margin-auto style does not work in your code is invalid class name.

Replace margin auto with m-auto, or even mx-auto since you probably only want to set margin for the X axis. You can set it to the ul and for every li if you want them to be centered as well.

Check my code to see what I mean: https://mdbootstrap.com/snippets/standard/mlazaru/4896765#html-tab-view

If you are using MDB, you should also replace data attributes like data-bs-toggle="collapse" to data-mdb-toggle="collapse" and so on.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 5.0.0
  • Device: Window
  • Browser: Google
  • OS: Window 10
  • Provided sample code: No
  • Provided link: No