Semantic-UI Segment Floated 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 Floated Variation along with implementation using the example code.
Segments in Semantic-UI are used in the grouping of related content. Semantic-UI Segment Floated Variation is used to make the segment display to the left or right of other content.
Semantic-UI Segment Floated Variation Classes:
- right floated: This class is used to float the segment to the right.
- left floated: This class is used to float the segment to the left.
Syntax:
<div class="ui Floated-Variation-Class segment"> .... </div>
Example 1: In this example, we observe that the segment is displayed to the left to the rest of the content. The segment is floated to left.
HTML
< html > < head > < title >Semantic-UI Segment Floated 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" > w3wiki </ h2 > < strong > Semantic-UI Segment Floated Variation </ strong >< br >< br > < div class = "ui left floated segment" > < p > As the placement season is back, w3wiki is here to help you crack the interview. </ p > </ div > < p > we observe that the segment is displayed to the left to the rest of the content </ p > </ div > </ center > </ body > </ html > |
Output:
Example 2: In this example, we observe that the segment is displayed to the right to the rest of the content. The segment is floated to right.
HTML
< html > < head > < title >Semantic-UI Segment Floated 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" > w3wiki </ h2 > < strong > Semantic-UI Segment Floated Variation </ strong >< br >< br > < div class = "ui right floated segment" > < p > Semantic-UI Segment Floated Variation </ p > </ div > < p > we observe that the segment is displayed to the right to the rest of the content </ p > </ div > </ center > </ body > </ html > |
Output:
Reference link : https://semantic-ui.com/elements/segment.html#floated
Contact Us