M. Kostas M. Kostas - 2 months ago 22
CSS Question

Bootstrap navbar items alignment

I am trying to build a very simple navbar with bootstap according to some online tutorials.

I am trying to align the navbar items horizontally but I keep getting the following formation:

enter image description here

My code is the following:

<body>
<nav class='navbar navbar-inverse'>
<div class='container-fluid'>
<div class='navbar-header'>
<a href='#' class='navbar-brand'> $Whoami </a>
</div>
<ul class='nav navbar-inverse navbar-custom'>
<li ><a href='#'>Skills</a></li>
<li ><a href='#'>Interests</a></li>
<li ><a href='#'>Contact</a></li>
</ul>
</div>
</nav>
<h1> Hello World! </h1>
</body>

Answer

you need to just add navbar-nav to your ul

<nav class='navbar navbar-inverse'>
    <div class='container-fluid'>
      <div class='navbar-header'>
        <a href='#' class='navbar-brand'> $Whoami </a>
      </div>
      <ul class='nav navbar-nav navbar-inverse navbar-custom'>
        <li ><a href='#'>Skills</a></li>
        <li ><a href='#'>Interests</a></li>
        <li ><a href='#'>Contact</a></li>
      </ul>
    </div>
  </nav>
  <h1> Hello World! </h1>

Output image

Comments