Menu
I'm trying to execute a basic Bootstrap nav bar example:
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
</body>
Look at what's happening in the CodePen (which has Bootstrap installed). Why are the items in the navbar stacking atop each other, and not sitting alongside each other?
667
ml-auto class in Bootstrap can be used to align navbar items to the right. The . ml-auto class automatically aligns elements to the right.
To create an inverted navbar with a black background and with white text, simply add the . navbar-inverse class to the . navbar class.
You're using Bootstrap 4 (in the Codepen) and the navbar has changed. If you want a simple horizontal (non collapsing) you need to include navbar-toggleable-xl since the navbar is stacked vertically by default..
Update for 4.0.0 navbar-toggleable-* has changed to navbar-expand-*
For original question:
<nav class="navbar navbar-light navbar-toggleable-xl bg-faded">
<a href="/" class="navbar-brand">Brand</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Link <span class="sr-only">Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</nav>
Demo: http://www.codeply.com/go/TVDW57B4SL
Read more in the docs
117
Your code is correct, but the version of Bootstrap that you need is version 3.3.7. It looks like you are trying to call a newer version of Bootstrap in your Codepen.
Here is your same code using the older Bootstrap:
https://codepen.io/anon/pen/rjPazv
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
