UIkit Alert Box

UIkit alert box component is used to create different types of alert messages such as success, warning, danger, error, etc. UIkit provides the followings types of alert boxes:primary, success, warning, danger.

How To Create UIkit Alert Box

To create a UIkit alert box, add the uk-alert attribute to the block element.

Example

This is an alert box.

General Syntax

      <div uk-alert>
  Alert box With Close Button
  <a class="uk-alert-close" uk-close></a>
</div>

Try it now

Source Code

     <div class="uk-container">
  <div uk-alert>This is an alert box.</div>
</div>
<!--/container-->

Try it now

Source Code : Output

The above source code result will be:

This is an alert box.

UIkit Alert Box With Close Button

To create UIkit alert box with close button, add the .uk-alert-close class and uk-close attribute to a <button> or <a> element inside the alert box having attribute uk-alert.

Example

This is an alert box with close button.

General Syntax

      <div uk-alert>
  <p>This is an alert box with close button.</p>
  <a class="uk-alert-close" uk-close></a>
</div>

Try it now

Source Code

     <div uk-alert>
  <p>This is an alert box with close button.</p>
  <a class="uk-alert-close" uk-close></a>
</div>

Try it now

Source Code : Output

The above source code result will be:

This is an alert box with close button.

UIkit Primary Alert Box

The primary alert box can be created by adding the .uk-alert-primary class and the uk-alert attribute to the alert container.

Example

Primary Alert Box

General Syntax

      <div class="uk-alert-primary" uk-alert>
  <a class="uk-alert-close" uk-close></a>
  <p>Primary Alert Box</p>
</div>

Try it now

Source Code

     <div class="uk-alert-primary" uk-alert>
  <a class="uk-alert-close" uk-close></a>
  <p>Primary Alert Box</p>
</div>

Try it now

Source Code : Output

The above source code result will be:

Primary Alert Box

UIkit Success Alert Box

The success alert box can be created by adding the .uk-alert-success class and the uk-alert attribute to the alert container.

Example

Success Alert Box.

General Syntax

      <div class="uk-alert-success" uk-alert>
  <a class="uk-alert-close" uk-close></a>
</div>

Try it now

Source Code

     <div class="uk-alert-success" uk-alert>
  <a class="uk-alert-close" uk-close></a>
  <p>Success Alert Box.</p>
</div>

Try it now

Source Code : Output

The above source code result will be:

Success Alert Box.

UIkit:Warning Alert Box

Uikit warning alert box can be created by adding the .uk-alert-success class and the uk-alert attribute to the alert container.

Example

Warning Alert Box.

General Syntax

      <div class="uk-alert-warning" uk-alert>
  <a class="uk-alert-close" uk-close></a>
</div>

Try it now

Source Code

     <div class="uk-alert-warning" uk-alert>
  <a class="uk-alert-close" uk-close></a>
  <p>Warning Alert Box.</p>
</div>

Try it now

Source Code : Output

The above source code result will be:

Warning Alert Box.

UIkit Danger Alert Box

UIkit danger alert box can be created by adding the .uk-alert-danger class and the uk-alert attribute to the alert container.

Example

UIkit Danger Alert Box

General Syntax

      <div class="uk-alert-danger" uk-alert>
  <a class="uk-alert-close" uk-close></a>
</div>

Try it now

Source Code

     <div class="uk-alert-danger" uk-alert>
  <a class="uk-alert-close" uk-close></a>
  <p>UIkit Danger Alert Box</p>
</div>

Try it now

Source Code : Output

The above source code result will be:

UIkit Danger Alert Box

UIkit Alert Box

How To Create UIkit Alert Box

Example

UIkit Alert Box With Close Button

Example

UIkit Primary Alert Box

Example

UIkit Success Alert Box

Example

UIkit:Warning Alert Box

Example

UIkit Danger Alert Box

Example

Web Tutorials