CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Tanay Roman
Tanay Roman

Reputation: 115

Bootstrap navbar not rendering properly

I'm learning Flask through a youtube tutorial, and I can't get the bootstrap navbar to work properly. I picked up the code from the bootstrap examples section. I've tried what other answers suggested around here on similar questions but nothing seems to solve the problem. Code snippets and screenshot posted below. The CSS link I'm using works fine too. I'm a beginner so any help would be really appreciated. Thank you.

enter image description here

layout.html:

<!DOCTYPE html>
<html>
<head>
  <title>MyFlaskApp</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

</head>
<body>

  {% include 'includes/_navbar.html' %}
  {% block body %}{% endblock %}
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


</body>
</html>

_navbar.html:

 <nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="#">MyFlaskApp</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/articles">Articles</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

Upvotes: 1

Views: 2116

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42384

You're importing Bootstrap 4, but attempting to use the Bootstrap 3 syntax.

The easiest way to resolve this is to simply import Boostrap 3 instead, which can be done via the URL https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css. Note that while not necessary for the styling, you'll probably also want to switch the JavaScript to the same version via https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js.

This simple change corrects your navbar, as can be seen in the following:

<!DOCTYPE html>
<html>

<head>
  <title>MyFlaskApp</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>

  <!-- _navbar.html -->
  <nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="#">MyFlaskApp</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/articles">Articles</a></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </nav>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
</body>

</html>

Hope this helps! :)

Upvotes: 2

Related Questions