Semantic-UI Segment Padded Variation
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.
<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.
Example 2: We can observe more padding in the segment than in the previous example. To achieve this, we use .very padded class.
Please Login to comment...