Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
akhilendra singh
2,370 PointsBootstrap not loading
I have followed the tutorial but when i load my page in browser, bootstrap is not loading which is causing the default styling and no bootstrap impact.
my header code is;
<!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 come first in the head; any other head content must come after these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico">
<title>Jumbotron Template for Bootstrap</title>
<!-- Custom styles for this template -->
<link href="jumbotron.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<?php wp_head();
?>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
And functions.php is;
<? function theme_styles(){ wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' ); }
add_action('wp_enqueue_scripts', 'theme_styles');
?>
Also, i am able to open the local installations in browser but when i m trying to open it in dreamweaver, live site preview, it is throwing fatal error for wp_head function. Is there any known issue with dreamweaver?
Please help.
8 Answers
Stanley Thijssen
22,831 PointsIs this your full code? I can see you are missing some html tags inside your head?
akhilendra singh
2,370 Pointsyes, i copied and pasted everything as shown in the video, i will review it once more, can you specify anything which you think is missing?
Stanley Thijssen
22,831 Pointssome html elements like html doctype, html, head etc
akhilendra singh
2,370 Pointsthey are not present in this question but they are present in the file, somehow it got removed during pasting into the this discussion forum.
akhilendra singh
2,370 Pointsin fact when i am directly pasting the url of my bootstrap.min.css file in browser, i am able to access it but somehow they are not getting linked to functions or header file which is causing it.
Stanley Thijssen
22,831 Pointshave u tryed to see if u get an error while inspecting your page ?
You can also try to turn on debug mode of Wordpress to check if theres something wrong with your code. You can turn it on in your wp-config file in the Wordpress folder.
define( 'WP_DEBUG', true ); paste this into your wp-config file or search for define( 'WP_DEBUG', false ); first to see if its already there and change the false to true.
akhilendra singh
2,370 PointsFor the time being, i am using the bootstrap cdn in header file, thanks for all your help. I will look at this later.
Abiola Akinnubi
Courses Plus Student 1,705 Pointsplease I am having the same issue how do you manage to use the bootstrap cdn in the header file
Abiola Akinnubi
Courses Plus Student 1,705 PointsI have got it but how teacher has to comment on this where is he.... we paid for this they should also be commenting here ,...
Sam Deacon
2,650 Points###@header
<?php wp_head(); ?>
### @functions.php
<?php
function theme_styles() {
wp_enqueue_style('bootstrap_css', get_template_directory_uri().'/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'theme_styles');
?>
#### your code:
<?php
function theme_styles(){
wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' );
}
add_action('wp_enqueue_scripts', 'theme_styles');
?>
code looks alright, perheps html tags have been cut out by mistake or simple file name misspelling?