images in bootstrap

Megha kamble August 22, 2025

 Images  In bootstrap





What Is Responsive Design?


Responsive design is a method for taking all of the existing content that is on the page

and optimizing it for the device that is viewing it. 

widths, Bootstrap uses CSS media queries to measure the width of the browser viewport

and then, using conditionals, changes which parts of the stylesheets are loaded. Using

the width of the browser viewport, Bootstrap can then optimize the content using a

combination of ratios or widths, but it mostly relies on min-width and max-width

properties.

At the core, Bootstrap supports five different layouts, each relying on CSS media queries.



    Responsive Image

    Responsive images automatically adjust to fit the size of the screen. Create responsive images by adding an . img-responsive class to the <img> tag. The image will then scale nicely to the parent element.

    Program

    <!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/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
      <script src="https://maxcdn.boots<!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/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container">
      <h2>Image</h2>
      <p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
      <img class="img-responsive" src="img_cinqueterre.jpg" alt="Chania" width="460" height="345"> 
    </div>
    </body>
    </html>
    trapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container">
    h2>Image</h2>
      <p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
      <img class="img-responsive" src="img_chania.jpg" alt="Chania" width="460" height="345"> 
    </div>
    </body>
    </html>


    Output

    Image

    The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect)





    Rounded Image

    In Bootstrap, you can make an image rounded by applying the rounded class to it. This class sets the border-radius property, giving the image rounded corners for a softer and more visually appealing appearance.


    Program


    <!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    </head>

    <body>

    <div class="container mt-3">

      <h2>Rounded Corners</h2>

      <p>The .rounded class adds rounded corners to an image:</p>            

      <img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre" width="304" height="236"> 

    </div>

    </body>

    </html>


    Output


    Rounded Corners

    The .rounded class adds rounded corners to an image:






    Circle Image


    <!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    </head>

    <body>

    <div class="container mt-3">

      <h2>Circle</h2>

      <p>The .rounded-circle class shapes the image to a circle:</p>            

      <img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre" width="304" height="236"> 

    </div>

    </body>

    </html>



    Output


    Circle

    The .rounded-circle class shapes the image to a circle:






    Thumbnail Image


    <!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    </head>

    <body>

    <div class="container mt-3">

      <h2>Thumbnail</h2>

      <p>The .img-thumbnail class creates a thumbnail of the image:</p>            

      <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 

    </div>

    </body>

    </html>



    Output

    The .img-thumbnail class creates a thumbnail of the image:
















    Post a Comment

    0 Comments