Different types of image shapes & Corners used in Bootstrap 4
Last Updated :
07 Oct, 2021
In this article, we will learn how to make different image shapes using Bootstrap & will also understand its implementation through the examples. Bootstrap offers different classes for images to make their appearance better and also to make them responsive. Making an image responsive means it should scale according to its parent element. That is, the size of the image should not overflow its parent element and will grow and shrink according to the change in the size of its parent without losing its aspect ratio. We will discuss the different classes available in Bootstrap for images.
In Bootstrap 4, the image is displayed using a <img> tag in different shapes and corners. These shapes and corners can be implemented using classes. The different shapes and corners that can be used for images in bootstrap are given below:
- Rounded Corners
- Circle
- Thumbnail
- Aligning Image
Here, we have used the Bootstrap 4 CDN link that can easily get from their official website.
Bootstrap CDN links:
Copy & paste the given stylesheet <link> inside the <head> tag before all other CSS files to load.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
In order to use the Javascript functionality, we can use the below CDN link for javascript.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
We will utilize the above CDN link to implement it to make different shapes of images.
Rounded Corners: In Rounded corners, the displayed image will be having its corners rounded. The .rounded class adds rounded corners to an image. This class is used with <img> tag.
Syntax:
<img src="image_source" class="rounded" alt="description">
Example 1: This example illustrates the use of the .rounded class in Bootstrap.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1" />
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
</head>
<body>
<center>
<h1 class="text-success">GeeksForGeeks</h1>
<h4 class="text-secondary">Rounded Corners</h4>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211006064408/1.png"
class="rounded" alt="GFG"
width="150" height="150" />
</center>
</body>
</html>
Output: The image corners are displayed in output are rounded.
Circle: The .rounded-circle class is used to create the circle shape image.
Syntax:
<img src="image_source" class="rounded-circle" alt="description">
Example 2: This example illustrates the use of the .rounded-circle class in Bootstrap.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1" />
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
</head>
<body>
<center>
<h2 class="text-success">
GeeksForGeeks
</h2>
<h4 class="text-secondary">
Circle Image
</h4>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211006064408/1.png"
class="rounded-circle" alt="GFG"
width="150" height="150" />
</center>
</body>
</html>
Output: The image is displayed in the output, is a circle image.
Thumbnail: A thumbnail is a small image that represents a larger image. The .img-thumbnail class is used to create thumbnail (bordered) images.
Syntax:
<img src="image_source" class="img-thumbnail"
alt="description"> Example 3: This example illustrates the use of the .img-thumbnail class in Bootstrap.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1" />
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
</head>
<body>
<center>
<h2 class="text-success">
GeeksForGeeks
</h2>
<h4 class="text-secondary">
Thumbnail Image
</h4>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211006064408/1.png"
class="img-thumbnail" alt="GFG"
width="150" height="150" />
</center>
</body>
</html>
Output: The displayed image is surrounded by a border.
Aligning Image: It is used to align images in left and right. The .float-left and .float-right class is used to set the left and right alignment of the image.
Syntax:
<img src="image_source" class="float-left/float-right"
alt="description">Example 4: This example illustrates the use of the .float-left or .float-right class that will be used to set the left and right alignment of the image in Bootstrap.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1" />
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
</head>
<body>
<center>
<h2 class="text-success">
GeeksForGeeks
</h2>
<h4 class="text-secondary">
Aligning Image
</h4>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211006064408/1.png"
class="float-left" alt="GFG"
width="200" height="200" />
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211006064408/1.png"
class="float-right" alt="GFG"
width="200" height="200" />
</center>
</body>
</html>
Output: From the output, one image is aligned on the left side another is aligned on the right side.
Similar Reads
Why card images use data-src (not src) for image in Bootstrap 4 ?
Bootstrap 4 card images use src in image tags to providing the location to be loaded in the given image tag and data-src to provide additional information that can be used by JavaScript for improving the users' experience. For data-src and src tag we can conclude as follows: src: If you want to load
3 min read
How many types of layouts are there in Bootstrap ?
Containers are the most basic layout element in Bootstrap and they are needed while using the default grid system. There are two major layouts for Bootstrap that are Fluid Layout and Fixed Layout. Fluid-layout: This uses the bootstrap .container-fluid class for the layout. This layout uses proportio
4 min read
Image Replacement in Bootstrap using text-hide Class
Bootstrap allows us to replace the text with background image for any text element like paragraph element, heading element etc. With the use of .text-hide class, we can replace an element’s content with a background image. Syntax: <element class = "text-hide" style = "background-image: url('Speci
1 min read
How to use grid for images in bootstrap card ?
Images can be added to the Bootstrap card by simply using an img tag. But we cannot use the same method directly to place an Image Grid into the Bootstrap Card as it will be lead to a misaligned design. Therefore, to get a per-flow to place image Grid into Bootstrap Card. The perfectly aligned grid
2 min read
Bootstrap 5 Containers Responsive Containers
Bootstrap 5 Containers Responsive containers are used to group HTML elements and also provide support for grid layout. It has in-built responsiveness which is helpful while development. Bootstrap 5 Responsive Container Classes:container-sm: Container small is a class that styles a container that has
3 min read
How to Create Carousel with Multiple Items & Rounded Image in Bootstrap ?
In Bootstrap, a carousel presents dynamic image slideshows or content showcases. Crafting a carousel with multiple items and rounded images in Bootstrap 5 involves tailoring the carousel layout and styling images with rounded edges for a visually appealing presentation. ApproachCreate an HTML file a
2 min read
What is the use of img-fluid class in Bootstrap ?
In Bootstrap, the img-fluid is a Bootstrap class that makes images responsive by setting their maximum width to 100% of the parent container's width. This ensures that images dynamically adjust their size according to the screen or viewport width, maintaining their aspect ratio without overflowing t
2 min read
How to Adjust Images with Different Sizes to the Same Size using Bootstrap ?
Images are an indispensable part of any website. Many websites, such as e-commerce sites, news sites, etc., display numerous images in the same row and column, and the images need to be displayed as per a standard size for a better user experience. We will look at how to adjust images with different
2 min read
How to use image overlay correctly with Bootstrap ?
In this article, we will be learning how to use image overlay correctly with Bootstrap. But before that, first, we need to know what is an Image Overlay. Image Overlay: Image overlay generally refers to the image being a background image and inserting texts, and links inside of that image. It can be
2 min read
How to Create a Responsive Image Gallery in Bootstrap ?
An image gallery is like a digital album where we can put our multiple images to attract user attention. We have used Bootstrap a CSS framework for Creating a Responsive Image Gallery where the layout adjusts automatically based on the screen size, ensuring that it looks good on both large desktop s
3 min read