Bootstrap | Alerts

Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this tutorial guide, we are going to be discussing about Bootstrap alerts.

Alerts provides a way to style messages to the user. They provide contextual feedback messages for typical user actions.

You can add an optional close icon to alert. For inline dismissal, make use of the Alerts jQuery plugin.

You can add a basic alert by simply making a wrapper <div> and adding a class of .alert and one of the four contextual classes (e.g. .alert-success, .alert-info, .alert-warning and .alert-danger).

Example

Following example demonstrates this -

<div class = "alert alert-success">Success! Well done its submitted.</div>
<div class = "alert alert-info">Info! take this info.</div>
<div class = "alert alert-warning">Warning ! Dont submit this.</div>
<div class = "alert alert-danger">Error ! Change few things.</div>

Output

When the above example is executed, it will produce the following result -

Success! Well done its submitted.
Info! take this info.
Warning ! Dont submit this.
Error ! Change few things.

READ: Bootstrap | Thumbnails

Dismissal Alerts

To create a dismissal alert -

• Add a basic alert by simply making a wrapper <div> and adding a class of .alert and one of the four contextual classes (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger).

• Also add optional .alert-dismissable class to the above <div> class.

• Finally add a close button.

Example

Following example demonstrates this -

<div class = "alert alert-success alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Success! Well done its submitted.
</div>

<div class = "alert alert-info alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Info! take this info.
</div>

<div class = "alert alert-warning alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Warning ! Dont submit this.
</div>

<div class = "alert alert-danger alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Error ! Change few things.
</div>

Output

When the above example is executed, it will produce the following result -

Success! Well done its submitted.
Info! take this info.
Warning ! Dont submit this.
Error ! Change few things.

READ: Bootstrap | Page Header

Links in Alerts

To get links in alerts -

• Add a basic alert by simply making a wrapper <div> and adding a class of .alert and one of the four contextual classes (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger).

• Use the .alert-link class to provide matching colored links within any alert.

Example

Following example demonstrates this -

<div class = "alert alert-success">
   <a href = "#" class = "alert-link">Success! Well done its submitted.</a>
</div>

<div class = "alert alert-info">
   <a href = "#" class = "alert-link">Info! take this info.</a>
</div>

<div class = "alert alert-warning">
   <a href = "#" class = "alert-link">Warning ! Dont submit this.</a>
</div>

<div class = "alert alert-danger">
   <a href = "#" class = "alert-link">Error ! Change few things.</a>
</div>

Output

When the above example is executed, it will produce the following result -

Success! Well done its submitted.
Info! take this info.
Warning ! Dont submit this.
Error ! Change few things.

READ: Bootstrap | Badges

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Progress Bars.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.