Semantic-UI Segment Padded Variation

Last Updated : 09 Mar, 2022

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 provides us with a very easy way to style the web app instead of using CSS. To create a grouping of content that is related, we use segments. It offers segments in different variations, type groups, and states.

In this article, we will learn about the Semantic-UI Segment Padded Variation along with implementation using the example code.

Segments in Semantic-UI are used in the grouping of related content. Semantic-UI Segment padded Variation enables us to add padding to the segment as much as needed.

Semantic-UI Segment Padded Variation Classes

padded : This class is used to add padding to the segment.
very padded: This class is used to add extra padding to the segment when compared to using .padded class.

Syntax:

<div class="ui Padded-Variation-Class segment">
  ......
</div>

Note: To add more padding to the segment we use .very padded class instead of .padded class.

Example 1: We can observe that the content is padded.

HTML

<html> 
<head> 
    <title>Semantic-UI Segment Padded Variation</title> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" /> 
     <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js" 
             integrity= 
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
             crossorigin="anonymous"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
        <center> 
            <div class="ui container"> 
            <h2 class="ui header green"> 
              Geeksforgeeks 
            </h2> 
            <strong> 
              Semantic-UI Segment Padded Variation 
            </strong> 
            <br><br>    
            <div class="ui padded segment">                 
                <p> 
                  As the placement season is back,  
                  GeeksforGeeks is here to help you crack 
                  the interview. 
                </p> 
                 
            </div>                
            </div> 
    </center> 
</body> 
</html>

Output :

Example 2: We can observe more padding in the segment than in the previous example. To achieve this, we use .very padded class.

HTML

<html> 
<head> 
    <title>Semantic-UI Segment Padded Variation</title> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" /> 
     <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js" 
             integrity= 
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
             crossorigin="anonymous"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
        <center> 
            <div class="ui container"> 
            <h2 class="ui header green"> 
              Geeksforgeeks 
            </h2> 
            <strong> 
              Semantic-UI Segment Padded Variation 
            </strong> 
            <br><br>    
            <div class="ui very padded segment">                 
                <p> 
                  As the placement season is back, 
                  GeeksforGeeks is here to help you crack 
                  the interview. 
                </p> 
                 
            </div>                
            </div> 
    </center> 
</body> 
</html> 