"Uncaught SyntaxError: Unexpected token { " in Bootstrap 2.1.0 bundled with Joomla! 3.0

Question

I'm using Joomla! 3.0, which has Twitter Bootstrap 2.1.0 included. I want to do my own Joomla! template, and I need to use dropdown menus. When I include following CSS/JS:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>    
<script type="text/javascript" src="<?php echo $this->baseurl ?>/media/jui/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/media/jui/css/bootstrap.css"></script>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/Site.css" rel="stylesheet" type="text/css">
<link rel="shotcut icon" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/images/favicon.ico" type="image/x-icon">

I get following CSS error:

Uncaught SyntaxError: Unexpected token { 

in /media/jui/css/bootstrap.css, line 19

Answer 1

You have syntax error because you tried to include CSS file as it was JavaScript, so change

<script type="text/javascript" src="<?php echo $this->baseurl ?>/media/jui/css/bootstrap.css"></script>

to

<link href="<?php echo $this->baseurl ?>/media/jui/css/bootstrap.css" rel="stylesheet" type="text/css" />

Also close other link tags properly with />, not with just >