Bootstrap is not working, but included both js and css

Question

Bootstrap is not working at all, modals don't close, transitions don't work etc. Firebug says is no function called .modal, so I tried using different versions of Jquery, bootstrap etc. Nothing worked Here's the code I used (not polished up :( so don't mind it being a bit messy).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="index.css" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<script type='text/javascript' src="js/bootstrap.js"></script>
<script type='text/javascript' src="js/jquery.js"></script>
<title></title>
</head>
<body>
<!-- 

-->
<div class="modal hide " id='myModal'>
  <div class="modal-header">
    <h3>Select a friend</h3>
  </div>
  <div class="modal-body">
    <p></p>
  </div>
  <div class="modal-footer">
    <span id="friendSelector" onClick='selectFriend()'>Select a friend first</span>
  </div>
</div>
<center id="page">
  <h2 id="title">  </h2>
  <div id="tabs">
    <div class="tabTitle"><span class="tabTitleText">Mutual Friends</span></div>
    <div class="tabContent">
      <div class="tabContentHeader">
        <div class="clientInfo">
          <div class="container">
            <div class="containerLeft">
              <div class="image">
                // NOT INTERESTING AND SECRET! :p
  </div>
</center>
<!--
Js scripts
-->
<script>
var id = '';
$(function() {
  $('.modal-body').load('request.php', { 'type': 'getFriends' });
  $('#myModal').modal({
      keyboard: false
    });
});
$('#myModal').modal('hide');
function selectFriend(){
    alert(id);
    if(id != '') {
    alert('nice');
    jQuery.noConflict();
    (function ($) {
        $('#myModal').modal('hide');
    }
    )(jQuery);
    }
}
function markFriend(friendId) {
    id = friendId;
    $('#friendSelector').html('Continue');
}

</script>
</body>
</html>

Thanks, Sam

I thought so, but apparently I didn't cuz it worked like a charm — Sam Kool
– Sam Kool, Commented Feb 26, 2013 at 18:36

Intrepidd · Accepted Answer · 2013-02-26 17:49:53Z

4

The javascript plugins of twitter bootstrap rely on JQuery.

Swap your script lines so JQuery is loaded before bootstrap.js

answered Feb 26, 2013 at 17:49

Intrepidd

21.2k7 gold badges59 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Bootstrap is not working, but included both js and css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related