Skip to content
Related Articles
Open in App
Not now

Related Articles

Semantic-UI Segment Vertical Segment Type

Improve Article
Save Article
  • Last Updated : 25 Mar, 2022
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!