Open In App

Semantic-UI Horizontal Segments Group

Improve
Improve
Like Article
Like
Save
Share
Report

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 Segment is a segment is a container used to place contents of the same type or same category. It is used to group related items.

Semantic UI Horizontal Segments Group is the group of segments that appear horizontally. We can place the segments horizontally in one line.

Semantic UI Horizontal Segments Group Classes:

  • horizontal segments: The container with this class can contain several segments that will appear horizontally.

Syntax: Create a container with horizontal segments class and place segments inside it as follows:

<div class="ui horizontal segments">
    <div class="ui segment">
    </div>
    ...
</div>

Example: In the following example, we have three segments that are horizontally grouped and display related content.

HTML




<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <link href=
          rel="stylesheet"/>
    <script src=
    </script>
    <script src=
    </script>
    <style>
      .icon {
        margin: 16px;
      }
    </style>
  </head>
  
  <body>
    <div class="ui container">
      <center>
        <div class="ui header green">
          <h1>
            GeeksforGeeks
          </h1>
        </div>
        <strong>
          Semantic UI Horizontal Segments Group
        </strong>
      </center>
      <div class="ui horizontal segments">
        <div class="ui segment">
          <h3>Data Structures</h3>
          <ul class="ui bulleted list">
            <li class="item">Stack</li>
            <li class="item">Heap</li>
            <li class="item">Array</li>
          </ul>
        </div>
        <div class="ui segment">
          <h3>Algorithms</h3>
          <ul class="ui bulleted list">
            <li class="item">Searching</li>
            <li class="item">Sorting</li>
            <li class="item">Graph</li>
          </ul>
        </div>
        <div class="ui segment">
          <h3>Programming Languages</h3>
          <ul class="ui bulleted list">
            <li class="item">Java</li>
            <li class="item">C++</li>
            <li class="item">Python</li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>


Output

Semantic-UI Horizontal Segments Group

Semantic-UI Horizontal Segments Group

Reference: https://semantic-ui.com/elements/segment.html#horizontal-segments



Last Updated : 11 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads