Responsive Images in Bootstrap with Examples

BootstrapWeb DevelopmentFront End Technology

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.

raja
Updated on 26-Nov-2021 07:01:07

Advertisements