The code was working perfectly on local host with xampp. All I've done is upload it to a server and now it's not working.
I uploaded all the BS files as well. I also fixed the href links to be '..../js/bootstrap.min.js' etc. No images load and nor does bootstrap I do not think. The reason I think the problem es from Bootstrap is because all the text/buttons still appear, they just aren't customised with the css/JS as BS does.
They are php files.
This is a link to the site: . I'm only new and this is just for learning so all advice is much appreciated.
This is the relevant code I think, I deleted a lot of the stupid text to make it shorter:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* e first in the head; any other head content must e *after* these tags -->
<title>Jod</title>
<!-- Bootstrap -->
<link rel="stylesheet" href=".3.6/css/bootstrap.min.css">
<link rel="stylesheet" href=".5.0/css/font-awesome.min.css">
<link rel='stylesheet' type='text/css' href="johnnythyroid.ipage/css/custom icons.css">
<link href='+Sans' rel='stylesheet' type='text/css'>
<link href='' rel='stylesheet' type='text/css'>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src=".11.3/jquery.min.js"></script>
<!-- Include all piled plugins (below), or include individual files as needed -->
<script src="johnnythyroid.ipage/js/bootstrap.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src=".7.2/html5shiv.min.js"></script>
<script src=".4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"> Navbar toggle </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="johnnythyroid.ipage/dansite1.php">Some Name</a>
</div>
<div class="navbar-collapse collapse" style="line-height:21px; height:140px;"> <!-- added this to prevent change of navbar height when switching between login/logout screens -->
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="johnnythyroid.ipage/dansite1.php">Home</a></li>
<li><a href="johnnythyroid.ipage/About.php">About</a></li>
<li><a href="#contact" data-toggle="modal">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Account<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header"></li>
<li><a href="#accountLogin" data-toggle="modal">Login</a></li>
<li><a href="#accountCreate" data-toggle="modal">Create Account</a></li>
<!-- <li class="divider"></li>
<li class="dropdown-header">Portfolio</li>
<li><a href="#">Portfolio 1</a></li>
<li><a href="#">Portfolio 2</a></li> add divider to split up a drop down menu -->
</ul>
</li>
<li class="navbar-text pull-right signedin"> Wele, Guest! </li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="jumbotron text-center">
<h1> The </h1>
<p> A simgn </p>
<a href="#" class="btn btn-primary"> Bg </a>
<a href="#" class="btn btn-success"> ng</a>
</div>
<div class="row-same-height">
<div class="col-md-4"> <!-- works on a 12 point grid system - columns need to add up to 12 in a row-->
<a href="johnnythyroid.ipage/rocket.php" class="thumbnail home-thumb">
<img src="johnnythyroid.ipage/Img/first rocket.jpg" style="max-height:250px" alt="First rocket theme"/>
</a>
<h3> Rjj </h3>
<p>sum dolor sit amet.</p>
</p>
<a href="johnnythyroid.ipage/rocket.php" class="btn btn-danger">View more</a>
</div>
<div class="col-md-4"> <!-- works on a 12 point grid system - columns need to add up to 12 in a row-->
<a href="johnnythyroid.ipage/stars.php" class="thumbnail home-thumb">
<img src="johnnythyroid.ipage/Img/sky.jpg" style="max-height:250px" alt="sky theme"/>
</a>
<h3> Ss </h3>
<p>Lorenim.</p>
<a href="johnnythyroid.ipage/stars.php" class="btn btn-danger">View more</a>
</div>
<div class="col-md-4"> <!-- works on a 12 point grid system - columns need to add up to 12 in a row-->
<a href="johnnythyroid.ipage/sky.php" class="thumbnail home-thumb">
<img src="johnnythyroid.ipage/Img/stars.jpg" style="min-height:227px" alt = "Star theme"/>
</a>
<h3> y </h3>
<p>Lorenim.</p>
<a href="johnnythyroid.ipage/sky.php" class="btn btn-danger">View more</a>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="container">
<div class="navbar-text pull-left">
<p> aaaaaa </p>
</div>
<div class="navbar-text pull-right">
<a href="#"><i class="fa fa-facebook-square fa-2x"></i></a>
<a href="#"><i class="fa fa-twitter fa-2x"></i></a>
<a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
</div>
</div>
</div>The code was working perfectly on local host with xampp. All I've done is upload it to a server and now it's not working.
I uploaded all the BS files as well. I also fixed the href links to be '..../js/bootstrap.min.js' etc. No images load and nor does bootstrap I do not think. The reason I think the problem es from Bootstrap is because all the text/buttons still appear, they just aren't customised with the css/JS as BS does.
They are php files.
This is a link to the site: http://www.johnnythyroid.. I'm only new and this is just for learning so all advice is much appreciated.
This is the relevant code I think, I deleted a lot of the stupid text to make it shorter:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* e first in the head; any other head content must e *after* these tags -->
<title>Jod</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./font-awesome/4.5.0/css/font-awesome.min.css">
<link rel='stylesheet' type='text/css' href="johnnythyroid.ipage./css/custom icons.css">
<link href='https://fonts.googleapis./css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis./css?family=Oswald' rel='stylesheet' type='text/css'>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all piled plugins (below), or include individual files as needed -->
<script src="johnnythyroid.ipage./js/bootstrap.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn./html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn./respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"> Navbar toggle </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="johnnythyroid.ipage./dansite1.php">Some Name</a>
</div>
<div class="navbar-collapse collapse" style="line-height:21px; height:140px;"> <!-- added this to prevent change of navbar height when switching between login/logout screens -->
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="johnnythyroid.ipage./dansite1.php">Home</a></li>
<li><a href="johnnythyroid.ipage./About.php">About</a></li>
<li><a href="#contact" data-toggle="modal">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Account<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header"></li>
<li><a href="#accountLogin" data-toggle="modal">Login</a></li>
<li><a href="#accountCreate" data-toggle="modal">Create Account</a></li>
<!-- <li class="divider"></li>
<li class="dropdown-header">Portfolio</li>
<li><a href="#">Portfolio 1</a></li>
<li><a href="#">Portfolio 2</a></li> add divider to split up a drop down menu -->
</ul>
</li>
<li class="navbar-text pull-right signedin"> Wele, Guest! </li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="jumbotron text-center">
<h1> The </h1>
<p> A simgn </p>
<a href="#" class="btn btn-primary"> Bg </a>
<a href="#" class="btn btn-success"> ng</a>
</div>
<div class="row-same-height">
<div class="col-md-4"> <!-- works on a 12 point grid system - columns need to add up to 12 in a row-->
<a href="johnnythyroid.ipage./rocket.php" class="thumbnail home-thumb">
<img src="johnnythyroid.ipage./Img/first rocket.jpg" style="max-height:250px" alt="First rocket theme"/>
</a>
<h3> Rjj </h3>
<p>sum dolor sit amet.</p>
</p>
<a href="johnnythyroid.ipage./rocket.php" class="btn btn-danger">View more</a>
</div>
<div class="col-md-4"> <!-- works on a 12 point grid system - columns need to add up to 12 in a row-->
<a href="johnnythyroid.ipage./stars.php" class="thumbnail home-thumb">
<img src="johnnythyroid.ipage./Img/sky.jpg" style="max-height:250px" alt="sky theme"/>
</a>
<h3> Ss </h3>
<p>Lorenim.</p>
<a href="johnnythyroid.ipage./stars.php" class="btn btn-danger">View more</a>
</div>
<div class="col-md-4"> <!-- works on a 12 point grid system - columns need to add up to 12 in a row-->
<a href="johnnythyroid.ipage./sky.php" class="thumbnail home-thumb">
<img src="johnnythyroid.ipage./Img/stars.jpg" style="min-height:227px" alt = "Star theme"/>
</a>
<h3> y </h3>
<p>Lorenim.</p>
<a href="johnnythyroid.ipage./sky.php" class="btn btn-danger">View more</a>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="container">
<div class="navbar-text pull-left">
<p> aaaaaa </p>
</div>
<div class="navbar-text pull-right">
<a href="#"><i class="fa fa-facebook-square fa-2x"></i></a>
<a href="#"><i class="fa fa-twitter fa-2x"></i></a>
<a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
</div>
</div>
</div>- Am I seeing this right? It looks like there is an entire html document in bootstrap.min.js: johnnythyroid./johnnythyroid.ipage./js/… – puzzle_fuzzle Commented Feb 6, 2016 at 3:46
3 Answers
Reset to default 2Try this change
<img src="johnnythyroid.ipage./Img/first rocket.jpg" style="max-height:250px" alt="First rocket theme">
into
<img src="http://johnnythyroid.ipage./Img/first rocket.jpg" style="max-height:250px" alt="First rocket theme">
add http:// to your all images src
Check the
consolefor errors.
It says, Bootstrap's JavaScript requires jQuery, As I could see, You have included it and it is loaded correctly. Include that file before including bootstrap.min.js
Also correct that path of images. Your request url bees: http://www.johnnythyroid./johnnythyroid.ipage./Img/first%20rocket.jpg which is incorrect.
Note: Just a blind guess, Incorrect path could be because of .htaccess
when reffering 3rd party include css or jss you have to use https if your server is using https else use http for example you are accessing your site http://yoursite. or http://localhost then http://getbootstrap./css/bootstrap.min.js or css will work that is why it works on localhost but if you use https for yoru site https://yoursidte. then http://getbootstrap./css/bootstrap.min.js or css will not work you will have to user https e.g https://getbootstrap./css/bootstrap.min.js or css
THIS WAS THE CASE WHY MY menu were wroking on localputer but not over https , after changing from http to https://getbootstrap./css/bootstrap.min.js or css now it is working .. all these files can be in different locations for example you may save bootstrap.min.css in your site folder in case you edited that file ..