Semantic-UI List Item Content
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website looks more amazing. It uses a class to add CSS to the elements.
Semantic UI List Item Content is used to add the content to the item element.
Semantic UI List Item content class:
- item: This class is used to create items for list elements.
Syntax:
<div class="ui list">
<div class="item"> .... </div>
....
</div
Example 1: In this example, we are creating list items with the list content.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic UI List Item Content </title> <link rel="stylesheet" href= </head> <body> <div class="ui container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic UI List Item Content</h3> <div class="ui list"> <div class="=item">GeeksforGeeks</div> <div class="item">Data Structure</div> <div class="item">Algorithm</div> <div class="item">Interview Preparation</div> <div class="item">Competitive Programming</div> <div class="item">Machine Learning</div> <div class="item">Web Development</div> </div> </div> </body> </html> |
Output:
Example 2: In this example, we are creating horizontal list items with the list content.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic UI List Item Content </title> <link rel="stylesheet" href= </head> <body> <div class="ui container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic UI List Item Content</h3> <div class="ui horizontal list"> <div class="active item">GeeksforGeeks</div> <div class="item">Data Structure</div> <div class="item">Algorithm</div> <div class="item">Interview Preparation</div> <div class="item">Competitive Programming</div> <div class="item">Machine Learning</div> <div class="item">Web Development</div> </div> </div> </body> </html> |
Output:
Reference link: https://semantic-ui.com/elements/list.html#item
Please Login to comment...