Bootstrap 4 navbar collapsed on higher

Question

I'm building this website: http://test.ddavo.me and I don't know why the bootstrap navbar is collapsed even in a large media query. Also, I can't set the background with .bg-inverse . Btw: You can't see the toggler because navbar-inverse doesn't seem to be changing it.

Answer 1

I looked at your code. It seems you are using Bootstrap 4 alpha classes, like .navbar-toggleable-md , but you included the beta version CSS. I suggest you to stick with the beta version , since it has many improvements and further versions will build upon this.

You are missing a .navbar-expand-X class from your navbar. X should be a breakpont "telling" Bootstrap at which screen should the navbar expand. This class is required :

Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.

So remove .navbar-toggleable-md class and add a .navbar-expand-md class:

<nav class="navbar navbar-expand-md bg-inverse bg-faded fixed-top" style="background-color: #212121">
    ...
</nav>

Also, there is no .bg-inverse class in Bootstrap 4 beta. These are the available background-color classes:

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white

Answer 2

If you want to continue using your current markup, you need to target the correct version of Bootstrap. Your code is targeting the Beta version of Bootstrap 4, but your markup is using classes from Alpha.6. If you take out your scripts and links related to Beta, and include the following in your project, your code will work as expected.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

Here's your code working with the correct version of Boostrap 4.