Semantic-UI Segment Vertical Segment Type Last Updated : 25 Mar, 2022 Summarize Comments Improve Suggest changes Share Like Article Like 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= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 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= "https://media.geeksforgeeks.org/wp-content/uploads/20220306132642/gfglogo-300x240.jpg"> </div> <div class="ui vertical segment"> <img alt="gfg" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220306124807/gfglogo.png"> </div> <div class="ui vertical segment"> <img alt="gfg" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220306131409/one2optimizedmin-300x184.png"> </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= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 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 Comment More infoAdvertise with us Next Article Semantic-UI Segment Text Alignment Variation Y yourcontactformsubmitted Follow Improve Article Tags : Web Technologies CSS Geeks Premier League Geeks-Premier-League-2022 Semantic-UI Semantic-UI Elements +1 More Similar Reads Semantic-UI Vertical Menu Type 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. The best part about this framework is that it creates beautiful and responsive layout 3 min read Semantic-UI Segment Text Alignment Variation 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 boots 2 min read Semantic-UI Segment Raised Type Semantic UI is an open-source CSS framework based on less and jQuery. It comes with its pre-built modules and elements which enables developers to develop responsive and beautiful websites in less time. In this article, we will be seeing the Semantic UI Segment Raised Type. A Segment is used to grou 3 min read Semantic-UI Segment Types 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 has a bunch of components for user interface design. One of them is the S 2 min read Semantic-UI Segment Piled Type 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 2 min read Semantic-UI Divider Vertical Type 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 Divider Vertical is used to divide the section into two equal halves vert 3 min read Like