Home » Web programming » Bootstrap

How to use alert and well element in Bootstrap?

In this article, we are going to learn about some of the classes to use alert and well element in Bootstrap.
Submitted by Bharti Parmar, on November 25, 2018

Introduction:

In the previous article, we have discussed how to create a Responsive Image and Image shape? Now, in this article, we will discuss how to use .well and .alert element in bootstrap?

1) Well class

In bootstrap3 .well class is used to add a rounded border with grey background and padding around the element by default .well size is medium in size. .well class have some other classes from which we can change its size .well-sm and .well-lg class.

Note: .well class is not available in bootstrap4.

2) Alert

The .alert class is used to create a feedback message which is displayed after specific actions led by the users. Alert class is available for any length of the text. Here, is some other classes to create an alert message i.e. .alert-* contextual classes to specify the kind of alert.

There are four typeof .alertcontextual class are available in bootstrap 3 ( .alert-success, .alert-info, .alert-warning, .alert-danger); but, in bootstrap 4 eight contextual classes are available ( .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light, .alert-dark ).

3) Alert link

We can create a link inside the alert box using <a> tag to match link contextual class color with the text.

4) Dismiss class

To close the alert message we use .close class and .data-dismiss elements (when you click on this the alert box will disappear)to a link or a button element in Bootstrap3. In bootstrap4 .alert-dismissible class is used which adds some extra padding to the right of the alert and positions the .close button as well as an optional dismiss button. You can also use aria-label=”close” attribute when creating a dismiss link or button for people using screen readers.

Here, × is an HTML element which is used for close icons (x). To create animated alerts when dismissing them, add the .fade & .show classes in bootstrap 4 and.fade & .in class in bootstrap 3 for animated alerts ( Used for a fading effect when closing the alert message). When the user clicks the Close button, the alert disappears.

5) Alert heading

Alerts can also contain additional HTML elements headings, paragraphs and dividers.

Example: (Bootstrap3)

<!--------In Bootstrap 3 --------->
<div class="container">
	<!------- use of well element ------------>
	<div class="well">well</div>
	<div class="well well-sm">small size well </div>
	<div class="well well-lg">large size well </div>
</div>
<!------- use of alert element ------------>
<div class="container">
	<div class="alert alert-success">success alert</div>
	<div class="alert alert-danger">danger alert</div>
	<div class="alert alert-warning fade in">
		<a href="#" class="close"data-dismiss="alert" aria-label="close">&times;</a>
		warning alert with <b> .fade and .in </b> class
	</div>
	<div class="alert alert-info">info alert</div>
</div>

Output - Mobile View

Output - Tablet View

Output - Desktop View

Example: (Bootstrap4)

<div class="alert alert-success alert-dismissible" role="alert">
	success class with close .dismissible class
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span aria-hidden="true">&times;</span>
	</button>
</div>
<div class="alert alert-danger">danger alert</div>
<div class="alert alert-primary">primary alert</div>
<div class="alert alert-dark">dark alert
	<h4 class="alert-heading">here we use alert heading class</h4>
</div>
<div class="alert alert-secondary alert-dismissible fade show" role="alert">
	secondary alert class with .fade and .show class
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span aria-hidden="true">&times;</span>
	</button>
</div>
<div class="alert alert-light">
	<a href="#" class="alert alert-link">light alert with link</a> 
	is used and it show light grey color
</div>
<div class="alert alert-warning">warning alert</div>
<div class="alert alert-info">info alert</div>

Output - Mobile View

Output - Tablet View

Output - Desktop View

Conclusion:

In this article, we have learnt how to use .well, .alert and its different classes? I hope now you will understand the whole concept behind it.