Different types of image shapes & Corners used in Bootstrap 4 - GeeksforGeeks

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.
Bootstrap-Questions
HTML-Questions
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
Tailwind CSS vs Bootstrap
How to keep gap between columns using Bootstrap?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Convert a string to an integer in JavaScript