Alert dismissing using Twitter Bootstrap is not working?

Question

I'm using Google Chrome.
Using Twitter Bootstrap, I want to add a simple alert, unfortunately the alert is not dismissing when the x is pressed!

Here's my code based on alert documentation:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>    
    <div class="alert">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <strong>Warning!</strong> Best check yo self, you're not looking too good.
    </div>      
  </body>
</html>

And I also tried:

<!DOCTYPE html>
  <html>
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
      <!-- Bootstrap -->
      <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    </head>
    <body>    
    <div class="alert">
        <a href="#" class="close" data-dismiss="alert">×</a>
        <strong>Warning!</strong> Best check yo self, you're not looking too good.
    </div>      
    </body>
  </html>

What is missing to make it dismiss ?

Not strange, since you have completely forgotten bootstrap.js :) — davidkonrad, Nov 22 '12 at 11:43
It works :) .... Thanks :) .... You can put it as answer so that I can increase your points :) — Ashraf Bashir, Nov 22 '12 at 11:50
Never mind, just a typical blunder - happends all the time :) — davidkonrad, Nov 22 '12 at 11:54

score 20 · Accepted Answer · edited May 23 '17 at 12:09

20

Thanks to davidkonrad's comment.
The solution is trivial, by adding:

    <script src="js/bootstrap.min.js"></script>

edited May 23 '17 at 12:09

Community

1
1

answered Nov 22 '12 at 11:57

Ashraf Bashir

9,686
15
57
82

2

Another cause could be: Uncaught Error: Bootstrap's JavaScript requires jQuery. Then should add `%script{ :src => '//code.jquery.com/jquery.js' }` – Jing Li Jun 01 '14 at 17:10

score 0 · Answer 2 · answered May 06 '14 at 11:27

I've written a small, customisable, jquery plugin that injects a properly formed Bootstrap 3 alert (with or without close button as you need it) with a minimum of fuss and allows you to easily regenerate it after the box is closed.

See https://github.com/davesag/jquery-bs3Alert for usage, tests, and examples.

Alert dismissing using Twitter Bootstrap is not working?

2 Answers2

Linked