How can I center Bootstrap navbar menu items just for mobile?-CodePudding

I'm using the following navbar. I need to be able to center the menu li items when the navbar is collapsed.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<nav  id="myNav">
  <div >
    <ul >
      <li ><a >Menu Item 1</a></li>
      <li ><a >Menu Item 2</a></li>
    </ul>
  </div>
</nav>

The solution I came up with was doing the following:

<ul >     
    <div >           
        <li ><a >Menu Item 1</a></li>
    </div>
    <div >
        <li ><a >Menu Item 2</a></li>
    </div>
</ul>

But as mentioned in the comments this is not a valid HTML - to have a div as a child of list element

It does work. But not valid - how can I properly center them then?

CodePudding user response：

It's probably just a matter of applying text alignment selectively for the smaller breakpoint(s).

Note: d-block added to the collapse element for demonstration here only. View the full page demo for the alternative layout.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<nav  id="myNav">
  <div >
    <ul >
      <li ><a >Menu Item 1</a></li>
      <li ><a >Menu Item 2</a></li>
    </ul>
  </div>
</nav>