Help with bootstrap

1

I have been trying to use bootstrap to make a website. Consider the following html which is from the navbar section

<!DOCTYPE html>
<html>

<head>
<title></title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<script   src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
<div class="container-fluid" style="min-height: 95%">    
<div class="container">
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</div>
</body>

</html>

Link to codepen
http://codepen.io/subhan95/full/BpKmJK/

The strange thing is it does not render properly in chrome. It is basically a responsive navbar, which renders with all the menus in desktop but collapses, with all menus in a button for small screen size(you can try this out in the developer console). However the navbar renders properly in firefox and codepen. Can anybody try it out in their chrome browser? What could be the problem?

2

It works fine for me!

3

Maybe the lines

<div class="container">```
According to the Bootstrap documentation, the containers are not supposed to be nested.
4

Finally got frustrated and uninstalled and installed chrome. By the way I was using Ubuntu 14.04. Still don’t know what the problem but reinstalling the latest version of chrome made all problems go away

5

Sometimes it’s a question of emptying browser cache. You don’t need to uninstall and install Chrome. Codepen get’s tricky sometimes.

6

Found the solution. Apparently, to enable responsiveness we need to add meta tag to head, specifically this

<meta name="viewport" content="width=device-width initial-scale=1>

From the docs, under mobile first
http://getbootstrap.com/css/#overview-mobile