Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Bootstrap Simple Alert Bootstrap Alert with Close Button Propeller Alert Propeller Alert with Action Propeller Alerts with basic notification types Configuration Options Events

Bootstrap Simple Alert

Bootstrap provides an easy way to create predefined alert messages. Alerts are created with the .alert class, followed by one of the four contextual classes .alert-success, .alert-info, .alert-warning or .alert-danger. Use .alert-link utility to quickly provide matching colored links within any alert.

code

Bootstrap Alert with Close Button

Bootstrap Alerts are available with an optional close button. Add .alert-dismissible class to parent div and .close class to a link or a button element.

code 

							

							

								

							

							

								

							

						

						 
					
 
					
					
					

						
 
							

								
 
									
									
									
									
									
								

							

						

					
 
					
				
 
			

		
 

		
		

			
			
			

				

					
Propeller Alert

				

                
Unlike other Propeller components Alert component is independent of Bootstrap HTML structure.

                
In Marterial Design language alert is known as Snackbar and Toast.

				
To specify the position of alert component use data-positionX (x-axis positioning with left, right, and center as values.) and data-positionY (y-axis positioning with top and bottom as values.) attributes. To customize the visibility time of alert on screen use data-duration attribute with a numeric value.

			
 
			
			
 
				
				
				

					
					
					
 
						code 
					
 
					
					
					

						

							

							
						

						

							

								

							

							

								

							

							

								

							

						

					
 
					
					
					

						
 
							

								
 
									
									
									
									
									
									
								

							

							
Alert Top

						

						
 
							

								
 
									
									
									
									
									
									
								

							

							
Alert Bottom

						

					
 
					
				
 
			

		
 
		
		
		

			
			
			

				

					
Propeller Alert with Action

				

				
This type of Alert comes with an action which is to be performed on the alert message. Along with Propeller Alert HTML use additional attributes - data-action (with true and false value) and data-action-text (with user defined value).

			
 
			
			
 
				
				
				

					
					
					
 
						code 
					
 
					
					
					

						

							

							
						

						

							

								

							

							

								

							

							

								

							

						

					
 
					
					
					

						
 
							

								
 
									
									
									
									
									
									
								

							

							
Alert Top

						

						
 
							

								
 
									
									
									
									
									
									
								

							

							
Alert Bottom

						

					
 
					
				
 
			

		
 
		
		
		

			
			
			

				

					
Propeller Alerts with basic notification types

				

                
These are simple Propeller Alerts with an aditioinal attribute - data-type with predefined four  values - alert-success, alert-info, alert-warning or alert-danger.
                

			
 
			
			
 
				
				
				

					
					
					
 
						code 
					
 
					
					
					

						

							

							
						

						

							

								

							

							

								

							

							

								

							

						

					
 
					
					
					

						
 
							

								
 
									
									
									
									
									
									
									
									
								

							

						

					
 
					
				
 
			

		
 
		
				
		

			

				

					
Configuration Options

				

				
The Propeller CSS classes apply various predefined visual enhancements to the Alert. The table lists the available classes and their effects.

			

			

				

					
 
						
						

							
								

									HTML Attributes
									Effect
									Value
								

							
							
								

									data-positionX
									Defines the position of Alert horizontally.
									left, right, center
								

								

									data-positionY
									Defines the position of Alert vertically.
									top, bottom
								

								

									data-type
									Defines the type of Data in the alert box.
									information, warning, success, error
								

								

									data-effect
									Defines the type of animation while showing the alert.
									fadeInUp, fadeInDown
								

								

									data-action
									Required when your alert demands user to perform some action.
									true, false
								

								

									data-action-text
									Defines the action that needs to be performed.
									Close, Refresh, Ok, etc.
								

								

									data-duration
									Customize the visibility time of alert on the screen.
									Numeric value
								

							
						

						 
					

				

			

		
  		
		
		
		

			

				

					
jQuery plugin

				

				
Call the jQuery plugin to initialize the Alert while fetching the data dynamically.

			

			

				

					

				

			

		
 
		
				
		

			

				

					
Bootstrap Events

				

				
Bootstrap's alert plugin exposes a few events for hooking into alert functionality. See here for more documentation on this.

			

			
 
				
				

					

						

							
								

									Event Type
									Description
								

							
							
								

									close.bs.alert
									This event fires immediately when the close instance method is called.
								

								

									closed.bs.alert
									This event is fired when the alert has been closed (will wait for CSS transitions to complete).