- Bootstrap 4 Tutorial
- Bootstrap 4 - Home
- Bootstrap 4 - Overview
- Bootstrap 4 - Environment Setup
- Bootstrap 4 - Layout
- Bootstrap 4 - Grid System
- Bootstrap 4 - Content
- Bootstrap 4 - Components
- Bootstrap 4 - Utilities
- Differences Between Bootstrap 3 and 4
- Bootstrap 4 Useful Resources
- Bootstrap 4 - Quick Guide
- Bootstrap 4 - Useful Resources
- Bootstrap 4 - Discussion
Bootstrap 4 - Alerts
Description
The alert component specifies the predefined message for an user actions. It is used to send the information such as warning, error or confirmation messages to the end users.
You can create an alert box, by adding a class of .alert and along with contextual classes such as .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light or .alert-dark.
The following example demonstrates usage of above contextual classes −
Example
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Alerts</h2>
<div class = "alert alert-primary" role = "alert">
primary alert - Welcome to Tutorialspoint!!!
</div>
<div class = "alert alert-secondary" role = "alert">
secondary alert — Welcome to Tutorialspoint!!!
</div>
<div class = "alert alert-success" role = "alert">
success alert — Welcome to Tutorialspoint!!!
</div>
<div class = "alert alert-danger" role = "alert">
danger alert — Welcome to Tutorialspoint!!!
</div>
<div class = "alert alert-warning" role = "alert">
warning alert — Welcome to Tutorialspoint!!!
</div>
<div class = "alert alert-info" role = "alert">
info alert — Welcome to Tutorialspoint!!!
</div>
<div class = "alert alert-light" role = "alert">
light alert — Welcome to Tutorialspoint!!!
</div>
<div class = "alert alert-dark" role = "alert">
dark alert — Welcome to Tutorialspoint!!!
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>
It will produce the following result −
Output
Links in Alerts
To get links in alerts, use the .alert-link utility class in the <a> tag as shown in the below example −
Example
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Links in Alerts</h2>
<div class = "alert alert-primary" role = "alert">
primary alert - Welcome to
<a href = "https://www.tutorialspoint.com/" target = "_blank"
rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>
</div>
<div class = "alert alert-secondary" role = "alert">
secondary alert — Welcome to
<a href = "https://www.tutorialspoint.com/" target = "_blank"
rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>
</div>
<div class = "alert alert-success" role = "alert">
success alert — Welcome to
<a href = "https://www.tutorialspoint.com/" target = "_blank"
rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>
</div>
<div class = "alert alert-danger" role = "alert">
danger alert — Welcome to
<a href = "https://www.tutorialspoint.com/" target = "_blank"
rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>
</div>
<div class = "alert alert-warning" role = "alert">
warning alert — Welcome to
<a href = "https://www.tutorialspoint.com/" target = "_blank"
rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>
</div>
<div class = "alert alert-info" role = "alert">
info alert — Welcome to
<a href = "https://www.tutorialspoint.com/" target = "_blank"
rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>
</div>
<div class = "alert alert-light" role = "alert">
light alert — Welcome to
<a href = "https://www.tutorialspoint.com/" target = "_blank"
rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>
</div>
<div class = "alert alert-dark" role = "alert">
<div class = "alert alert-dark" role = "alert">
dark alert — Welcome to
<a href = "https://www.tutorialspoint.com/" target = "_blank"
rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>
It will produce the following result −
Output
Dismissal Alerts
To build a dismissal alert, use the .alert-dismissable class to alert container. Add the data-dismiss="alert" attribute on the button element to close a button, which automatically dismisses the alert message box.
The following example demonstrates dismissal of alert box −
Example
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Dismissal Alerts</h2>
<div class = "alert alert-success alert-dismissible">
<button type = "button" class = "close" data-dismiss = "alert">×</button>
<strong>Success!</strong> Welcome to Tutorialspoint!!!
</div>
<div class = "alert alert-primary alert-dismissible">
<button type = "button" class = "close" data-dismiss = "alert">×</button>
<strong>Primary!</strong> Welcome to Tutorialspoint!!!
</div>
<div class = "alert alert-secondary alert-dismissible">
<button type = "button" class = "close" data-dismiss = "alert">×</button>
<strong>Secondary!</strong> Welcome to Tutorialspoint!!!
</div>
<div class = "alert alert-danger alert-dismissible">
<button type = "button" class = "close" data-dismiss = "alert">×</button>
<strong>Danger!</strong> Welcome to Tutorialspoint!!!
</div>
<div class = "alert alert-warning alert-dismissible">
<button type = "button" class = "close" data-dismiss = "alert">×</button>
<strong>Warning!</strong> Welcome to Tutorialspoint!!!
</div>
<div class = "alert alert-info alert-dismissible">
<button type = "button" class = "close" data-dismiss = "alert">×</button>
<strong>Info!</strong> Welcome to Tutorialspoint!!!
</div>
<div class = "alert alert-light alert-dismissible">
<button type = "button" class = "close" data-dismiss = "alert">×</button>
<strong>Light!</strong> Welcome to Tutorialspoint!!!
</div>
<div class = "alert alert-dark alert-dismissible">
<button type = "button" class = "close" data-dismiss = "alert">×</button>
<strong>Dark!</strong> Welcome to Tutorialspoint!!!
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>
It will produce the following result −
Output
bootstrap4_components.htm
Advertisements