Bootstrap 4 Alerts
Bootstrap 4 alerts communicate success, information, warnings and errors. Add alert-dismissible plus the close button when users should dismiss the message.
Contextual Alert Classes Top ↑
<div class="alert alert-primary" role="alert">Primary alert</div>
<div class="alert alert-success" role="alert">Success alert</div>
<div class="alert alert-warning" role="alert">Warning alert</div>
<div class="alert alert-danger" role="alert">Danger alert</div>
Dismissible Alert Top ↑
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Warning:</strong> Check the entered value.
<button type="button"
class="close"
data-dismiss="alert"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
Alert Links Top ↑
<div class="alert alert-success" role="alert">
Saved successfully.
<a href="#" class="alert-link">View record</a>
</div>
Change Alert Style with jQuery Top ↑
$( "#status" )
.removeClass(
"alert-info alert-warning alert-danger"
)
.addClass( "alert-success" )
.text( "Saved successfully." );
Original Source Examples Retained for Migration Reference Top ↑
These original examples are preserved so no learner-purpose code is silently dropped. The current examples above are the recommended implementation for this page.
Original example 1
<div class='alert alert-info' role='alert'>
You can learn
more about <a href="site_map.php" class="alert-link">JQuery</a> Here.
</div>Original example 2
<div class="alert alert-primary alert-dismissible fade show" role="alert">
<strong>Welcome to plus2net!</strong> Read here about web programming .
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>Original example 3
<button type='button' class='btn btn-primary' id='b_show_alert'>
Show Alert Box
</button>
<br><br>
<div class="alert alert-primary" role="alert" id=alert_msg>
<strong>Hi!</strong> I will close after 4 Seconds .<br>
You can open me by clicking the button.
</div>
<script>
$(document).ready(function() {
$('#alert_msg').hide();
$('#b_show_alert').click(function(){
$('#alert_msg').show();
setTimeout(function() { $("#alert_msg").fadeOut('slow'); }, 4000);
})
})
</script>Original example 4
<style>
#alert_msg{
display: none;
position: fixed;
z-index: 10;
top:0;
right:0;
}
</style>Additional Original Learning Routes Top ↑
Continue Learning jQuery
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
Connect:
This article is written by plus2net.com team.
