6 Replies - 2393 Views - Last Post: 17 August 2013 - 03:50 PM

#1 Logik22  Icon User is offline

  • D.I.C Head

Reputation: 9
  • View blog
  • Posts: 163
  • Joined: 12-December 11

Bootstrap not working

Posted 17 August 2013 - 11:11 AM

I'm starting to learn Bootstrap and I'm running in to an issue. I started by doing some tutorials but I noticed mine didn't look to similar to what it should look like. I decided to just copy the full code of a tutorial just to rule out a typo being the issue. This is what it should look like:
http://www.w3resourc...ar-example.html

Source code: http://www.w3resourc...ar-tutorial.php

This is what I get:
http://i40.tinypic.com/jigazd.png


In my Bootstrap folder I have the 3 default folders (css, js, img) and then I Have my "index.html". I had another tutorial where I made a link ("<a href"#" class="button">Test</a>") and it had the hoverOn affect so I figured that ruled out an issue of it not being able to reference the bootstrap files but at the same time my version of the tutorial looks like it doesn't have any Bootstrap formatting.

Any ideas on what I'm doing wrong?

Is This A Good Question/Topic? 0
  • +

Replies To: Bootstrap not working

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3252
  • View blog
  • Posts: 10,902
  • Joined: 12-December 12

Re: Bootstrap not working

Posted 17 August 2013 - 01:34 PM

<a href"#" class="button">Test</a>

This is incorrect and should be href="#". Perhaps there is another simple error in your code. Most likely, you haven't correctly attached the css file.

If your css file is in a subfolder named css (a subfolder from the location of your index.html file) then you attach it like this:
<link rel="stylesheet" type="text/css" href="css/your_css_file.css">

Was This Post Helpful? 0
  • +
  • -

#3 Logik22  Icon User is offline

  • D.I.C Head

Reputation: 9
  • View blog
  • Posts: 163
  • Joined: 12-December 11

Re: Bootstrap not working

Posted 17 August 2013 - 01:56 PM

Sorry, I forgot the "=" when I typed it in at the post but I did not forget it when I tried it originally. I'm still having some trouble though. This is the code I'm using:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap navbar Example</title> 
<meta name="description" content="Twitter Bootstrap navbar Example. This example includes rendering of Social buttons.">
<link href="./css/bootstrap.css" rel="stylesheet"> 
<style type="text/css">
.socials {
padding: 10px;
}
</style>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
	<ul class="nav">
  <li class="active">
    <a class="brand" href="#">w3resource</a>
  </li>
  <li><a href="#">About</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<ul class="nav">
  <li class="dropdown">
    <a href="#"
          class="dropdown-toggle"
          data-toggle="dropdown">
          Services
          <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
     <li><a href="#">Web Design</a></li>
  <li><a href="#">Web development</a></li>
  <li><a href="#">Wordpress Theme development</a></li>
    </ul>
  </li>
</ul>
<form class="navbar-search pull-left">
  <input type="text" class="search-query" placeholder="Search">
</form>
<ul class="nav pull-right">
  <li class="dropdown">
    <a href="#"
          class="dropdown-toggle"
          data-toggle="dropdown">
          Social
          <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
     <li class="socials"><!-- Place this tag where you want the +1 button to render -->
<g:plusone annotation="inline" width="150"></g:plusone>
</li>
  <li class="socials"><div class="fb-like" data-send="false" data-width="150" data-show-faces="true"></div></li>
  <li class="socials"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li>
    </ul>
  </li>
</ul>
    </div>
  </div>
</div>
<script src="./js/jquery.js"></script>
<script src="./js/bootstrap-dropdown.js"></script>
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</body>
</html> 

This post has been edited by andrewsw: 17 August 2013 - 03:43 PM
Reason for edit:: Removed previous quote

Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3252
  • View blog
  • Posts: 10,902
  • Joined: 12-December 12

Re: Bootstrap not working

Posted 17 August 2013 - 02:35 PM

Quote

I'm still having some trouble though.

Does this mean that it isn't loading the bootstrap-css?
<link href="./css/bootstrap.css" rel="stylesheet">

So is the bootstrap.css file stored off your root-directory, in a subfolder named css? Are there errors in your browser's console? If you don't know about this then there are links in my signature.

I would test by temporarily copying the bootstrap.css file to the same location as your index.html and using:
<link href="bootstrap.css" rel="stylesheet">

This post has been edited by andrewsw: 17 August 2013 - 02:36 PM

Was This Post Helpful? 0
  • +
  • -

#5 Logik22  Icon User is offline

  • D.I.C Head

Reputation: 9
  • View blog
  • Posts: 163
  • Joined: 12-December 11

Re: Bootstrap not working

Posted 17 August 2013 - 03:18 PM

I tried temporarily putting bootstrap.css on the same level as index.html and it didn't affect anything.

I added a period before my file path (ie "./bootstrap/bootstrap.css" and it seems to have linked at least one of the Bootstrap files. I don't think it linked all of them.

It looks like this now: http://i40.tinypic.com/357es5t.png




<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap navbar Example</title> 
<meta name="description" content="Twitter Bootstrap navbar Example. This example includes rendering of Social buttons.">
<link href="./css/bootstrap.css" rel="stylesheet"> 
<style type="text/css">
.socials {
padding: 10px;
}
</style>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
	<ul class="nav">
  <li class="active">
    <a class="brand" href="#">w3resource</a>
  </li>
  <li><a href="#">About</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<ul class="nav">
  <li class="dropdown">
    <a href="#"
          class="dropdown-toggle"
          data-toggle="dropdown">
          Services
          <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
     <li><a href="#">Web Design</a></li>
  <li><a href="#">Web development</a></li>
  <li><a href="#">Wordpress Theme development</a></li>
    </ul>
  </li>
</ul>
<form class="navbar-search pull-left">
  <input type="text" class="search-query" placeholder="Search">
</form>
<ul class="nav pull-right">
  <li class="dropdown">
    <a href="#"
          class="dropdown-toggle"
          data-toggle="dropdown">
          Social
          <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
     <li class="socials"><!-- Place this tag where you want the +1 button to render -->
<g:plusone annotation="inline" width="150"></g:plusone>
</li>
  <li class="socials"><div class="fb-like" data-send="false" data-width="150" data-show-faces="true"></div></li>
  <li class="socials"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li>
    </ul>
  </li>
</ul>
    </div>
  </div>
</div>
<script src="./js/bootstrap.js"></script>
<script src="./js/bootstrap-dropdown.js"></script>
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</body>
</html> 



Edit: Within the "bootstrap" folder there are 3 folders (css, js, img) which contain all the Bootstrap files. In addition to those 3 folders I also have my Index.html in the root of the Bootstrap folder.

I will look in to enabling the browser console errors

This post has been edited by andrewsw: 17 August 2013 - 03:44 PM
Reason for edit:: Removed previous quote

Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3252
  • View blog
  • Posts: 10,902
  • Joined: 12-December 12

Re: Bootstrap not working

Posted 17 August 2013 - 03:45 PM

There is no need to keep quoting the entire previous post. Click the (larger) Reply button, further down, rather than 'Quote + Reply', unless there is something specific that you wish to refer to.
Was This Post Helpful? 0
  • +
  • -

#7 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3252
  • View blog
  • Posts: 10,902
  • Joined: 12-December 12

Re: Bootstrap not working

Posted 17 August 2013 - 03:50 PM

View PostLogik22, on 17 August 2013 - 10:18 PM, said:

Edit: Within the "bootstrap" folder there are 3 folders (css, js, img) which contain all the Bootstrap files. In addition to those 3 folders I also have my Index.html in the root of the Bootstrap folder.

If you have a "bootstrap" folder containing all these files then ./css/bootstrap.css won't locate this file because '.' is the root of your domain/your site.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1