How can I move the contents of a bootstrap navbar to the middle?-CodePudding

I'm trying to make a simple navbar and I want the content of the navbar like "home" and "contact" to be shifted to the right a bit so that it works for mobile users too. This is what my navbar looks like and the red line I drew represents where I want the start of "Test" to be.

I'm not sure how to move "Test Home Contact Us" to the start of that red line. I tried putting style="left:200px" inside each of the texts' <a>...</a> section, but it didn't work. I'm using a bootstrap navbar so I basically just copy and pasted a navbar from bootstrap and here's the code for it:

<nav >
      <a  href="{{ url_for('home_page') }}"><b>Test</b></a>
      <button
        
        type="button"
        data-toggle="collapse"
        data-target="#navbarNav"
      >
        <span ></span>
      </button>
      <div  id="navbarNav">
        <ul >
          <li >
            <a  href="{{ url_for('home_page') }}"
              >Home <span >(current)</span></a
            >
          </li>
          <li >
            <a  href="market">Contact Us</a>
          </li>
        </ul>
      </div>
    </nav>

CodePudding user response：

You're likely looking for style="padding-left: 200px;" instead of left.

CodePudding user response：

Simply adding a container div next to <nav> tag would help.

<nav >
  <div >
    <a  href="{{ url_for('home_page') }}"><b>Test</b></a>
    <button  type="button" data-toggle="collapse" data-target="#navbarNav">
      <span ></span>
    </button>
    <div  id="navbarNav">
      <ul >
        <li >
          <a  href="{{ url_for('home_page') }}">Home <span >(current)</span></a>
        </li>
        <li >
          <a  href="market">Contact Us</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Source: https://getbootstrap.com/docs/4.6/layout/overview/#containers

CodePudding user response：

You have to give padding-left to entire navtag. For exapmle:

nav {
    padding-left: 200px;
}