Bootstrap Alerts






<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]
-->



Bootstrap Alerts



❮ Previous
Next ❯


Alerts


Bootstrap provides an easy way to create predefined alert messages:




×
Success! This alert box indicates a successful or positive action.


×
Info! This alert box indicates a neutral informative change or action.


×
Warning! This alert box indicates a warning that might need attention.


×
Danger! This alert box indicates a dangerous or potentially negative action.


Alerts are created with the .alert class, followed by one of the
four contextual classes .alert-success, .alert-info, .alert-warning or
.alert-danger:



Example



<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

<div class="alert alert-info">
  <strong>Info!</strong> Indicates a neutral informative change or action.
</div>

<div class="alert alert-warning">
  <strong>Warning!</strong> Indicates a warning that might need attention.
</div>

<div class="alert alert-danger">
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>

Try it Yourself »





<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]
-->




Alert Links


Add the alert-link class to any links inside the alert box to create "matching colored links":



Success! You should read this message.


Info! You should read this message.


Warning! You should read this message.


Danger! You should read this message.


Example



<div class="alert alert-success">
  <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>

Try it Yourself »



Closing Alerts



×
Click on the "x" symbol to the right to close me.


To close the alert message, add a .alert-dismissible
class to the alert container. Then add class="close" and data-dismiss="alert"
to a link or a button element (when you click on this the alert box will
disappear).



Example



<div class="alert alert-success alert-dismissible">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

Try it Yourself »



The aria-* attribute and &times; explanation

To
help improve accessibility for people using screen readers, you should include
the aria-label="close" attribute, when creating a close button.

&times; (×) is an HTML entity that is the preferred icon for close
buttons, rather than the letter "x".
For a list of all HTML Entities, visit our HTML Entities Reference.




Animated Alerts



×
Click on the "x" symbol to the right to close me. I will "fade" out.


The .fade and .in classes adds a fading effect when
closing the alert message:



Example



<div class="alert alert-danger fade in">

Try it Yourself »


Test Yourself with Exercises!



Exercise 1 » 
Exercise 2 » 
Exercise 3 »



Complete Bootstrap Alert Reference


For a complete reference of all alert options, methods and events, go to our
Bootstrap JS Alert Reference.





❮ Previous
Next ❯

-

Popular posts from this blog

Colors HSL

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Colors HSL ❮ Previous Next ❯ HSL Calculator   rgb(255, 0, 0) #ff0000 H: S: L: HSL Colors HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+. HSL stands for hue, saturation, and lightness. HSL color values are specified with: hsl( hue , saturation , lightness ) . Hue Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue. Saturation Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness Lightness is also a percentage; 0% is black, 100% is white. function submitOnEnter(e) { keyboardKey = e.which || e.keyCode; if (keyboardKey == 13) { setFullColor(); } } function clickHue(hue) { var h = document.getElementById("hue01"); h.v...
Read more

Google Hardware Icons

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Google Hardware Icons ❮ Previous Next ❯ Hardware Icons Below is a list of all Google Hardware icons: Icon Description Example cast cast Try it cast_connected cast_connected Try it computer computer Try it desktop_mac desktop_mac Try it desktop_windows desktop_windows Try it developer_board developer_board Try it device_hub device_hub Try it devices_other devices_other Try it dock dock Try it gamepad gamepad Try it headset headset Try it headset_mic headset_mic Try it keyboard keyboard Try it keyboard_arrow_down keyboard_arrow_down Try it keyboard_arrow_left keyboard_arrow_left Try it keyboard_arrow_right keyboard_arrow_right Try it keyboard_arrow_up keyboard_arrow_up ...
Read more

SVG Filters

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> SVG Filters ❮ Previous Next ❯ SVG Filters SVG Filters are used to add special effects to SVG graphics. Browser Support The numbers in the table specify the first browser version that supports SVG filters.   SVG Filters 8.0 10.0 3.0 6.0 9.6 SVG Filter Elements In the next chapters, we will only demonstrate a touch of the filter effects that are possible - and give you an idea of what can be done with SVG. The available filter elements in SVG are: <feBlend> - filter for combining images <feColorMatrix> - filter for color transforms <feComponentTransfer> <feComposite> <feConvolveMatrix> <feDiffuseLighting> <feDisplacementMap> <feFlood> <feGaussianBlur> <feImage> <feMerge> <feMorphology> <feOffset> - filter for drop sh...
Read more