Twitter Bootstrap Alert won't close - twitter-bootstrap-3

Question

I'm using the Twitter Bootstrap Framework for some design parts od my page.
I try to set up an alert that can be closed. My code looks just like that:
<div id="index-alert" class="alert alert-danger .alert-dismissible">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<b>An Error occured</b>
</div>
There is an X at the upper right corner that's clickable, but nothing happens.
The firebug console doesn't give me any errors either.
I'm using the Bootstrap Version 3.2.0
Does anybody know what i'm doing wrong?

Answer 1

Try this
<div id="index-alert" class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<b>An Error occured</b>
</div>
If that fails, ensure you have referenced <script src="js/bootstrap.min.js"></script>

Answer 2

You should write alert-dismissible instead of .alert-dismissible ;)
And don't forget to add both jQuery.js and bootstrap.js files before the </body> closing tag. jQuery must be added first:
<script src="/jquery-3.2.1.min.js"></script>
<script src="/bootstrap.min.js"></script>

Answer 3

In case none of these answers workout, you can always put inline javascript inside the HTML tag.
Disclaimer: This is a bad practice and don't write code like this if at all possible.
Now try this out:
<div class="alert alert-info alert-dismissible fade show" role="alert">
<button type="button" class="close" onclick="this.parentElement.style.display='none';"><span>×</span></button> This is a dismissable message.
</div>

Answer 4

I know that the answer may no longer serve you, but the following worked for me:
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>XXXXXX</strong> XXXXXX.
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
</div>