Alerts / notifications

Step 1 - alerts

Alerts are feedback messages which are displayed after specific actions proceeded by the user.

With the right use of colors, they add some emotional weight to our notifications, ranging from a simple warning to a critical system failure or from a successful operation to a neutral information message.

Click on the buttons below to see examples.

The simplest way to create an alert is to place an onclick method within a given element (for example, a button).

<a class="btn btn-info" onclick="toastr.info('Hi! I am info message.');">Info message</a>

    

Step 2 - alerts usage via jquery

We'll now use a more advanced method. We'll write a simple jquery function which refers to the ID of an accordion's cards. Then we'll set custom options for the alerts.

In the scripts section, below the scripts of the charts, open a new <script>tags and place the following code:

$(function () {
  $('#folder-1').click(function () {


  });

});

    

As you can see, we can write a jquery function that refers to the id="folder-1" that is the heading of the first card of our accordion.

Now we'll call the alert function:

$(function () {
  $('#folder-1').click(function () {
      toastr.error("Folder 1 has been clicked!", "Folder 1", {
          "positionClass": "toast-top-right",
      });
  });
});

    

Save the file and click on the first folder of the accordion. You will see a red alert notification in the top right corner of the window.

You can easily change the position of the alert by modifying the value of the positionClass variable.

Available options are:

1. toast-top-right

2. toast-bottom-right

3. toast-top-left

4. toast-bottom-left

There are plenty of other options available for alerts. To learn more about them have a look at our alert creator.

Step 3 - final adjustments

To finish the work with the alerts we need to write another two functions for each accordion folder.

Add this code to the alert function:

$(function () {
  $('#folder-1').click(function () {
      toastr.error("Folder 1 has been clicked!", "Folder 1", {
          "positionClass": "toast-top-right",
      });
  });
  $('#folder-2').click(function () {
      // make it not dissappear
      toastr.info("Folder 2 has been clicked!", "Folder 2", );
  });
  $('#folder-3').click(function () {
      // make it not dissappear
      toastr.info("Folder 3 has been clicked!", "Folder 3", );
  });
});

    

After saving the file and refreshing the browser you will notice that each click on any accordion folder triggers an alert.

Step 4 - changing the color of the breadcrumbs

One very small fix at the end - we'll set a white color to the breadcrumbs to make it more visible.

Add .white-text to the .breadcrumb-dn component.

      <!-- Breadcrumb-->
      <div class="breadcrumb-dn mr-auto white-text">
        <p>Material Design for Bootstrap</p>
      </div>

    

Your first admin dashboard is ready. Congratulations!