Open In App

Different types of image shapes & Corners used in Bootstrap 4

Improve
Improve
Like Article
Like
Save
Share
Report

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=
</head>
  
<body>
    <center>
        <h1 class="text-success">GeeksForGeeks</h1>
        <h4 class="text-secondary">Rounded Corners</h4>
        <img src=
            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=
</head>
  
<body>
    <center>
        <h2 class="text-success">
            GeeksForGeeks
        </h2>
          
        <h4 class="text-secondary">
            Circle Image
        </h4>
        <img src=
            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=
</head>
  
<body>
    <center>
        <h2 class="text-success">
            GeeksForGeeks
        </h2>
          
        <h4 class="text-secondary">
            Thumbnail Image
        </h4>
          
        <img src=
            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=
</head>
  
<body>
    <center>
        <h2 class="text-success">
            GeeksForGeeks
        </h2>
          
        <h4 class="text-secondary">
            Aligning Image
        </h4>
          
        <img src=
            class="float-left" alt="GFG" 
            width="200" height="200" />
          
        <img src=
            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.



Last Updated : 07 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads