Bootstrap 4 alert box

DEMO of BS4 alert using JQuery

Including Link within alert

Links within Alert takes the colour matching to the alert.
<div class='alert alert-info' role='alert'>
You can learn 
more about <a href="site_map.php" class="alert-link">JQuery</a> Here. 

Close the message ( Alert )

User can dismiss the alert, it requires JavaScript plugin or Jquery should be included.
Try to close this alert by clicking the X at right.
<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>

Closing the message after some time delay

Click this button to open one alert box. The alert box will self close after 4 seconds.

The complete HTML and JQuery code is here .
<button type='button' class='btn btn-primary' id='b_show_alert'>
Show Alert Box
<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. 

$(document).ready(function() {
setTimeout(function() { $("#alert_msg").fadeOut('slow'); }, 4000);

Adding Style

We can position the alert box at different part of the page by usign style. We can hide the alert box while the page loads and connect it to any associated event to display.
The style below will display the alert box at top, right of the page. As the position is kept as fixed, so the alert box will display below the address bar even if the user scrolls down to bottom of the page.
 display: none;
 position: fixed;
 z-index: 10;
chaging background & Font colour


* indicates required
Subscribe to plus2net

    Most Popular JQuery Scripts


    Two dependant list boxes


    Calendar with Date Selection


    Data change by Slider


    Show & Hide element

    JQuery Video Tutorials

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2022 All rights reserved worldwide Privacy Policy Disclaimer