0

I am not able to create a navbar,I tried other classes of bootstrap and they are working fine. Please suggest something?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description"
         content="">
    <meta name="keywords"
          content="">
         
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="stylesheet.css?v=<?php echo time(); ?>">
</head>
<body id="body">
    <nav class="navbar navbar-default">
        <div class="container-fluid"> 
            <ul class="nav navbar-nav">
               <li class="active"><a href="">Home</a></li>
            </ul>
        </div>
    </nav>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

9
  • Please check the documentation again. Look at this example getbootstrap.com/docs/4.4/examples/carousel and do a "view source" in your browser. It shows a working nav-bar. Also consider updating to the latest version if you are not too deep in your pages already.
    – Nic3500
    Aug 29, 2020 at 5:24
  • @shreyanshsaxena just wondering if the answer I provided got you on the right track? If so can you mark it as correct? :)
    – finiteloop
    Aug 30, 2020 at 1:38
  • @finiteloop I am so sorry,it just completely slipped through my mind as I got busy in that project.But your answer really helped me..Thank you so much and i am sorry. Sep 11, 2020 at 4:24
  • @shreyansh saxena that is good to hear. Will you mark the answer as correct then when you have a chance? :)
    – finiteloop
    Sep 11, 2020 at 15:09
  • @finiteloop actually I am new to stackoverflow I don't know how to do that,I tried searching on Google but It didn't help.So if you could tell me how to do that?I am more than happy to do so :) Sep 12, 2020 at 16:23

2 Answers 2

2

Double check the classes. I was able to get it to work following the documentation here: https://getbootstrap.com/docs/4.0/components/navbar/

Your classes are off because I was able to use everything else in your code just fine.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description"
             content="">
        <meta name="keywords"
              content="">
             
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="stylesheet.css?v=<?php echo time(); ?>">
    </head>
    <body id="body">
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
     
    </ul>
  </div>
</nav>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </body>
    </html>
0

You are using the wrong code for Bootstrap 4.x. Your code works on bootstrap 3.x

If you want to use the latest bootstrap version's navbar, then use this.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid"> 
   <ul class="navbar-nav">
     <li class="nav-item active">
       <a href="" class="nav-link">Home</a>
     </li>
  </ul>
</div>

For more info check Bootstrap Navbar

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.