Bootstrap Navbar list items/links not showing

Question

I am learning to use Bootstrap and playing with components, specifically the navbar.

My links/list items aren\'t showing. I have copied code directly from Bootstrap.

Answer 1

your reference to their css file is not what is listed on their website. use the following:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

your java script file is also not what is listed:

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

here is where you can find the latest links to their most up-to-date CDN's: http://getbootstrap.com/getting-started/

you are have probably copied that from an experimental place. (it says alpha within the file name so there are more than likely some bugs)

Answer 2

In Bootstrap 4, the navbar-expand-* class is needed to show the horizontal navbar, otherwise it will collapse into it's mobile state.

Make sure you've referenced it properly in the Codepen as https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

Or, use Codeply, and it will include the all the relevant libraries for you: Bootstrap 4 on Codeply

Here's the Navbar with Bootstrap 4.0.0: http://www.codeply.com/go/SmEyy7rg5S

<nav class="navbar navbar-expand-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#">Features</a>
            <a class="nav-item nav-link" href="#">Pricing</a>
            <a class="nav-item nav-link disabled" href="#">Disabled</a>
        </div>
    </div>
</nav>

---

Related: Disable responsive navbar in bootstrap 4

Answer 3

It looks like you are using the alpha version of bootstrap. This version may contain a bug. You might want to use the latest stable version. This answer has the links to the correct css and js files for version 3.3.7. If bootstrap is updated after this answer, you can download the latest version at http://getbootstrap.com/getting-started/. Hope this helps!

Albert