Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Responsive Images in Bootstrap with Examples
Bootstrap is a front-end framework meaning that it’s used on the client, not the server, and it’s specifically used for user interfaces and themes that design what the user sees in a website or application.
It included bits of code and HTML, CSS, and also javascript. It is used for building responsive mobile-first web applications and websites; mobile-first means it refers to design for smaller screens first and then working and then working up to the larger screens.
In Bootstrap, we have different classes for making the other appearances of images and making them responsive to scale according to their parent class.
Let’s look at some classes available in Bootstrap for images −
.img-responsive − This class can be applied by adding class = .img-responsive to img tag. It provides responsive images with 100% max-width and auto height.
Example
<!DOCTYPE html> <html> <head> <!-- Using Bootstrap CDN --> <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> <title> Responsive Image Example </title> </head> <body> <div class="container"> <h3>Example of img-responsive class </h3> <img src="https://ymi.today/wp-content/uploads/2015/07/What-I-Learned-From-Minions-1024x423.jpg" class="img-responsive" alt="Responsive image"> </div> </body> </html>
Output
.img-fluid class − This class provides 100% max-width and ‘auto’ height.
Example
<!DOCTYPE html> <html> <head> <!-- Using Bootstrap CDN --> <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> <title> fluid Image Example </title> </head> <body> <div class="container"> <h3>Example of img-fluid class </h3> <img src="https://ymi.today/wp-content/uploads/2015/07/What-I-Learned-From-Minions-1024x423.jpg" class="img-fluid" alt="fluid image" height="350" width="320"> </div> </body> </html>
Output
.img-thumbnail class − This class provides a rounder border of 1px to the image.
Example
<!DOCTYPE html> <html> <head> <!-- Using Bootstrap CDN --> <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> <title> thumbnail Image Example </title> </head> <body> <div class="container"> <h3>Example of img-thumbnail class </h3> <img src="https://ymi.today/wp-content/uploads/2015/07/What-I-Learned-From-Minions-1024x423.jpg" class="img-thumbnail" alt="thumbnail image" height="350" width="320"> </div> </body> </html>
Output
.img-circle class − This class provides a circle filled with the image.
Example
<!DOCTYPE html> <html> <head> <!-- Using Bootstrap CDN --> <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> <title> circle Image Example </title> </head> <body> <div class="container"> <h3>Example of img-circle class </h3> <img src="https://ymi.today/wp-content/uploads/2015/07/What-I-Learned-From-Minions-1024x423.jpg" class="img-circle" alt="circle image" height="350" width="320"> </div> </body> </html>
Output
img-rounded class − This class provides a rounded border to the image.
Example
<!DOCTYPE html> <html> <head> <!-- Using Bootstrap CDN --> <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> <title> rounded Image Example </title> </head> <body> <div class="container"> <h3>Example of img-rounded class </h3> <img src="https://ymi.today/wp-content/uploads/2015/07/What-I-Learned-From-Minions-1024x423.jpg" class="img-rounded" alt="rounded image" height="350" width="320"> </div> </body> </html>
Output
Conclusion
In this tutorial, we discussed the definition of Bootstrap and how we can use it in front-end Development for creating Responsive images to make applications compatible with different screen sizes. We also looked at an example for making images responsive in Bootstrap, where we discussed other classes. We hope you find this tutorial helpful.
446 Views
