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.
<!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
Reference: https://semantic-ui.com/elements/segment.html#horizontal-segments