UIkit Divider

UIkit divider is basically, used to separate the content and having different styles.

Steps To Create UIkit Divider Component

To create UIkit separator, simply add <hr> tag. That has by default divider functionality and nice style.

General Syntax

      <h2>Welcome to Sudhakarinfotech.com!</h2>
<hr>

Source Code

     <h2>Below,<hr> tag is used for separator.</h2>
<hr>

Source Code : Output

The above source code result will be:

  Below, tag is used for separator.

To create divider icon,just add .uk-divider-icon class to a <hr> or <div> element.

General Syntax

      <hr class="uk-divider-icon">

Source Code

     <h2>Welcome to Tutorialsplane.com!</h2>
     <hr class="uk-divider-icon">

Source Code : Output

The above source code result will be:

UIkit vertical divider can be created by adding .uk-divider-vertical class to the <hr> or <div> element base class.

General Syntax

      <hr class="uk-divider-vertical">

Source Code

     <h2 class="uk-text-center">UIkit:Vertical Divider </h2>
<hr class="uk-divider-vertical">

Source Code : Output

The above source code result will be: