1. Home
  2. Foundation reminder box

The best Foundation reminder box Tutorial In 2024, In this tutorial you can learn Fillet reminder box,Close reminder box,

Foundation reminder box

Foundation can be very simple to create an alert box:

You can use the reminder box .alert-box class created, you can add the optional categories: .secondary , .success , .info , .warning or .alert :

Examples

<Div data-alert class = " alert-box">
This is a default alert box.
</ Div>

<Div data-alert class = " alert-box secondary">
This is a secondary alert box.
</ Div>

<Div data-alert class = " alert-box success">
<Strong> Success! </ Strong > This alert box indicates a successful or positive action.
</ Div>

<Div data-alert class = " alert-box info">
<Strong> Info! </ Strong > This alert box indicates a neutral informative change or action.
</ Div>

<Div data-alert class = " alert-box warning">
<Strong> Warning! </ Strong > This alert box indicates a warning that might need attention.
</ Div>

<Div data-alert class = " alert-box alert">
<Strong> Alert! </ Strong > This alert box indicates a dangerous or potentially negative action.
</ Div>

Note Width reminder box 100% of the container.

Fillet reminder box

.radius and .round class is used to add rounded corners alert box:

Examples

<Div data-alert class = " alert-box success radius">
<Strong> Success! </ Strong > Alert box with a radius.
</ Div>

<Div data-alert class = " alert-box info round">
<Strong> Info! </ Strong > Alert box that is rounded.
</ Div>

Close reminder box

To close the alert box, you can add or button on the connection element class="close" category, and initialize Foundation JS:

Examples

<Div data-alert class = " alert-box">
This is a default alert box with closing functionality.
<A href = "#" class = "close"> & times; </ a>
</ Div>

<Script>
// Initialize Foundation JS For Functionality
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>

Note & Times; (×) is an HTML character entity represents a close button icon, not the letter "x".

Hot Tools

Other Tools

Online Tutorial

Website Navigation

Foundation reminder box
10/30