I encountered an issue while trying to style a PHP file named dashboard.php using Bootstrap. Initially, I only included some HTML code in the file. Upon testing it, I noticed that the styling within the 'ul' tag was incorrect. However, other classes such as 'class="col-sm-2"' and 'class="row"' were functioning as expected.
<?php ?>
<!DOCTYPE>
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<ul class="nav nav-pills nav-stacked" >
<li><a href="dashboard.php">
<span class="glyphicon glyphicon-th"></span>Dashboard</a></li>
<li><a href="#">
<span class="glyphicon glyphicon--list-alt"></span>Add New Post</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Manage Admins</a></li>
<li><a href="#">Comments</a></li>
<li><a href="#">Live Blog</a></li>
<li><a href="#">Logout</a></li>
</ul>
</div><!-- End of side area-->
<div class="col-sm-10">
</div><!-- End of main area-->
</div><!-- End of row-->
</div>
</body>
</html>
In my attempt to resolve this issue, I generated a screenshot of the dashboard.php test: view image description here
Upon reviewing the image, you can see that the left side with words in blue pertains to the 'ul' tag, where the style is completely off. Additionally, the addition of glyphicon icons failed. Despite checking the syntax of my HTML code, no errors could be found.
Some additional information to note:
- The file has a .php extension
- XAMPP with Apache is running
- The URL used to access dashboard.php is correct: http://localhost/studyexample/PHPCMS/dashboard.php
Could you assist me in identifying why the styling within the 'ul' tag is inaccurate? Your help is greatly appreciated.