Semantic-UI Nested Segments Group

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 Nested Segments Group is used to group the segment inside another group of segments.

Semantic-UI Segment Nested Segment Group classes:

segment: This class is used to define a segment of similar content.
horizontal: This class is used to align the element in the horizontal direction.

Syntax:

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

Example 1: Below is the code that demonstrates the use of Semantic-UI Segment Nested Segment Group.

HTML

<html> 

<head> 

    <title>Semantic-UI Nested Segment Group</title> 

    <link href= 

"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 

          rel="stylesheet" /> 

</head> 

<body style="margin-inline: 500px;"> 

    <center> 

        <h1 class="ui header green"> 

            Geeksforgeeks 

        </h1> 

        <h3> 

            Semantic-UI Nested Segment Group 

        </h3> 

    </center> 

    <div class="ui segments"> 

        <div class="ui segment"> 

            <p>First</p> 

        </div> 

        <div class="ui segment"> 

            <p>Second</p> 

        </div> 

        <div class="ui horizontal segments"> 

            <div class="ui segment"> 

                <p>Horizontal-Nested First</p> 

            </div> 

            <div class="ui segment"> 

                <p>Horizontal-Nested Second</p> 

            </div> 

            <div class="ui segment"> 

                <p>Horizontal-Nested Third</p> 

            </div> 

        </div> 

        <div class="ui segment"> 

            <p>Third</p> 

        </div> 

        <div class="ui segments"> 

            <div class="ui segment"> 

                <p>Nested First</p> 

            </div> 

            <div class="ui segment"> 

                <p>Nested Second</p> 

            </div> 

            <div class="ui segment"> 

                <p>Nested Third</p> 

            </div> 

        </div> 

    </div> 

</body> 

</html>

Output:

Semantic-UI Nested Segments Group

Example 2: Below is another code that demonstrates the use of Semantic-UI Segment Nested Segment Group.

HTML

<html> 

<head> 

    <title>Semantic-UI Nested Segment Group</title> 

    <link href= 

"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 

          rel="stylesheet" /> 

</head> 

<body style="margin-inline: 500px;"> 

    <center> 

        <h1 class="ui header green"> 

            Geeksforgeeks 

        </h1> 

        <h3> 

            Semantic-UI Nested Segment Group 

        </h3> 

    </center> 

    <div class="ui segments"> 

        <div class="ui segment"> 

            <p>1</p> 

        </div> 

        <div class="ui segment"> 

            <p>2</p> 

        </div> 

        <div class="ui horizontal segments"> 

            <div class="ui segment"> 

                <p>Horizontal-Nested 1</p> 

            </div> 

            <div class="ui segment"> 

                <p>Horizontal-Nested 2</p> 

            </div> 

            <div class="ui segment"> 

                <p>Horizontal-Nested 3</p> 

            </div> 

        </div> 

        <div class="ui segment"> 

            <p>3</p> 

        </div> 

        <div class="ui segments"> 

            <div class="ui segment"> 

                <p>Nested 1</p> 

            </div> 

            <div class="ui segment"> 

                <p>Nested 2</p> 

            </div> 

            <div class="ui segments"> 

                <div class="ui segment"> 

                    <p>2-Nested 1</p> 

                </div> 

                <div class="ui segment"> 

                    <p>2-Nested 2</p> 

                </div> 

                <div class="ui segment"> 

                    <p>2-Nested 3</p> 

                </div> 

            </div> 

            <div class="ui segment"> 

                <p>Nested 3</p> 

            </div> 

        </div> 

    </div> 

</body> 

</html>