Semantic-UI Segment Compact 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, types, groups, and states.
In this article, we will learn about the Semantic-UI Segment Compact variation along with implementation using the example code.
Segments in Semantic-UI are used in the grouping of related content. In Semantic-UI Segment Compact variation, the segment takes space as much as needed wrt content. It doesn’t occupy extra space.
Semantic-UI Segment Compact Variation Class:
- compact: This class is used to make the segment take space as much as necessary wrt content
<div class="ui compact segment"> .... </div>
Example 1: We can observe segment takes space as much as it needs with respect to the content such that content is entirely packed in the segment.
Example 2: We can even use two segments in Semantic-UI Segment Compact variation which is illustrated in this example.
Please Login to comment...