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.
There are different styles of putting images in our web app using semantic-ui to make out website look more awesome. You can put an image or an SVG.
Let’s see some example of how to use semantic-ui for putting images.
Example: This example display a simple image using semantic-ui.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
<script src=
</script>
</head>
<body>
<div class="ui container">
<h1>Image</h1>
<img class="ui small image" src=
</div>
</body>
</html>
|
Output:
Example: This example adding a border to the image.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h1>Bordered Image</h1>
<img class="ui medium bordered image"
src=
</div>
<script src=
</script>
</body>
</html>
|
Output:
You can see the border exactly by running the example in IDE.
Example: This example creating a Circular Image.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h1>Circular Bordered Image</h1>
<img class="ui medium circular bordered image"
src=
</div>
<script src=
</script>
</body>
</html>
|
Output:
Example: This example creating a Vertically aligned Images.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h1>Vertically Aligned Images</h1>
<img class="ui top aligned small image"
src=
<p>Aligned at Top</p>
<div class="ui divider"></div>
<img class="ui middle aligned small image" src=
<p>Aligned at Middle</p>
<div class="ui divider"></div>
<img class="ui bottom aligned small image" src=
<p>Aligned at Bottom</p>
</div>
<script src=
</script>
</body>
</html>
|
Output:
Note: You can add class mini, tiny, small, medium, large, massive to change the size. You can run any of this example by clicking on Run on IDE.