Why does this CSS behavior happen? (Portfolio Project)

Why does this CSS behavior happen? (Portfolio Project)


I am working on my HTML/CSS portfolio page project. Using bootstrap’s navbar classes, I have been able to create my navbar properly. However, each link item stacks on top of each other unless I apply display: inline to navbar-nav and display: inline-block to each nav-item.


      <ul class="navbar-nav">
        <li class="nav-item"><a href="#home" class="active">Home</a></li>
        <li class="nav-item"><a href="#about">About</a></li>


    ul.navbar-nav {
      display: inline;
      .nav-item {
        font-size: 18px;
        font-family: 'Ubuntu', sans-serif;
        display: inline-block;

I was under the impression that bootstrap should create inline nav-items automatically from https://v4-alpha.getbootstrap.com/components/navbar/. Am I wrong?


I am not allowed to put images in my post, so here’s the album: https://imgur.com/a/eXYko


Make sure you are applying the right classes according to https://getbootstrap.com/docs/3.3/components/#nav.
The following code should give you the expected behavior:

<ul class="nav nav-pills">
  <li class="nav-item active"><a href="#home">Home</a></li>
  <li class="nav-item"><a href="#about">About</a></li>

See my codepen