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 provides us with different variations of the list, like Horizontal, Inverted, Selection, Animated, Relaxed, Divided, Celled, and Size variants. Here we will learn about Semantic-UI List Content Variations that are used to display the alignment and float of the content.
Semantic-UI List Content Variations:
- Vertically Aligned: It is used to set the vertical alignment of the list element.
- Floated: It is used to set the float of the list element.
Semantic-UI List Vertically Aligned Content Variations Used Classes:
- top aligned: This class is used to display the top alignment of the list element.
- middle aligned: This class is used to display the middle alignment of the list element.
- bottom aligned: This class is used to display the bottom alignment of the list element.
Semantic-UI List Floated Content Variations Used Classes:
- left floated: This class is used to set the left float of the list element.
- right floated: This class is used to set the right float of the list element.
Syntax:
// Syntax for Vertically Aligned Content Variation <div class="top aligned content"> Top Aligned </div> // Syntax for Floated Content Variation div class="right floated content"> Right floated content </div>
Example 1: In this example, we will describe the use of List Vertically Aligned Content Variation.
<!DOCTYPE html> < html >
< head >
< title >
Semantic-UI List Vertically Aligned Content Variation
</ title >
< link rel = "stylesheet" href =
</ head >
< body >
< div class = "ui container" >
< h2 style = "color:green" >
GeeksforGeeks
</ h2 >
< h3 >Semantic-UI List Vertically Aligned Content Variation</ h3 >
< div class = "ui list" >
< div class = "item" >
< img class = "ui avatar image" src =
< div class = "top aligned content" >
GeeksforGeeks
</ div >
</ div >
< div class = "item" >
< img class = "ui avatar image" src =
< div class = "middle aligned content" >
Data Structure
</ div >
</ div >
< div class = "item" >
< img class = "ui avatar image" src =
< div class = "bottom aligned content" >
Algorithm
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: In this example, we will describe the use of List Floated Content Variation.
<!DOCTYPE html> < html >
< head >
< title >
Semantic-UI List Floated Content Variation
</ title >
< link rel = "stylesheet" href =
</ head >
< body >
< div class = "ui container center aligned" >
< h2 style = "color:green" >
GeeksforGeeks
</ h2 >
< h3 >Semantic-UI List Floated Content Variation</ h3 >
</ div >
< div class = "ui container list" >
< div class = "item" >
< img class = "ui avatar image"
src =
< a class = "right floated content" >
GeeksforGeeks
</ a >
</ div >
< div class = "item" >
< img class = "ui avatar image"
src =
< a class = "right floated content" >
Data Structure
</ a >
</ div >
< div class = "item" >
< img class = "ui avatar image"
src =
< a class = "right floated content" >
Algorithm
</ a >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://semantic-ui.com/elements/list.html