Rounded Images in Bootstrap framework


There are many UI CSS classes that you can use to make your website responsive and mobile-first using the Bootstrap framework. If you want an image to be displayed with rounded corners you can make use of class img-rounded on the image element. If you want the image to be of circle shape then make use of the class img-circle.

Example :
 
<div style="margin:40px">
<img width="140px" height="140px" class="img-circle" src="mona-lisa.jpg"/>
</div>

 
<div style="margin:40px">
<img width="140px" height="140px" class="mona-lisa.jpg"/>
</div>
Output:
Bootstrap rounded and circled image
Bootstrap rounded and circled image
Advertisements
Try Out Code2care Dev Tools:

Advertisements

Advertisements
Code2care is an initiative to publish and share varied knowledge in programming and technical areas gathered during day-to-day learnings and development activities.

Students and software developers can leverage this portal to find solutions to their various queries without re-inventing the wheel by referring to our easy to understand posts. Technical posts might include learnings, tutorials, trouble-shooting steps, video tutorials, code snippets, how-to, blogs, articles, etc.

🎉 We are celebrating the 10th years of Code2care! Thank you for all your support!

We strongly support Gender Equality & Diversity.