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. It uses a class to add CSS to the elements.
Rails are used to present additional material to the viewer either to the left or right of the main viewport, they are typically used to display advertisements. Semantic UI maintains a default width of 300px for each rail. Let’s have a look at various rail classes before jumping into the rail types.
Semantic UI Rail Types:
- Rail: This class is used to create a standard rail. It can be represented on the left side or right side of a container.
- Dividing: A division between the rail and the main viewport is created by using this class.
- Internal: The rail is moved to the inner side of the main viewport by using this class.
Let’s have a look at the various rail types: Standard rail, dividing rail, and internal rail.
Syntax:
<div class="ui segment">
<div class="ui Rail-Type rail">
<div class="ui segment">
...
</div>
</div>
<div class="ui Rail-Type rail">
<div class="ui segment">
...
</div>
</div>
...
</div>Example 1: In the below example, we have created a standard rail using left rail and right rail classes.
<!DOCTYPE html><html>
<head>
<title>Semantic UI Rail Types</title>
<link href=
rel="stylesheet" />
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body style="width:100vw; height:100vh;">
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Rail Types</h4>
<hr>
<br/>
<div class="ui segment"
style="margin:auto; width:700px;">
<div class="ui left rail">
<div class="ui small segment">
This is a standard Semantic UI Rail.
</div>
</div>
<div class="ui right rail">
<div class="ui small segment">
This is a standard Semantic UI Rail.
</div>
</div>
<p>GeeksforGeeks is Amazing</p>
<p>GeeksforGeeks is Amazing</p>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Rail Types
Example 2: In the below example, we have created an internal rail using left internal rail and right internal rail classes.
<!DOCTYPE html><html>
<head>
<title>Semantic UI Rail Types</title>
<link href="
rel="stylesheet" />
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body style="width:100vw; height:100vh;">
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Rail Types</h4>
<hr>
<br/>
<div class="ui segment"
style="margin:auto; width:700px;">
<div class="ui left internal rail">
<div class="ui small segment">
This is an internal Semantic UI Rail.
</div>
</div>
<div class="ui right internal rail">
<div class="ui small segment">
This is an internal Semantic UI Rail.
</div>
</div>
<p>GeeksforGeeks is Amazing</p>
<p>GeeksforGeeks is Amazing</p>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Rail Types
Example 3: In the below example, we have created a diving rail using left dividing rail and right dividing rail classes.
<!DOCTYPE html><html>
<head>
<title>Semantic UI Rail Types</title>
<link href=
rel="stylesheet" />
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body style="width:100vw; height:100vh;">
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Rail Types</h4>
<hr>
<br/>
<div class="ui segment"
style="margin:auto; width:700px;">
<div class="ui left dividing rail">
<div class="ui small segment">
This is a dividing Semantic UI Rail.
</div>
</div>
<div class="ui right dividing rail">
<div class="ui small segment">
This is a dividing Semantic UI Rail.
</div>
</div>
<p>GeeksforGeeks is Amazing</p>
<p>GeeksforGeeks is Amazing</p>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Rail Types
Reference: https://semantic-ui.com/elements/rail.html