CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
shaon
shaon

Reputation: 17

Why cant I work with downloaded bootstrap

I have downloaded the Compiled CSS and JS version of bootstrap from this link. unzipped it inside my project root directory and referenced them inside my html file. My html file is now like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo Maker</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-inverse">
    <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>

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

</html>

Now if I run the page then it doesn't show the bootstrap navbar properly. Its showing like this screen shot

But If i use cdn for bootstrap css and js then it works perfectly.

What am I doing wrong?

===== edit========

After some digging around I can see that I cant find the bootstrap styles in the bootstrap.min.css or in bootstrap.css files that I downloaded. For example I cant find any style for class .navbar-inverse.

Upvotes: 1

Views: 238

Answers (2)

j08691
j08691

Reputation: 207901

Bootstrap 4 doesn't have a navbar-inverse class. That's BS3. Your example code looks fine when I run it under BS3, but incorrect, and like your image when I run it with BS4.

Upvotes: 0

Gene Sy
Gene Sy

Reputation: 1655

You need to have .navbar-expand or .navbar-expand{-sm|-md|-lg|-xl} classname in your <nav> element to make the bootstrap style work.

Then you'll also need to add the proper classnames for the navlinks like so:

      <li class="nav-item">
        <a class="nav-link" href="#">Page 1</a>
      </li>

You can read more here: https://getbootstrap.com/docs/4.0/components/navbar/

Upvotes: 1

Related Questions