Alert components

When a user takes an action on a web page, such as updating their phone number on their user profile, it's always nice to let them know if the update was successful or not. Sometimes these user feedback messages are referred to as "flash messages" (because they often only appear for a few moments, and then fade away so as to not clutter the screen). Bootstrap calls them "alerts", and they are created by adding the predefined alert classes and a role attribute to a div element.

For the most part, their coloring and naming scheme is fairly consistent with the button components. Here are the alerts that are available:

  • <div class="alert alert-primary" role="alert">This is a primary alert</div>
  • <div class="alert alert-secondary" role="alert">This is a secondary alert</div>
  • <div class="alert alert-success" role="alert">This is a success alert</div>
  • <div class="alert alert-danger" role="alert">This is a danger alert</div>
  • <div class="alert alert-warning" role="alert">This is a warning alert</div>
  • <div class="alert alert-info" role="alert">This is a info alert</div>
  • <div class="alert alert-light" role="alert">This is a light alert</div>
  • <div class="alert alert-dark" role="alert">This is a dark alert</div>

Not only do Bootstrap's alerts look pretty, but they are quite neat. You can embed links in them (since it's just HTML, after all), and even insert an optional dismiss button. The alert component is a good example of why Bootstrap depends on the jQuery library, since it's required for the dismissal of the alert component.

Alerts are worth the time to learn so that you can utilize them in your applications. Here is the link to Bootstrap's documentation on its alert components: https://getbootstrap.com/docs/4.0/components/alerts/.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.191.234.150