Responsive images in Bootstrap with Examples
Last Updated :
12 Jun, 2024
Responsive images in Bootstrap adjust automatically to fit different screen sizes, Bootstrap provides utilities to create responsive images that adapt to various screen sizes. By applying the img-fluid class, images scale proportionally within their parent containers, ensuring optimal viewing on different devices.
The different classes available in Bootstrap for images are explained below:
img-responsive class
Responsive images in Bootstrap are created by adding .img-responsive class to img tag. An img-responsive class applies: max-width: 100% | height:auto | display:block onto the image.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Link Bootstrap CSS -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Link Bootstrap JS and JQuery -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h1>Responsive Image </h1>
<br>
<h3>.img-responsive class</h3>
<p>
Change the size of the browser window
to see effect
</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240612085712/image.png"
class="img-responsive"
alt="Responsive image"
width="307" height="240" />
</div>
</body>
</html>
Output:
.img-fluid class:
Add .img-fluid class to tag. The .img-fluid class applies : max-width: 100% | height: auto onto the image.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Link Bootstrap CSS -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Link Bootstrap JS and JQuery -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h3>.img-fluid class</h3>
<p>
Change the size of the browser window
to see effect.
</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240612085712/image.png"
class="img-fluid"
alt="Responsive Image"
width="307"
height="240" />
</div>
</body>
</html>
Output:
.img-rounded class:
The rounded corners to an image are added by the .img-rounded class. (Rounded corners are not supported by IE8.)
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Link Bootstrap CSS -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Link Bootstrap JS and JQuery -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h3>.img-rounded class</h3>
<p>Rounded Corners</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240612085712/image.png"
class="img-rounded"
alt="Responsive Image"
width="307"
height="240" />
</div>
</body>
</html>
Output:
.img-circle class:
The shape of the image is made into a circle by the .img-circle class. (Rounded corners are not supported by IE8.)
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Link Bootstrap CSS -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Link Bootstrap JS and JQuery -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h3>.img-circle class </h3>
<p>Circle</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240612085712/image.png"
class="img-circle"
alt="Responsive Image"
width="307"
height="240" />
</div>
</body>
</html>
Output:
.img-thumbnail class:
Shaping of the image to a thumbnail is done by the .img-thumbnail class.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Link Bootstrap CSS -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Link Bootstrap JS and JQuery -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h3>.img-thumbnail class</h3>
<p>Thumbnail</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240612085712/image.png"
class="img-thumbnail"
alt="Responsive Image"
width="307"
height="240">
</div>
</body>
</html>
Output:
Similar Reads
Typography in Bootstrap Bootstrap Typography provides a standardized and flexible approach to text styling, offering various classes for headings, paragraphs, and inline text elements. It ensures consistent typography across different devices and screen sizes, enhancing readability and aesthetics. Typography can be used to
2 min read
Popovers in bootstrap with examples A Bootstrap Popover is an attribute in bootstrap that can be used to make any website look more dynamic. Popovers are generally used to display additional information about any element and are displayed with a click of a mouse pointer over that element. In the popover, if you click on any element th
3 min read
Bootstrap | Spinners Set-2 Bootstrap provides us with various classes for creating different styles of the spinner to indicate the loading state. We can also modify the appearance, size, and placement of the spinners with the classes provided by Bootstrap. Buttons with border spinner: We can place the border spinner within th
4 min read
Bootstrap | Spinners Set-1 Bootstrap provides us with various classes for creating different styles of the spinner to indicate the loading state. We can also modify the appearance, size, and placement of the spinners with the classes provided by Bootstrap. Types of Spinners: Border spinner: We can create a lightweight bordere
4 min read
Differences between Bootstrap and JQuery UI Bootstrap: Bootstrap is a framework for front-end web development.it makes web development faster and easier. It contains HTML and CSS based design templates for various responsive front-end designing, as well as optional JavaScript plugins. JQuery UI: JQuery UI is a collection of GUI widgets and th
3 min read
Flexbox utilities in bootstrap with examples The Flexible Box Layout Module in bootstrap is used for designing the flexible and responsive layout structure. It is used in Bootstrap 4. The d-flex class is used to create a simple flexbox container Syntax: <div class="d-flex p-2"></div>The d-inline-flex class is used to create an inli
11 min read
Spacing in Bootstrap with Examples Spacing in Bootstrap refers to the system of predefined margin and padding utility classes that enable developers to add space around elements easily. These classes facilitate layout control and improve visual presentation in web applications.The following Syntax are used in the Various Classes for
3 min read
Media Objects in Bootstrap with Examples The Bootstrap Media Objects like images or videos can be aligned to the left or to the right of some content in an easy and efficient manner.The Bootstrap Media Objects are used where some data is positioned alongside content to build up complicated and recursive components of the content.The media
5 min read
Display Property in Bootstrap with Examples In Bootstrap, the display property controls the layout behavior of elements. Bootstrap provides utility classes like d-none (hide), d-block (display as block), d-inline (display as inline), etc., for responsive display manipulation. The available classes are: Class NameDescription.d-blockSets the di
2 min read
Responsive Video or Slideshow Embeds in Bootstrap with Examples Bootstrap allows creating responsive video or slideshow embeds based on the width of the display or parent element by creating a native ratio that scales with the device. Using responsive video or slideshow embeds the content can be scaled automatically as per the screen size or the parent container
1 min read