Joel B Joel B - 1 month ago 9
jQuery Question

Bootstrap page breaking. Navbar and page elements not displaying

Trying to set up a completely basic bootstrap page. Primary goal is a functioning bootstrap navbar with a dropdown menu. However, bootstrap isn't loading, navbar and jumbotron are not displaying correctly. Chrome and Firefox aren't providing any error messages. bootstrap.css, bootstrap.js and jquery-3.1.1.js are all in default states in local folders. I'm unable to understand why the page elements aren't loading.

Edit: Commenter below pointed out that I was using an old version of bootstrap. The layout has been corrected but navbar dropdown menu animation is not triggering.

I have a "public" folder that acts like an "assets" folder. It is default to Sinatra with the following folders.



├── public
│   ├── images
│   ├── js
│   │   ├── bootstrap.js
│   │   └── jquery-3.1.1.js
│   └── stylesheets
│   └── bootstrap.css







<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>NY Freegan Forum</title>
<link href="/stylesheets/bootstrap.css" rel="stylesheet">
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="/">NY Freegan Forum</a>

<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">joelbitar1986<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/users/joelbitar1986">Profile</a></li>
<li><a href="/reports/new">New Report</a></li>
<li role="separator" class="divider"></li>
<li><a href="/logout">Logout</a></li>
</ul>
</li>
</ul>
</div>
</nav>

<div class="jumbotron vert-offset-top-13">
<div class="container">
<h1>Jumbotron Title</h1>
<p>website information</p>
<br><br>
</div>
</div>

<script src="/js/jquery-3.1.1.js"></script>
<script src="/js/bootstrap.js"></script>
</body>
</html>




Link to Github Repo: https://github.com/joelbitar1986/ny-freegan-forum

Run
shotgun
to view page on localhost

Answer

If you're using the correct version of bootstrap, it'll work.

One thing you should do is to view the page source. You will see if the scripts are actually loading in.

<!DOCTYPE html>
<html>
  <head>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>
    <nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <a class="navbar-brand" href="/">NY Freegan Forum</a>
    
    <ul class="nav navbar-nav navbar-right">
     <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">joelbitar1986<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="/users/joelbitar1986">Profile</a></li>
        <li><a href="/reports/new">New Report</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="/logout">Logout</a></li>
      </ul>
    </li>
  </ul>
</div>
</nav>

<div class="jumbotron vert-offset-top-13">
  <div class="container">
    <h1>Jumbotron Title</h1>
    <p>website information</p>
    <br><br>
  </div>
</div>
    
    
    
    <script   src="http://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>