title: Bootstrap - always hamburger menu
body: <p>I have a problem with Bootstrap. When I check my code for example in codepen, the navbar is responsive, changes from visible links to hamburger menu, but if I check it in my document, it is always hamburger menu, no matter if it's big or small resolution. Can you help me? I am trying to solve it and I have no idea what is going on.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-image: url("img/bg.png");
    font-family: 'Raleway', sans-serif;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="pl"&gt;
      &lt;head&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"&gt;
          &lt;link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="container"&gt;
          &lt;nav class="navbar navbar-toggleable-md navbar-light" id="commRollover"&gt;
              &lt;button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"&gt;
                  &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;a class="navbar-brand" href="#"&gt;&lt;img src="img/logo.png" alt="Logo" style="height: 40px;"&gt;&lt;/a&gt;
              &lt;div class="collapse navbar-collapse justify-content-end" id="navbarNav"&gt;
                  &lt;ul class="navbar-nav"&gt;
                      &lt;li class="nav-item active"&gt;
                          &lt;a class="nav-link" href="#"&gt;O nas&lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="#"&gt;Features&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="#"&gt;Pricing&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>