Semantic-UI Item Floated Content Variation

Last Updated : 13 Feb, 2022

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 site. The Item can contain an image, heading, description, buttons, date, etc. Item is the collection of items in Semantic UI.

Semantic UI Item Floated Content Variation is used to float any content inside the content container of the item left or right, using the floated class.

Semantic UI Item Floated Content Variation Classes:

left floated: This means that the content inside the Item will be floated in the left direction of the content.
right floated: This means that the content inside the Item will be floated in the right direction of the content.

Syntax: Add the left or right floated class to the content you want to change the float direction as follows:

<div class="ui items">
    <div class="item">
        ...
        <div class="content">
            ...
            <div class="ui right floated button"> ... </div>
        </div>
    </div>
</div>

Example: The below example illustrate the Semantic UI item floated variation. In this example, we have a button which we can left float or right float just by toggling the left floated and right floated class.

HTML

<!DOCTYPE html> 
<html> 
  <head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet"
    /> 
    <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> 
        <h1 class="ui header green">GeeksforGeeks</h1> 
        <strong>Semantic UI Item Floated Content Variation</strong> 
      </center> 
    </div> 
    <div class="ui items"> 
      <div class="item"> 
        <div class="ui small image"> 
          <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220204210810/avatar-200x200.png"
          /> 
        </div> 
        <div class="middle aligned content"> 
          <div class="header"> 
              Welcome to GeeksforGeeks 
           </div> 
          <div class="description"> 
             A computer science portal for geeks</div> 
          <div class="extra"> 
            <button class="ui mini left floated button" 
                   onclick="toggleFloat()"> 
              Change Float direction 
            </button> 
          </div> 
        </div> 
      </div> 
    </div> 
    <script> 
      function toggleFloat() { 
        $("button").toggleClass("left floated") 
          .toggleClass("right floated"); 
      } 
    </script> 
  </body> 
</html> 