Alert with additional content in bootstrap 4. In this bootstrap you can add alert title, description and footer content. this is usefull for disply more content in alert. this alert support all the browser.you can easaly implement in your project.

We allows to free snippets of bootstrap alert popup , you can download full code of bootstrap alert example layout. Here in this post i will give you example of bootstrap alert fade out snippet and you will get simple code of html, css and jquery. In bootstrap show alert snippet i give you three tab with html, css and js, you can easily get code of bootstrap alert with icon layout.


<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row mt-5"> <div class="col-md-6 col-12"> <div class="alert alert-success" role="alert"> <h4 class="alert-heading">Well done!</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> </div> <div class="col-md-6 col-12"> <div class="alert alert-info" role="alert"> <h4 class="alert-heading">Well done!</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> </div> <div class="col-md-6 col-12"> <div class="alert alert-warning" role="alert"> <h4 class="alert-heading">Well done!</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> </div> <div class="col-md-6 col-12"> <div class="alert alert-danger" role="alert"> <h4 class="alert-heading">ooops!</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> </div> </div> </div> </body> </html>

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post