Menu
I'm trying to get an alert to disappear when the "x" button is clicked, but there seems to be something missing that's keeping it from working, not sure what it is.
<div class="alert alert-success alert-dismissible">
<button type = "button" class="close" data-dismiss = "alert">x</button>
You've done it!
</div>
382
asked Sep 03 '26 23:09
for dismissible to work, you need to include jQuery and bootstrap.js in your document.
<!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">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="alert alert-success alert-dismissible">
<button type = "button" class="close" data-dismiss = "alert">x</button>
You've done it!
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div style="margin-top: 50px" class="alert alert-success alert-dismissible">
<button type = "button" class="close" data-dismiss = "alert">x</button>
You've done it!
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
