Tutorialsplane

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-

Example:

  • Item 1
  • Item 2
  • Item 3

Try it »

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.

Example:

  • Item 1
  • Item 2
  • Item 3

Try it »

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.

Example:

  • Item 1
  • Item 2
  • Item 3

Try it »

Striped Modifier

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

Example:

  • Item 1
  • Item 2
  • Item 3

Try it »

Large Modifier

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

Example:

  • Item 1
  • Item 2
  • Item 3

Try it »

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

Uikit Tutorial

Component