Open In App

Semantic-UI Segment Vertical Segment Type

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap.

A Segment is used to group similar content which makes the user experience better and helps users to navigate through your content efficiently. A vertical segment is used to format the content to be aligned as part of a vertical group.

Semantic-UI Segment Vertical Segment Type classes:

  • vertical: This class is used to align content as a part of the vertical group.

Syntax:

<div class="ui vertical segment">
    ...
</div>

Example 1: Below is the code that demonstrates the use of Segment Vertical Segment Type using images tag.

HTML




<html>
  
<head>
    <title>Semantic-UI Segment Vertical Segment Type</title>
  
    <link href=
          rel="stylesheet" />
</head>
  
<body>
    <center>
        <h1 class="ui header green">
            Geeksforgeeks
        </h1>
  
        <h3>
            Semantic-UI Segment Vertical Segment Type
        </h3>
  
        <div class="ui vertical segment">
            <img alt="gfg" src=
        </div>
  
        <div class="ui vertical segment">
            <img alt="gfg" src=
        </div>
  
        <div class="ui vertical segment">
            <img alt="gfg" src=
        </div>
    </center>
</body>
  
</html>


Output:

Semantic-UI Segment Vertical Segment Type

Example 2: Below is the code that demonstrates the use of Segment Vertical Segment Type using paragraph tag.

HTML




<html>
  
<head>
    <title>Semantic-UI Segment Vertical Segment Type</title>
  
    <link href=
          rel="stylesheet" />
</head>
  
<body>
    <center>
        <h1 class="ui header green">
            Geeksforgeeks
        </h1>
  
        <h3>
            Semantic-UI Segment Vertical Segment Type
        </h3>
  
        <div class="ui vertical segment">
            <p>Geeksforgeeks</p>
        </div>
  
        <div class="ui vertical segment">
            <p>It is a Computer Science portal.</p>
        </div>
  
        <div class="ui vertical segment">
            <p>It consists of various Interview preparation courses.</p>
        </div>
    </center>
</body>
  
</html>


Output:

Semantic-UI Segment Vertical Segment Type

Reference link: https://semantic-ui.com/elements/segment.html#vertical-segment



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