UIkit List

UIkit List– Class uk-list is used to create the beautiful list in Uikit framework. Add class uk-list to create basic list with simple style. Here in this tutorial, we are going to explain how you can create lists in UIkit css framework.

UIkit List Example

Let us create very first simple list-

<ul class="uk-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

If you run the above example it will produce output something like this-

Bullet Modifier

To create bullet list items add class uk-list-bullet. Here is an example.

<ul class="uk-list uk-list-bullet">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

If you run the above example it will produce the output something like this-

Divider Modifier

Add class uk-list-divider to create separator between list items.

<ul class="uk-list uk-list-divider">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

Striped Modifier

Add class uk-list-striped to create striped modifiers.

<ul class="uk-list uk-list-striped">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

Large Modifier

Add class uk-list-large to increase the gaps between the list items.

<ul class="uk-list uk-list-large">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

If you run the above example it will produce output something like this-

Add Comment

📖 Read More

• 1. UIkit Pagination
• 2. UIkit Progress Bar
• 3. UIkit Spinner
• 4. UIkit Divider
• 5. UIkit Totop scroll

• 6. UIkit Tile
• 7. UIkit Notification
• 8. UIkit Tab