Tutorialsplane

UIkit Divider


UIkit Divider– Dividers are basically used to separate content. UIkit provides default separator as <hr> tag with beautiful style. Here in this tutorial, we are going to explain how you can use divider in UIkit.


UIkit Divider Component | Class | Example

Use <hr> tag to add separator between the contents. <hr> tag comes with default divider functionality. –

Example:

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

Try it »

Output of above example-

Add Divider Icon

Add class uk-divider-icon to hr tag for adding the icon in divider.

Example:

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

Try it »

Output of above example-

Small Divider

Add class uk-divider-small to create small divider.

Example:

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

Try it »

Output of above example-

Uikit Tutorial

Component