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
.
HTML:
<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>
SCSS:
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-item
s automatically from https://v4-alpha.getbootstrap.com/components/navbar/. Am I wrong?