UIkit List

UIkit list component creates a nice looking list with different predefined styles.

Steps To Create UIkIT List Component

Add .uk-list class to the unordered i.e <ul> or ordered i.e <ol> element base class to create UIkit list component.

Example

  • PHP
  • JSON
  • Jquery

General Syntax

      <ul class="uk-list">
  <li>List Item</li>
</ul>
    
Try it now

Source Code

     <ul class="uk-list">
  <li>PHP</li>
  <li>JSON</li>
  <li>Jquery</li>
</ul>
    
Try it now

Source Code: Output

The above source code result will be:

  • PHP
  • JSON
  • Jquery

UIkit List Style Modifier

Followings are the predefined classes that are applied on the list to create different styles of lists. These predefined classes are:

  • .uk-list-disc- It uses a filled circle as a marker.
  • .uk-list-circle- It uses a hollow circle as a marker.
  • .uk-list-square - It uses a filled square as a marker.
  • .uk-list-decimal - It uses decimal numbers as markers. Beginning with 1.
  • .uk-list-hyphen - It uses .uk-list-hyphen Use a hyphen as marker.

General Syntax

      <ul class="uk-list uk-list-disc"></ul>
<ul class="uk-list uk-list-circle"></ul>
<ul class="uk-list uk-list-square"></ul>
<ul class="uk-list uk-list-decimal"></ul>
<ul class="uk-list uk-list-hyphen"></ul>
    
Try it now

Source Code

     <div class="uk-container">
  <ul class="uk-list uk-list-disc">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
</div>
    
Try it now

Source Code: Output

The above source code result will be:

  • List item 1
  • List item 2
  • List item 3

UIkit List Component Color modifiers

Add one of the following classes to set the marker color.

  • .uk-list-muted:Used to mute the marker.
  • .uk-list-emphasis:Used to emphasize the marker.
  • .uk-list-primary:Used to emphasize the marker with the primary color.
  • .uk-list-secondary:Used to emphasize the marker with the secondary color.

Example

Primary List

  • List item 1
  • List item 2
  • List item 3

General Syntax

      <ul class="uk-list uk-list-disc uk-list-primary">...</ul>
    
Try it now

Source Code

     <div class="uk-child-width-expand@s" uk-grid>
  <div>
    <h4>Muted</h4>
    <ul class="uk-list uk-list-disc uk-list-muted">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </div>
</div>
    
Try it now

Source Code: Output

The above source code result will be:

Muted

  • List item 1
  • List item 2
  • List item 3

UiKit Image Bullet Modifier

Add the .uk-list-bullet class to set a custom image bullet as a marker of a list item. Please keep in mind that, it can not be combined with color modifiers.

Example

  • List item 1
  • List item 2
  • List item 3

General Syntax

      <ul class="uk-list uk-list-bullet">...</ul>
    
Try it now

Source Code

     <ul class="uk-list uk-list-bullet">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>
    
Try it now

Source Code: Output

The above source code result will be:

  • List item 1
  • List item 2
  • List item 3

Divider Modifier

Add the .uk-list-divider class to separate list items with lines.

Example

  • List item 1
  • List item 2
  • List item 3

General Syntax

      <ul class="uk-list uk-list-divider"></ul>
    
Try it now

Source Code

     <ul class="uk-list uk-list-divider">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
    
Try it now

Source Code: Output

The above source code result will be:

  • List item 1
  • List item 2
  • List item 3

UIkit Striped Modifier

To create a striped modifier, add the .uk-list-striped class to the list container base class.

Example

  • List item 1
  • List item 2
  • List item 3

General Syntax

      <ul class="uk-list uk-list-striped">...</ul>
    
Try it now

Source Code

     <ul class="uk-list uk-list-striped">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>
    
Try it now

Source Code: Output

The above source code result will be:

  • List item 1
  • List item 2
  • List item 3

UIkit Size Modifier

To increase or decrease the space between list items add .uk-list-large and .uk-list-collapse correspondingly.

General Syntax

      <ul class="uk-list uk-list-large">...</ul>
    
Try it now

Source Code

     <div class="uk-child-width-expand@s" uk-grid>
  <div>
    <ul class="uk-list uk-list-large">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </div>
</div>
    
Try it now

Source Code: Output

The above source code result will be:

  • List item 1
  • List item 2
  • List item 3

Web Tutorials

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