Bootstrap Simple Navigation bar not working in my page
Question
I have a Simple Bootstrap navigation bar in my page, but it is not working. the JavaScript and CSS Files are working properly. i checked it. when i copy the navigation code from <nav> to </nav> and pasts it in a new file, then it is working fine, but not working in my actual file . and looks something like This and I am expecting some thing like This
My Page Source Code is here .....
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Information Panel for Students</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="../include/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="../include/css/footer.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<!-- header start from here -->
<header>
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.php" class="navbar-brand">Department Dashboard</a>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.php">Home</a></li>
<li><a href="update_password.php">Update Password</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="logout.php">Logout</a></li>
</ul>
</div>
</nav>
</header>
<h3>Teachers:</h3>
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../teacher/images/resized_1512541379-5412-5a278cc30963e-NOKIA_RM-1030_206834512-206835569_000.JPG" width="180" height="220"/><br>Person Name : Shaida Khan<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../teacher/images/resized_1512541601-6654-5a278da1bf564-NOKIA_X2-02_215986488-215987862_000.JPG" width="180" height="220"/><br>Person Name : Nausheen Fayaz<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../teacher/images/resized_1512541663-4311-5a278ddfa5374-NOKIA_X2-02_215461832-215462529_000.JPG" width="180" height="220"/><br>Person Name : Javed Chaudry<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../teacher/images/resized_1512541718-9653-5a278e1617035-NOKIA_RM-1030_206827192-206828288_000.JPG" width="180" height="220"/><br>Person Name : Khan Khan<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../teacher/images/resized_1512563517-6727-5a27e33d9dc39-NOKIA_E5-00_202194584-202196971_000.JPG" width="180" height="220"/><br>Person Name : Farsil Khan<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../teacher/images/resized_1512563572-2715-5a27e374a3c1d-NOKIA_RM-1030_202261216-202265107_000.JPG" width="180" height="220"/><br>Person Name : Ek Aur Teacher Ke Data<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../teacher/images/resized_1512216690-8783-5a229872e2564-NOKIA_5233_244851632-244851959_000.JPG" width="180" height="220"/><br>Person Name : Azhar Rauf<br>Current Place : Class Room<br>Status Date : 02-12-2017<br>Status Time : 05:15:21 PM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../teacher/images/resized_1512217027-6925-5a2299c3d363f-NOKIA_E5-00_202038176-202041197_000.JPG" width="180" height="220"/><br>Person Name : Fatima Zuhra<br>Current Place : Class Room<br>Status Date : 02-12-2017<br>Status Time : 05:19:28 PM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../teacher/images/resized_1512217504-2845-5a229ba0c8635-NOKIA_E5-00_202201816-202204433_000.JPG" width="180" height="220"/><br>Person Name : Khan Lala<br>Current Place : Class Room<br>Status Date : 02-12-2017<br>Status Time : 05:33:17 PM<br><br></div> </div>
<h3>Chairman:</h3>
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../chairman/images/resized_1512141619-1363-5a2173335d788-NOKIA_5233_244851632-244851959_000.JPG" width="180" height="220"/><br>Person Name : Shah Khusro<br>Current Place : Chairman Office<br>Status Date : 01-12-2017<br>Status Time : 08:26:40 PM<br><br></div> </div>
<h3>Clerks:</h3>
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../clerk/images/resized_1512562768-5527-5a27e0506acd1-HUAWEI_HUAWEI_611272384-611272979_000.JPG" width="180" height="220"/><br>Person Name : Demo Khan<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../clerk/images/resized_1512562854-8274-5a27e0a675bb8-HUAWEI_CHM-U01_183017224-183021314_000.JPG" width="180" height="220"/><br>Person Name : Galaxy Khan<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../clerk/images/resized_1512563316-1142-5a27e2744dc95-NOKIA_5233_244851632-244851959_000.JPG" width="180" height="220"/><br>Person Name : Asdf Adf<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../clerk/images/resized_1512563366-8649-5a27e2a6bb78c-NOKIA_E5-00_202083984-202086713_000.JPG" width="180" height="220"/><br>Person Name : Sdfasd Adfdsf<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../clerk/images/resized_1512563389-3596-5a27e2bdc3ff7-NOKIA_E5-00_202186392-202189391_000.JPG" width="180" height="220"/><br>Person Name : Sdf Fsd<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../clerk/images/resized_1512563480-2752-5a27e3185f05f-NOKIA_RM-1030_194996488-194998710_000.JPG" width="180" height="220"/><br>Person Name : Dfasdf Sdalfksd<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../clerk/images/resized_1512145551-9397-5a21828fc4953-NOKIA_E5-00_202038176-202041197_000.JPG" width="180" height="220"/><br>Person Name : Faris Khan<br>Current Place : Clerk Office<br>Status Date : 02-12-2017<br>Status Time : 09:46:40 AM<br><br></div> </div>
<h3>Lab Staff:</h3>
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../lab_staff/images/resized_1512218344-7079-5a229ee8b9e5a-NOKIA_RM-1030_206846160-206847834_000.JPG" width="180" height="220"/><br>Person Name : Samin Jan<br>Current Place : Laboratory<br>Status Date : 02-12-2017<br>Status Time : 05:39:47 PM<br><br></div> </div>
<h3>PN Staff:</h3>
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../pn/images/resized_1512145738-2830-5a21834a6d1d7-NOKIA_E5-00_202048056-202051887_000.JPG" width="180" height="220"/><br>Person Name : Penis Khan<br>Current Place : Outside<br>Status Date : 02-12-2017<br>Status Time : 06:09:47 PM<br><br></div> </div>
<footer>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="footer-block">
<ul class="list-inline footer-menu">
<li><a href="">Term of Use</a></li>
<li><a href="">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="footer-block text-center">
<p class="copyright">
© 2018 Department Dashboard.<br>
All rights reserved.<br>
Developed By:<br>
Shaida Muhammad Sherpao
</p>
</div>
</div>
<div class="col-sm-4">
<div class="footer-block">
<ul class="list-inline pull-right social-icon">
<li><a href="https://facebook.com/sh3rpao"><i class="fa fa-facebook"></i></a></li>
<li><a href="https://twitter.com/shaidasherpao"><i class="fa fa-twitter"></i></a></li>
<li><a href="https://pk.linkedin.com/in/shaida-muhammad-sherpao-a3388a103"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
</div>
<script src="../include/js/jquery-1.11.3.min.js"></script>
<script src="../include/js/bootstrap.js"></script>
</body>
</html>
3 answers
solution1
0 2017-12-07 10:19:35
maybe it's the css. in the head, write this
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
instead of importing your .css files
write this instead of what you written
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
solution2
0 2017-12-07 10:24:02
if i am not mistaken you are using Bootstrap 3.
There is a detailed documentation about Navbar component in getBootstrap : https://getbootstrap.com/docs/3.3/components/#navbar
I did not see an error in your code. if you have another CSS file, could you please share them too?
solution3
0 2017-12-07 10:55:23
Your Code is working good.Try This
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Information Panel for Students</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <!-- header start from here --> <header> <nav class="navbar navbar-default"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="index.php" class="navbar-brand">Department Dashboard</a> </div> <!-- Collection of nav links and other content for toggling --> <div id="navbarCollapse" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="index.php">Home</a></li> <li><a href="update_password.php">Update Password</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="logout.php">Logout</a></li> </ul> </div> </nav> </header> <h3>Teachers:</h3> <div class="row"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../teacher/images/resized_1512541379-5412-5a278cc30963e-NOKIA_RM-1030_206834512-206835569_000.JPG" width="180" height="220"/><br>Person Name : Shaida Khan<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../teacher/images/resized_1512541601-6654-5a278da1bf564-NOKIA_X2-02_215986488-215987862_000.JPG" width="180" height="220"/><br>Person Name : Nausheen Fayaz<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../teacher/images/resized_1512541663-4311-5a278ddfa5374-NOKIA_X2-02_215461832-215462529_000.JPG" width="180" height="220"/><br>Person Name : Javed Chaudry<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../teacher/images/resized_1512541718-9653-5a278e1617035-NOKIA_RM-1030_206827192-206828288_000.JPG" width="180" height="220"/><br>Person Name : Khan Khan<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../teacher/images/resized_1512563517-6727-5a27e33d9dc39-NOKIA_E5-00_202194584-202196971_000.JPG" width="180" height="220"/><br>Person Name : Farsil Khan<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../teacher/images/resized_1512563572-2715-5a27e374a3c1d-NOKIA_RM-1030_202261216-202265107_000.JPG" width="180" height="220"/><br>Person Name : Ek Aur Teacher Ke Data<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../teacher/images/resized_1512216690-8783-5a229872e2564-NOKIA_5233_244851632-244851959_000.JPG" width="180" height="220"/><br>Person Name : Azhar Rauf<br>Current Place : Class Room<br>Status Date : 02-12-2017<br>Status Time : 05:15:21 PM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../teacher/images/resized_1512217027-6925-5a2299c3d363f-NOKIA_E5-00_202038176-202041197_000.JPG" width="180" height="220"/><br>Person Name : Fatima Zuhra<br>Current Place : Class Room<br>Status Date : 02-12-2017<br>Status Time : 05:19:28 PM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../teacher/images/resized_1512217504-2845-5a229ba0c8635-NOKIA_E5-00_202201816-202204433_000.JPG" width="180" height="220"/><br>Person Name : Khan Lala<br>Current Place : Class Room<br>Status Date : 02-12-2017<br>Status Time : 05:33:17 PM<br><br></div> </div> <h3>Chairman:</h3> <div class="row"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../chairman/images/resized_1512141619-1363-5a2173335d788-NOKIA_5233_244851632-244851959_000.JPG" width="180" height="220"/><br>Person Name : Shah Khusro<br>Current Place : Chairman Office<br>Status Date : 01-12-2017<br>Status Time : 08:26:40 PM<br><br></div> </div> <h3>Clerks:</h3> <div class="row"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../clerk/images/resized_1512562768-5527-5a27e0506acd1-HUAWEI_HUAWEI_611272384-611272979_000.JPG" width="180" height="220"/><br>Person Name : Demo Khan<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../clerk/images/resized_1512562854-8274-5a27e0a675bb8-HUAWEI_CHM-U01_183017224-183021314_000.JPG" width="180" height="220"/><br>Person Name : Galaxy Khan<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../clerk/images/resized_1512563316-1142-5a27e2744dc95-NOKIA_5233_244851632-244851959_000.JPG" width="180" height="220"/><br>Person Name : Asdf Adf<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../clerk/images/resized_1512563366-8649-5a27e2a6bb78c-NOKIA_E5-00_202083984-202086713_000.JPG" width="180" height="220"/><br>Person Name : Sdfasd Adfdsf<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../clerk/images/resized_1512563389-3596-5a27e2bdc3ff7-NOKIA_E5-00_202186392-202189391_000.JPG" width="180" height="220"/><br>Person Name : Sdf Fsd<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../clerk/images/resized_1512563480-2752-5a27e3185f05f-NOKIA_RM-1030_194996488-194998710_000.JPG" width="180" height="220"/><br>Person Name : Dfasdf Sdalfksd<br>Current Place : Default<br>Status Date : 00-00-0000<br>Status Time : 12:00:00 AM<br><br></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../clerk/images/resized_1512145551-9397-5a21828fc4953-NOKIA_E5-00_202038176-202041197_000.JPG" width="180" height="220"/><br>Person Name : Faris Khan<br>Current Place : Clerk Office<br>Status Date : 02-12-2017<br>Status Time : 09:46:40 AM<br><br></div> </div> <h3>Lab Staff:</h3> <div class="row"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../lab_staff/images/resized_1512218344-7079-5a229ee8b9e5a-NOKIA_RM-1030_206846160-206847834_000.JPG" width="180" height="220"/><br>Person Name : Samin Jan<br>Current Place : Laboratory<br>Status Date : 02-12-2017<br>Status Time : 05:39:47 PM<br><br></div> </div> <h3>PN Staff:</h3> <div class="row"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="../pn/images/resized_1512145738-2830-5a21834a6d1d7-NOKIA_E5-00_202048056-202051887_000.JPG" width="180" height="220"/><br>Person Name : Penis Khan<br>Current Place : Outside<br>Status Date : 02-12-2017<br>Status Time : 06:09:47 PM<br><br></div> </div> <footer> <div class="container"> <div class="row"> <div class="col-sm-4"> <div class="footer-block"> <ul class="list-inline footer-menu"> <li><a href="">Term of Use</a></li> <li><a href="">Privacy Policy</a></li> </ul> </div> </div> <div class="col-sm-4"> <div class="footer-block text-center"> <p class="copyright"> © 2018 Department Dashboard.<br> All rights reserved.<br> Developed By:<br> Shaida Muhammad Sherpao </p> </div> </div> <div class="col-sm-4"> <div class="footer-block"> <ul class="list-inline pull-right social-icon"> <li><a href="https://facebook.com/sh3rpao"><i class="fa fa-facebook"></i></a></li> <li><a href="https://twitter.com/shaidasherpao"><i class="fa fa-twitter"></i></a></li> <li><a href="https://pk.linkedin.com/in/shaida-muhammad-sherpao-a3388a103"><i class="fa fa-linkedin"></i></a></li> </ul> </div> </div> </div> </div> </footer> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
My navigation bar not working on clicking
Bootstrap not working on simple html page
Floating navigation bar not working when page is resized
My bootstrap carousel indicators are overlapping my fixed top navigation bar
How to maximize or fill the whole page with bootstrap carousel. (with navigation bar)
Page navigation with Bootstrap
Responsive navigation bar is not working
Sticky navigation bar - not working
Bootstrap 4 navigation bar using json
bootstrap navigation bar autocomplete issue
Related Tags