Semantic-UI Image Groups
Last Updated :
28 Feb, 2022
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 images. It offers images in different types like a normal image and image link and also different states like hidden, visible and also in different variations and states and even display elements in groups. Semantic UI Image Groups help us in displaying a group of images. In this article, we are going to learn about Semantic-UI Image Groups along with implementation using example code.
Semantic-UI Image Groups is a feature that enables us to display images in groups. Elements can be formatted in such a way that all the elements present in the group will have the same size.
- Size: All the images displayed will have the same size. We can simply add the class .mini, .tiny, .small, .medium, .large, .big, .huge and .massive classes to the group of images wrt size of the image required.
Syntax: The following is the syntax for a group of tiny-sized images. Change the class name related to the size of the image required.
<div class="ui size images">
<img class="ui image" src="....">
<img class="ui image" src="....">
...
</div>
Example 1: Since the class we used is tiny, we can observe tiny images in output.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Image Groups</title>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<div class="ui container">
<h2 class="ui header green">
Geeksforgeeks
</h2>
<strong>Semantic-UI Image Groups</strong>
<br><br>
<div class="ui tiny images">
<img class="ui image"
src=
<img class="ui image"
src=
<img class="ui image"
src=
</div>
</div>
</center>
</body>
</html>
|
Output:
Semantic-UI Image Groups
Example 2: Since the class we used is small, we can observe small images in output.
HTML
<html>
<head>
<title>Semantic-UI Image Groups</title>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<div class="ui container">
<h2 class="ui header green">Geeksforgeeks</h2>
<strong>Semantic-UI Image Groups</strong>
<br><br>
<div class="ui small images">
<img class="ui image"
src=
<img class="ui image"
src=
<img class="ui image"
src=
</div>
</div>
</center>
</body>
</html>
|
Output:
Semantic-UI Image Groups
Reference: https://semantic-ui.com/elements/image.html#groups
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...