Semantic-UI Segment Floated Variation

Last Updated : 15 Mar, 2023

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 provides us with a very easy way to style the web app instead of using CSS. To create a grouping of content that is related, we use segments. It offers segments in different variations, type groups, and states.

In this article, we will learn about the Semantic-UI Segment Floated Variation along with implementation using the example code.

Segments in Semantic-UI are used in the grouping of related content. Semantic-UI Segment Floated Variation is used to make the segment display to the left or right of other content.

Semantic-UI Segment Floated Variation Classes:

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

Syntax:

<div class="ui Floated-Variation-Class segment">
  ....
</div>

Example 1: In this example, we observe that the segment is displayed to the left to the rest of the content. The segment is floated to left.

HTML

<html>
 
<head>
    <title>Semantic-UI Segment Floated Variation</title>
 
    <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"
             integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
             crossorigin="anonymous">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
 
<body>
  <center>
    <div class="ui container">
      <h2 class="ui header green">
        Geeksforgeeks
      </h2>
 
      <strong>
        Semantic-UI Segment Floated Variation
      </strong><br><br>  
 
      <div class="ui left floated segment">
        <p>
          As the placement season is back, GeeksforGeeks is 
          here to help you crack the interview.
        </p>
 
      </div> 
 
      <p> 
        we observe that the segment is displayed to
        the left to the rest of the content
      </p>
                
    </div>
  </center>
</body>
 
</html>

Output:

Semantic-UI Segment Floated Variation

Example 2: In this example, we observe that the segment is displayed to the right to the rest of the content. The segment is floated to right.

HTML

<html>
   
<head>
    <title>Semantic-UI Segment Floated Variation</title>
    <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"
             integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
             crossorigin="anonymous">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
 
<body>
  <center>
    <div class="ui container">
      <h2 class="ui header green">
        Geeksforgeeks
      </h2>
 
      <strong>
        Semantic-UI Segment Floated Variation
      </strong><br><br> 
 
      <div class="ui right floated segment">
          <p>
            Semantic-UI Segment Floated Variation
          </p>
 
      </div> 
 
      <p> 
        we observe that the segment is displayed to
        the right to the rest of the content
      </p>
                
    </div>
  </center>
</body>
</html>