I have a header.php file that I want to include in a CodeIgniter view. The header is shown but the problem is that the CSS styles that I have written inside the header.php file are not applied and I don't understand why.
This is my header:
<html>
<head>
<title><?php echo $title;?></title>
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body >
<style>
.nav.navbar-nav li a{
color: #3232ff;
}
</style>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li> <span class="glyphicon glyphicon-home"></span> Home
</li>
<li> <span class="glyphicon glyphicon-off"></span> Log out
</li>
</ul>
</div>
</nav>
</body>
</html>
P.S The weird thing is, if I include the css as inline styling , it works
The specificity of the bootstrap style forces you to use important:
<!doctype html>
<html>
<head>
<title>TITLE</title>
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
ul.navbar-nav li a {
color: red !important;
}
</style>
</head>
<body >
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li> <span class="glyphicon glyphicon-home"></span> Home </li>
<li> <span class="glyphicon glyphicon-off"></span> Log out</li>
</ul>
</div>
</nav>
</body>
</html>
You're calling it wrong, You should remove the dot before the nav, that way you select the element.
This is working and I've tested:
nav .navbar-nav li a{
color: #3232ff !importan;
}
This way you are referring to a .nav-bar class in a nav element.
See result here:
<html>
<head>
<title><?php echo $title;?></title>
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body >
<style>
nav .navbar-nav li a{
color: #000000 !important;
}
</style>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li> <span class="glyphicon glyphicon-home"></span> Home
</li>
<li> <span class="glyphicon glyphicon-off"></span> Log out
</li>
</ul>
</div>
</nav>
</body>
</html>
Related
I am currently learning to make a web using php and using modularity techniques. Previously I managed to run bootstrap on a php file. but when I create a folder in my directory with the name 'layout' and then in the layout folder, i make new php file with the name 'index.php' for the web display, and I give bootstrap with stylesheet in layout/index.php, it turns out bootstrap doesn't work.
Take a look in my directory
and Here's my index.php
<?php
$modul =isset($_GET['modul'])?$_GET['modul']:'default';
$action = isset($_GET['action'])?$_GET['action']:'index';
include 'layout/index.php';
?>
and here's layout/index.php
<!DOCTYPE html>
<html>
<head>
<title>MAIN MENU</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" media="screen">
<meta charset="UTF-8">
<meta name="viewport" content="width = device-width, intial-scale=1">
<style>
body {
text-align: center;
}
section{
background-color: white;
margin: 25px 0px;
padding: 25px;
border: solid black;
border-radius: 25px;
}
</style>
</head>
<body>
<header>
<div class="jumbotron text-center text-light bg-danger" style="margin-bottom: 5px">
<h1>PHP <br> TEKNIK MODULASI FILE DAN DIREKTORI</h1>
</div>
</header>
<nav class="navbar navbar-expand-sm bg-danger navbar-dark justify-content-center">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="index.php?modul=menu1">Kalkulator</a></li>
<li class="nav-item"><a class="nav-link" href="index.php?modul=menu2">Menu2</a></li>
<li class="nav-item"><a class="nav-link" href="index.php?modul=menu3">Menu3</a></li>
<li class="nav-item"><a class="nav-link" href="index.php?modul=menu4">Menu4</a></li>
<li class="nav-item"><a class="nav-link" href="index.php?modul=mahasiswa">Mahasiswa</a></li>
</ul>
</nav>
<section class="container">
<article>
<!--- ini adalah content--->
<?php
include 'modul/'.$modul.'/'.$action.'.php';
?>
</article>
</section>
<footer class="py-5 bg-danger">
<div class="container">
<p class="m-0 text-center text-white">Copyright © 2019 Imam Faried Helmi</p>
</div>
<!-- /.container -->
</footer>
</body>
</html>
Here's the result, bootstrap is not working
when i take this code
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" media="screen">
into index.php the bootstrap is work. but why bootstrap not working in layout/index.php ?
Does anyone know how to fix it? Help me please :)
<link rel="stylesheet" href="/bootstrap/css/bootstrap.css" media="screen">
This will work for sure. As you have not added bootstrap.min.css please check first.
Why does my navbar both side have a white background color?
I used the developer tool to try and help me and the part that change it white was the navbar default. I try to change the css inside the developer tool using this and it work.
This is the part that I changed inside the developer tool:
.navbar-default {
background-color: blue;
}
I also tried to change in the app.css and change the navbar-default to blue but the problem is still occurring, and when I check inside the developer tool, the color code is white instead of the blue that I had just changed. But it works if I change it inside the developer tool.
I tried following this question, but it doesn't work as well:
Background color in navbar laravel.
My page consists of an HTML table, and I have used #extends to put the navbar inside this page. When I try doing it for other pages, the navbar works.
htmlTable.blade.php:
#extends('layouts.app')
#section('title', 'Summary')
#section('content')
<div class="container" style="background-color:#ADD8E8">
//content of my html table
</div>
#endsection
app.blade.php (navbar):
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>#yield('title')</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/title.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#include('layouts.testSidebar')
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}" style="color: white">
#yield('title')
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#guest
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" style="background-color:blue">
<b style="color: white">{{ Auth::user()->name }}</b> <span class="caret"></span>
</a>
<ul class="dropdown-menu" style="background-color: blue">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();" style="background-color: blue">
<b style="color: white">Logout</b>
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
test.css (this is the CSS that I used):
body{
margin:0px;
padding:0px;
font-family:"Helvetica Neue", Helvetica, Arial;
}
#sidebar{
background:blue;
width:200px;
height:100%;
display:block;
position:fixed;
left:-200px;
top:0px;
transition:left 0.3s linear;
}
#sidebar.visible{
left:0px;
transition:left 0.3s linear;
}
ul{
margin:0px;
padding:0px;
}
ul li{
list-style:none;
}
ul li a{
background:#0000FF ;
color:white;
border-bottom:1px solid #111;
display:block;
width:180px;
padding:10px;
text-decoration: none;
}
#sidebar-btn{
display:inline-block;
vertical-align: middle;
width:20px;
height:15px;
cursor:pointer;
margin:20px;
position:absolute;
top:0px;
right:-60px;
}
#sidebar-btn span{
height:1px;
background:white;
margin-bottom:5px;
display:block;
}
#sidebar-btn span:nth-child(2){
width:75%;
}
#sidebar-btn span:nth-child(3){
width:50%;
}
#navbar-toggle collapsed{
background:#0000FF ;
}
.navbar {background:#0000FF ;}
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
color: white;
background-color: transparent;
}
.dropdown-menu {
position: absolute;
top: 0;
left: 180px;
min-width: 180px;
}
This is what happens:
change this:
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
to:
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
The container-fluid class is the one you want
for some reason my sidebar color isn't changing, I have no idea why, it also even affect until my logout button which turn it into black in color. When I try to remove the code for the sidebar, the logout button color return back to normal. But I had already changed the color inside the css file already to another color but still doesn't work. Can anyone help me? Thanks in advance
When I used the chrome developer tool to try change the color at there it work but when I refresh it, the color black remains there again, but when I try to change it inside the code the color black still remains there also:
ul li a{
background:#ADD8E6;
Here is a screenshot: (all the way to the right is the logout button)
app.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<title>SideBar Menu</title>
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
</head>
<body>
<div id="sidebar">
<ul>
<li>Home</li>
<li>Waiting List</li>
</ul>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#guest
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
style.css
body{
margin:0px;
padding:0px;
font-family:"Helvetica Neue", Helvetica, Arial;
background-color: blue;
}
#sidebar{
background:#ADD8E6;
width:200px;
height:100%;
display:block;
position:absolute;
left:-200px;
top:0px;
transition:left 0.3s linear;
}
#sidebar.visible{
left:0px;
transition:left 0.3s linear;
}
ul{
margin:0px;
padding:0px;
}
ul li{
list-style:none;
}
ul li a{
background:#ADD8E6;
color:#ccc;
border-bottom:1px solid #111;
display:block;
width:180px;
padding:10px;
text-decoration: none;
}
#sidebar-btn{
display:inline-block;
vertical-align: middle;
width:20px;
height:15px;
cursor:pointer;
margin:20px;
position:absolute;
top:0px;
right:-60px;
}
#sidebar-btn span{
height:1px;
background:#111;
margin-bottom:5px;
display:block;
}
#sidebar-btn span:nth-child(2){
width:75%;
}
#sidebar-btn span:nth-child(3){
width:50%;
}
I Think Your CSS Has been Con fit , check That In enter image description here
I am trying a build a web portal which runs a php script script that calls a batch file in windows, which in turn executes a powershell script that run powercli to fetch required info from vmware vcenter. All the result is sent to a file named f1.txt and f1.html sources this file and displays the output.All my codes are below.
The below solution works but, I have a requirement to display some output instead of a blank page when f1.php script is running and waiting for output from the underlying powershell script f1.bat -> f1.ps1.
Some progress report or direct feedback from the php script would do while the webpage is waiting the php script to finish.
For eg: Loading... with blinking dots or output from the script itself.
I have tried the flush() method and ob_flush() method in f1.php but it just gives me a blank screen with the output and once the php script completes running the nav bar gets loaded below that output.The page is all mangled.
How can I get the desired result with minimal code manipulation. If ajax or javascript is required for the task, then I'm open to that as well.
I have the below in index.php
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
#media (min-width: 979px) {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
}
ul.nav li.dropdown-submenu:hover > ul.dropdown-menu {
display: block;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse ">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">VMware VC Reports</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown" data-toggle="dropdown" href="#">Vcenters<span class=caret></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">San Jose Vcenter<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="http://mickey.example.com/view/f1.php">ESX Info</a></li>
<li><a tabindex="-1" href="http://mickey.example.com/view/f2.php">Firmware Info</a></li>
</li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>
I have the below in f1.php file.
<?php
system("f1.bat");
header("Location:http://mickey.example.com/view/f1.html");
exit;
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
#media (min-width: 979px) {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
}
ul.nav li.dropdown-submenu:hover > ul.dropdown-menu {
display: block;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse ">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">VMware VC Reports</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown" data-toggle="dropdown" href="#">Vcenters<span class=caret></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">San Jose Vcenter<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="http://mickey.example.com/view/f1.php">ESX Info</a></li>
<li><a tabindex="-1" href="http://mickey.example.com/view/f2.php">Firmware Info</a></li>
</li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>
I have the below in f1.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
#media (min-width: 979px) {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
}
ul.nav li.dropdown-submenu:hover > ul.dropdown-menu {
display: block;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse ">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">VMware VC Reports</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown" data-toggle="dropdown" href="#">Vcenters<span class=caret></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">San Jose Vcenter<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="http://mickey.example.com/view/f1.php">ESX Info</a></li>
<li><a tabindex="-1" href="http://mickey.example.com/view/f2.php">Firmware Info</a></li>
</li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
<script type="text/javascript">
<!--
var iframe = document.createElement("iframe");
iframe.src = "f1.txt";
iframe.width = "20000";
iframe.height = "20000";
iframe.frameBorder = "0";
iframe.scrolling = "no";
document.body.appendChild(iframe);
//-->
</script>
</body>
</html>
Here, I have 2 files index.php and pop_map.php. I have created index.php file using bootstrap and when I console it, it works fine but when I am trying to call it from pop_map.php file, where I have included index.php file, there is a gap in between header and nav bar and the dropdown button does not work. Please help!
index.php file
<html>
<head>
<title>Visualization</title>
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<style type="text/css">
#media(max-width: 10px){
h1{
font-size: 22px;
font-color:blue;
text-align: center;
}
}
</style>
</head>
<body>
<div class="container">
<div class="start navbar-default navbar-fixed-top" style="text-align:center;background-color:#006400;height:100px" >
<h1>Millenium Development Goal-7<br><small>Ensure Environmental Sustainability</small></br></h1>
<div class="navbar navbar-inverse navbar-static-top " style="background-color:#9ACD32" >
Home
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="pop_map.php" class="dropdown-toggle" data-toggle="dropdown"style="color:008000">Population
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Central</li>
<li>Western</li>
<li>Far-Western</li>
<li>Mid-Western</li>
<li>Eastern</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"style="color:008000">Sanitation
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Central</li>
<li>Western</li>
<li>Far-Western</li>
<li>Mid-Western</li>
<li>Eastern</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"style="color:008000">Water
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Central</li>
<li>Western</li>
<li>Far-Western</li>
<li>Mid-Western</li>
<li>Eastern</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src ="js/bootstrap.js"></script>
</body>
</html>
Now, in pop_map.php file, I have included this file using . But it does not work. Please help!
..you are probably using a wrong path to include the files. Right click on the loaded page, view source, and click on the bootstrap.min.css and bootstrap.js. Are they loaded correctly? If not, it probably has to do with your path.
Did you include the bootstrap-dropdown.js?
Try adding this line to the code
<script src="js/bootstrap-dropdown.js"></script>
Cross-check the path to your stylesheets.
I experienced this problem once, and it seems tricky but it has a straight forward solution.
You're not linking properly to your stylesheets. View the page source from the browser and open the link to the bootstrap stylesheets, they probably wouldn't be found.
You can also just add this at the top of "style.css" before any code but after the stylesheet header (the comment):
#import url('css/bootstrap.min.css');