Semantic-UI List Content Variations
Last Updated :
22 Apr, 2022
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.
HTML
<!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.
HTML
<!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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...