Bootstrap Not Working Properly from Local .css and .js documents

Question

As the title implies, I have a bootstrap related problem. I downloaded the source code, because I would like to change it a little bit later. However, when I include it in my .html document, bootstrap doesn't style the document as it should. Also, when i change the path to bootstrap.js and bootstrap.css to maxcdn links, it all works as it should. Bellow is the code I used and a screenshot of what happens.

I'm hoping someone will be able to help me sort this out. Thank you in advance!

P.S. I am sure that the paths to the files are correct, I have check several times.

<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" type="text/css" href="bootstrap/docs/assets/css/bootstrap.css" />
  <link rel="stylesheet" type="text/css" href="bootstrap/docs/assets/js/bootstrap.min.js" />

  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
</head>

<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
</body>

How it looks:

How it should look:

Tanvir Hasan Anick · Accepted Answer · 2016-11-30 18:02:47Z

2

Problem is in this line

  <link rel="stylesheet" type="text/css" href="bootstrap/docs/assets/js/bootstrap.min.js" />

It will be

  <script src="bootstrap/docs/assets/js/bootstrap.min.js"></script>

answered Nov 30, 2016 at 18:02

Tanvir Hasan Anick

4306 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ficabj5 Over a year ago

I understand what I did wrong, and I have fixed it. However, the same thing is still happening. Do I need to install some dependencies in order for Bootstrap to work?

Tanvir Hasan Anick Over a year ago

Make sure that your .css .js file placed in correct path. Than it should be work properly. Also you can run your app with inspect mode. It will show you java script related error if java script isn't load properly.

Rakesh Shriwas · Accepted Answer · 2016-11-30 17:32:23Z

-1

I checked your code i think there is some problem in your file structure.please make sure it properly given

answered Nov 30, 2016 at 17:32

Rakesh Shriwas

6792 gold badges7 silver badges15 bronze badges

Collectives™ on Stack Overflow

Bootstrap Not Working Properly from Local .css and .js documents

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related