How to make a Bootstrap navbar that has menu separated menu items-CodePudding

The

So how can I make Bootstrap nav-item separated from each other?

I would really appreciate any idea or suggestion from you guys...

UPDATE:

I tried this code, but didn't solve the problem:

<nav > <button type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span ></span> </button> <div id="navbarNav"> <ul > <li > <a href="#">Home <span >(current)</span></a> </li> <li > <a href="#">Features</a> </li> <li > <a href="#">Pricing</a> </li> <li > <a href="#">Disabled</a> </li> </ul> </div> </nav>

CodePudding user response：

add background bg-warning to all nav-items and giving margins to separate them

<nav > <button type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span ></span> </button> <div id="navbarNav"> <ul > <li > <a href="#">Home <span >(current)</span></a> </li> <li > <a href="#">Features</a> </li> <li > <a href="#">Pricing</a> </li> <li > <a href="#">Disabled</a> </li> </ul> </div> </nav>