Semantic-UI | Rail
Last Updated :
08 Apr, 2022
Semantic UI open-source framework provides Rail which helps in showing content outside the boundaries of the main view of the website. It is mostly on the left and right side when your website’s main view is in the center. It is very similar to bootstrap usage and has great different elements to use to make your website look more amazing.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 100px"
class="ui container">
<h2>Rail</h2>
<br>
<div class="ui grid container">
<div class="ui four wide column">
</div>
<div class="ui segment eight wide column">
<div class="ui left rail">
<div class="ui segment">
Left Rail
<ul>
<strong>Menu</strong>
<li>Data Structure</li>
<li>Web Programming</li>
<li>C++ Programming</li>
</ul>
</div>
</div>
<div class="ui right rail">
<div class="ui segment">
Right Rail
<ul>
<strong>
More you wanna try
</strong>
<li>
Try new basic computer
programming course
</li>
<li>
Full stack
developer course
</li>
</ul>
</div>
</div>
<h1>Welcome to geeksforgeeks.</h1>
</div>
</div>
</div>
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</body>
</html>
|
Output: 
Example: The following example shows the internal rail.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 100px" class="ui container">
<h2>Internal Rail</h2>
<br>
<div class="ui segment eight wide column">
<div class="ui left internal rail">
<div class="ui segment">
Left Rail
<ul>
<strong>Menu</strong>
<li>Data Structure</li>
<li>Web Programming</li>
<li>C++ Programming</li>
</ul>
</div>
</div>
<div class="ui right internal rail">
<div class="ui segment">
Right Rail
<ul>
<strong>More you wanna try</strong>
<li>
Try new basic computer
programming course
</li>
<li>Full stack developer course</li>
</ul>
</div>
</div>
<center>
<h3>Welcome to geeksforgeeks.</h3>
<p>Learn anything you want</p>
<p>Get tutorial of anything related
to computer science.</p>
<p>Courses on programming</p>
<p>Solve programming problems.</p>
<p>Help other by writing articles.</p>
</center>
</div>
</div>
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</body>
</html>
|
Output: 
Example: The following example shows dividing rail.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 100px" class="ui container">
<h2>Dividing Rail</h2>
<br>
<div class="ui grid container">
<div class="ui four wide column">
</div>
<div class="ui segment eight wide column">
<div class="ui left dividing rail">
<div class="ui segment">
Left Rail
<ul>
<strong>Menu</strong>
<li>Data Structure</li>
<li>Web Programming</li>
<li>C++ Programming</li>
</ul>
</div>
</div>
<div class="ui right dividing rail">
<div class="ui segment">
Right Rail
<ul>
<strong>
More you wanna try
</strong>
<li>Try new basic computer
programming course</li>
<li>Full stack developer course</li>
</ul>
</div>
</div>
<center>
<h3>Welcome to geeksforgeeks.</h3>
<p>Learn anything you want</p>
<p>Get tutorial of anything related
to computer science.</p>
<p>Courses on programming</p>
<p>Solve programming problems.</p>
<p>Help other by writing articles.</p>
</center>
</div>
</div>
</div>
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</body>
</html>
|
Output: 
Example: The following example shows attached rail.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 100px" class="ui container">
<h2>Attached Rail</h2>
<br>
<div class="ui grid container">
<div class="ui four wide column">
</div>
<div class="ui segment eight wide column">
<div class="ui left attached rail">
<div class="ui segment">
Left Rail
<ul>
<strong>Menu</strong>
<li>Data Structure</li>
<li>Web Programming</li>
<li>C++ Programming</li>
</ul>
</div>
</div>
<div class="ui right attached rail">
<div class="ui segment">
Right Rail
<ul>
<strong>
More you wanna try
</strong>
<li>Try new basic computer
programming course</li>
<li>Full stack developer course</li>
</ul>
</div>
</div>
<center>
<h3>Welcome to geeksforgeeks.</h3>
<p>Learn anything you want</p>
<p>Get tutorial of anything related
to computer science.</p>
<p>Courses on programming</p>
<p>Solve programming problems.</p>
<p>Help other by writing articles.</p>
</center>
</div>
</div>
</div>
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</body>
</html>
|
Output: 
You can use classes like tiny, small, large, huge, massive to change the size of the rail.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...