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
Last Updated :
23 Feb, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...