---
title: "Alert in Bootstrap"  
description: "Alert in Bootstrap"  
author: "Ethan Karla"  
published: 2021-07-28  
updated: 2021-07-28  
canonical: https://www.mindstick.com/forum/156603/alert-in-bootstrap  
category: "bootstrap"  
tags: ["bootstrap"]  
reading_time: 2 minutes  

---

# Alert in Bootstrap

What is [Alert](https://answers.mindstick.com/qa/30927/what-is-an-alert) in [Bootstrap](https://www.mindstick.com/articles/1555/image-viewer-using-bootstrap-carousel)? Where has it been used?\

## Replies

### Reply by Anonymous User

Alert in Bootstrap is used to show a message to the user. This can be achieved with Bootstrap's .alert classes. There are eighth contextual classes in Bootstrap that you can use to display different types of messages.

Let's take an example of alert in Bootstrap to understand it better:

```
<!doctype html>
<html lang='en'>
<head>
    <!-- Required meta tags -->
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <!-- Bootstrap CSS -->
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>
    <title>Hello, world!</title>
</head>
<body>
    <div class='container'>
        <div class='alert alert-primary' role='alert'>
            This is a primary alert—check it out!
        </div>
        <div class='alert alert-secondary' role='alert'>
            This is a secondary alert—check it out!
        </div>
        <div class='alert alert-success' role='alert'>
            This is a success alert—check it out!
        </div>
        <div class='alert alert-danger' role='alert'>
            This is a danger alert—check it out!
        </div>
        <div class='alert alert-warning' role='alert'>
            This is a warning alert—check it out!
        </div>
        <div class='alert alert-info' role='alert'>
            This is a info alert—check it out!
        </div>
        <div class='alert alert-light' role='alert'>
            This is a light alert—check it out!
        </div>
        <div class='alert alert-dark' role='alert'>
            This is a dark alert—check it out!
        </div>
    </div>
    <!-- Optional JavaScript; choose one of the two! -->
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' crossorigin='anonymous'></script>
    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src='https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js' integrity='sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p' crossorigin='anonymous'></script>
    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js' integrity='sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF' crossorigin='anonymous'></script>
    -->
</body>
</html>
```

Output :

![Alert in Bootstrap](https://www.mindstick.com/mindstickforums/c7721180-3dea-4519-8860-2757204d2bc5/images/4baab523-3b52-467f-90ed-1fe5cf565bc6.png)\

Hope this forum will help you.

Happy Coding!


---

Original Source: https://www.mindstick.com/forum/156603/alert-in-bootstrap

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
