Semantic-UI List Floated Content Variation

Last Updated : 23 Mar, 2022

Semantic UI is the open-source framework that used CSS and jQuery to make our websites look beautiful and responsive. It has predefined classes like bootstrap for use to make our website more interactive. It has some pre-built semantic components and we can use these components to create a responsive website.

Semantic UI List is used to group related content. It is an easy way to show the list of items as they are needed for our website many times. List floated content Variation is used to float the element on the left or the right.

In this article, we will discuss Semantic UI List floated content variation.

Semantic-UI List Floated content variation classes:

left floated: This class is used to float the content on the left.
right floated: This class is used to float the content on the right.

Syntax:

<div class="ui List-Floated-Content-Variation-Class list">
      ...
</div>

Example 1: The following code demonstrates the Semantic-UI List left floated content variation.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <title> Semantic-UI List Floated Content Variation </title> 
  <link rel="stylesheet" 
        href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
</head> 
  
<body> 
    <div class="ui container center aligned"> 
        <h2 class="ui green header"> GeeksforGeeks </h2>   
        <h3> Semantic-UI List Floated Content Variation </h3> 
    </div> <br> 
  
    <div class="ui list"> 
        <div class="item"> 
          <img class="ui avatar image" 
               src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 
  
          <div class="left floated header"> 
            <a href="#" class="ui button"> 
              Left floated Button 
            </a> 
          </div> 
        </div> 
  
        <div class="item"> 
          <a href="#" class="ui button"> 
            Button 
          </a> 
          <a href="#" class="ui left floated button"> 
            Left floated Button 
          </a> 
        </div> 
   </div> 
</body> 
</html> 

Output:

Left Floated Content Variation

Example 2: The following code demonstrates the Semantic-UI List right floated content variation.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <title> Semantic-UI List Floated Content Variation </title> 
  <link rel="stylesheet" 
        href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
</head> 
  
<body> 
    <div class="ui container center aligned"> 
        <h2 class="ui green header"> GeeksforGeeks </h2>   
        <h3> Semantic-UI List Floated Content Variation </h3> 
    </div> <br> 
  
    <div class="ui right floated horizontal list"> 
        <a href="#" class="ui button">  
          GFG Right floated 1 
        </a> 
        <a href="#" class="ui button">  
          GFG Right floated 2 
        </a> 
        <a href="#" class="ui button">  
          GFG Right floated 3 
        </a> 
    </div> 
  
    <div class="ui horizontal list"> 
        <a class="item" href="#">  
          GFG Item 1  
        </a> 
        <a class="item" href="#">  
          GFG Item 2  
        </a> 
        <a class="item" href="#">  
          GFG Item 3 
         </a> 
        <a class="item" href="#">  
          GFG Item 4  
        </a> 
    </div> 
</body> 
</html> 