Bootstrap 5, the most recent version, provides many advanced features to design responsive websites. The images are the popular components to add visual appeal to the applications. In Bootstrap 5, several classes can be used to give different shapes to images. More specifically, you can round the desired edge of the image using specific Bootstrap classes like “rounded”, “rounded-end”, and many more.
This write-up will describe how to make the rounded image in Bootstrap 5.
How to Create an Image Rounded in Bootstrap 5?
Bootstrap 5 offers many classes that help in making the element’s edges round. These are listed below:
-
- “rounded”: This class makes the whole image around.
- “rounded-pill”: This class gives the round pill shape to the element.
- “rounded-circle”: This image is rounded into a circle.
- “rounded-top”: This class rounds the image from the top.
- “rounded-start”: This class rounds the image from the start.
- “rounded-end”: This class rounds the image from the end.
- “rounded-bottom”: This class rounds the image from the bottom.
Now, let’s practically discuss the effect of the enlisted Bootstrap.
Example 1: How to Create an Image Round in Bootstrap 5?
The “rounded-circle” class is utilized to create the circle-shaped image. To do so, add the “<img>” tag and assign it a class “rounded-circle” in your HTML file:
Output
Example 2: How to Make an Image Round Pill in Bootstrap 5?
The “rounded-pill” class is specified with the image to give a round pill shape to it.
For this purpose, implement the class “rounded-pill” as mentioned in the below code:
Output
This is how you can make the images round in Bootstrap 5.
Conclusion
To make images round in Bootstrap 5, several classes can be utilized. These classes include the “rounded-end”, “rounded-start”, “rounded-top”, “rounded-bottom”, and many more. Specifically, to make the whole image a circular shape, the “rounded-circle” class is used. To make it a rounded pill shape, the “rounded-pill” class is utilized. This write-up has explained how to make an image rounded in Bootstrap 5.
