Semantic UI is an open-source framework available for building nice and flexible user interfaces using CSS and jQuery. It is very much similar to bootstrap having different elements for website creation. It majorly uses classes to add styles to different elements of HTML. Divider helps in visually dividing the content of the screen into groups.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 100px"
class="ui container">
<h2>Divider</h2>
<div class="ui divider">
<br>
<p>
Semantic UI is an open-source
that uses CSS and jQuery to
build great user interfaces.
It is 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.
</p>
</div>
</div>
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</body>
</html>
|
Output
Example: The following example demonstrates the Vertical Divider.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 100px" class="ui container">
<h2>Vertical Divider</h2>
<div class="ui placeholder segment">
<div class="ui two column very
relaxed stackable grid">
<div class="middle aligned column">
<div class="ui huge button">
Student Log In
</div>
</div>
<div class="middle aligned column">
<div class="ui huge button">
Teacher Log In
</div>
</div>
</div>
<div class="ui vertical divider">
Or
</div>
</div>
</div>
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</body>
</html>
|
Output:
<pExample: The following example demonstrates the Horizontal Divider.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 100px" class="ui container">
<h2>Horizontal Divider</h2>
<div class="ui center aligned basic segment">
<div class="ui button">
Student Log In
</div>
<div class="ui horizontal divider">
Or
</div>
<div class="ui button">
Teacher Log In.
</div>
</div>
</div>
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</body>
</html>
|
Output:
Example: The following example demonstrates the Inverted Divider.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 100px" class="ui container">
<h2>Inverted Divider</h2>
<div class="ui placeholder inverted segment">
<div class="ui two column very
relaxed stackable grid">
<div class="middle aligned column">
<div class="ui huge button">
Student Log In
</div>
</div>
<div class="middle aligned column">
<div class="ui huge button">
Teacher Log In
</div>
</div>
</div>
<div class="ui inverted vertical divider">
Or
</div>
</div>
</div>
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src
</script>
</body>
</html>
|
Output
