CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4
RubyNoob
RubyNoob

Reputation: 547

Bootstrap nav bar list is stacked rather than alongside

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?

Upvotes: 8

Views: 3034

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362430

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

Upvotes: 4

Staveven
Staveven

Reputation: 120

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>

Upvotes: 2

Related Questions