Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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




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


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.




    <!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>

    
    

    Output:
    Image with Border

  2. By using custom css




    <!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>

    
    

    Output:

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




    <!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>

    
    

    Output:



Last Updated : 19 Feb, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads