Semantic-UI Dropdown Floated Content Last Updated : 29 Mar, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report Semantic UI is an open-source framework that has some predefined classes to make our website look beautiful and responsive. It is similar to bootstrap as it has pre-defined classes for use. It used CSS and jQuery to build the interface. It has some different types of elements that help us to create a beautiful website. Semantic-UI Dropdown is used to choose the value from the given options. The Floated Content is used to float the content to the left or right. In this article, we will discuss Dropdown Floated Content in Semantic-UI. Semantic-UI Dropdown Floated Content Class: right floated: This class is used to float the content on the right.left floated: This class can be used to float the content to the left side.Syntax: <div class="ui fluid selection dropdown"> <i class="dropdown icon"></i> <span class="default text"> ... </span> <div class="menu"> <div class="item"> <i class="attention right floated icon"></i> ... </div> ... </div> </div>Example: The following example demonstrates the Semantic-UI Dropdown Floated Content. HTML <!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container center aligned"> <h2 class="ui green header"> GeeksforGeeks </h2> <h3> Semantic-UI Dropdown Floated Content </h3> <div class="ui fluid selection dropdown"> <i class="dropdown icon"></i> <span class="default text"> Choose any option </span> <div class="menu"> <div class="item"> <i class="book right floated icon"></i> Item 1 </div> <div class="item"> <i class="add right floated icon"></i> Item 2 </div> <div class="item"> <i class="phone right floated icon"></i> Item 3 </div> </div> </div> </div> <script> $('.ui.dropdown').dropdown(); </script> </body> </html> Output: Semantic-UI Dropdown Floated Content Reference: https://semantic-ui.com/modules/dropdown.html#floated-content Comment More infoAdvertise with us Next Article Semantic-UI Form Dropdown Content H harendra4373 Follow Improve Article Tags : Web Technologies CSS Semantic-UI Semantic-UI Modules Similar Reads Semantic-UI Dropdown Label 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 look more amazing. Semantic UI dropdown allows a user to select a value from a series of options. Semant 2 min read Semantic-UI Form Dropdown Content Semantic UI is an 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 2 min read Semantic-UI Dropdown Image 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 look more amazing. A Semantic UI dropdown allows a user to select a value from a series of options. Sema 2 min read Semantic-UI Dropdown Content Semantic UI is an 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 6 min read Semantic-UI Dropdown Header 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 look more amazing. Semantic UI has a bunch of components for user interface design. One of them is “Drop 3 min read Semantic-UI Dropdown Icon 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 look more amazing. Semantic UI dropdown allows a user to select a value from a series of options. Semant 2 min read Like