Semantic-UI List Floated Content Variation Last Updated : 23 Mar, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report 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> Output: Right Floated Content Variation Reference: https://semantic-ui.com/elements/list.html#floated Comment More infoAdvertise with us Next Article Semantic-UI List Celled Variation S singh_teekam Follow Improve Article Tags : Web Technologies CSS Geeks Premier League Geeks-Premier-League-2022 Semantic-UI Semantic-UI Elements +1 More Similar Reads Semantic-UI Item Floated Content Variation Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. Semantic UI Item presents a large collection of similar types of data on a sit 2 min read Semantic-UI List Content Variations 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 differ 3 min read Semantic-UI Card Floated Content Variation 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 look more amazing and responsive. The semantic UI Card element displays site content in a manner similar 3 min read Semantic-UI List Celled Variation Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like boots 2 min read Semantic-UI List Inverted Variation 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 different v 3 min read Semantic-UI List Animated Variation 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 different v 3 min read Like