How to put images in a box without space using Bootstrap?

Bootstrap 4 is a CSS a library for frontend web development developed by Twitter which helps the developer to beautify the way the webpage looks. The bootstrap library has pre-defined CSS classes that are easy to use and it helps the developer to provide an artistic look to the website with minimal effort.

The following line shows the syntax for inserting a simple image into the webpage

filter_none

edit
close

play_arrow

link
brightness_4
code

<img src="image-path" alt="Show this text if image does not appear" />

chevron_right


There are actually three ways to solve this problem. I am going to provide all three solutions here.

  1. By providing a border to the image. Hence, it makes the image to be appearing inside the box.
  2. By using custom css to insert a image inside a div having border properties.
  3. By using bootstrap.

Let us see the demonstration of the above-stated ways.

  1. By providing a border to the image.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Bootstrap - Image inside Box</title>
    </head>
    <!-- Custom css to provide border to the image -->
    <style>
        img{
            border:5px solid green; 
         /* This line gives a green border of 5 pixels
              width to all images on the webpage. */ 
            This line does not cause any space 
            between the image and the border. */
        }
    </style>
    <body>
            <h2>
                Putting image inside a Box
            </h2>
    <!-- Put the path of image in the src of image tag. -->
            <img src="..." alt="Image Loading Failed" />    
    </body>
    </html>

    chevron_right

    
    

    Output:
    Image with Border

  2. By using custom css
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Bootstrap - Image inside Box</title>
    </head>
       <!-- Custom css to provide border to the div -->
    <style>
        /* 
        border class is used to give border to the div tag.
         */
       .border{
           border:5px solid green;
           /* green border of 5 pixels width */
           padding:0;
           /* padding to remove the space
           between inner components of the div*/
           max-width: fit-content;
           /*
            making the div take the 
            size of the image
            */
           }
        img{
            display: block;
            /* to make the image occupy 
            the whole container */
        }
      
    </style>
    <body>   
            <h2>
                Putting image inside a Box
            </h2>
            <!-- Enclosing the image tag inside the div
                having border class. 
            -->
            <div class="border">
                <img src="..." alt="Image Loading Failed" />
            </div>
          
    </body>
    </html>

    chevron_right

    
    

    Output:

  3. Using bootstrap 4 css: We will be using the pre-defined class known as cards to make image appear inside a box.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" 
              content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" 
              content="ie=edge">
        <title>Bootstrap - Image inside Box</title>
        <link rel="stylesheet"
              href=
              integrity=
    "sha256-A47OwxL/nAN0ydiDFTSGX7ftbfTJTKgiJ0zqCuTPDh4=" 
              crossorigin="anonymous" />
    </head>
    <style>
        .border {
            border: 5px solid green !important;
            /* Border of width 5 pixels green in color */
            width: fit-content;
            /* To make the image take whole space of container */
        }
    </style>
      
    <body>
        <!-- Providing necessary padding and margin -->
        <h2 class="mx-5 mt-5">
                Putting image inside a Box
            </h2>
        <!-- using card class to place image inside a box -->
        <!-- Added custom css class border for additional properties -->
        <!-- Added necessary padding and margin classes -->
        <div class="card mx-5 px-0 py-0 border">
            <!-- Added card-img-top class to show 
                 the image on the top of the card. -->
            <!-- Since the image is the only content in card -->
            <!-- Image appears to be taking the whole card. -->
            <img src="..." alt="Image Loading Failed" class="card-img-top" />
        </div>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.