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.
Example: This example adding a border to the image.
You can see the border exactly by running the example in IDE.
Example: This example creating a Circular Image.
Example: This example creating a Vertically aligned Images.
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.
- CSS | Styling Images
- Bootstrap 4 | Images
- CSS | Polaroid Images
- HTML | Images
- CSS | Border Images
- How to set multiple background images using CSS?
- How to put images in a box without space using Bootstrap?
- How to display images in Angular2 ?
- SASS variable for images path
- How to use grid for images in bootstrap card ?
- HTML | DOM images Collection Property
- Responsive images in Bootstrap with Examples
- How to download Google Images using Python
- Why card images use data-src (not src) for image in Bootstrap 4 ?
- How to display multiple horizontal images in Bootstrap card ?
- How to create a drag and drop feature for reordering the images using HTML CSS and jQueryUI ?
- How to Display Validation Message for Radio Buttons with Inline Images using Bootstrap 4 ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.