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.

Source Code

     <p>Below,<hr> tag is used for separator.</p>
<hr>
    
Try it now

Source Code: Output

The above source code result will be:

Below,


tag is used for separator.


UIkit Divider Icon

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

General Syntax

      <hr class="uk-divider-icon">
    
Try it now

Source Code

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

Source Code: Output

The above source code result will be:

Welcome to Tutorialsplane.com!


Vertical Divider

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">
    
Try it now

Source Code

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

Source Code: Output

The above source code result will be:

UIkit:Vertical Divider


Web Tutorials

UIkit Divider
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4