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

19 Feb, 2020
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.
By providing a border to the image. Hence, it makes the image to be appearing inside the box.By using custom css to insert a image inside a div having border properties.By using bootstrap.
By providing a border to the image. Hence, it makes the image to be appearing inside the box.
By using custom css to insert a image inside a div having border properties.
By using bootstrap.
Let us see the demonstration of the above-stated ways.
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: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: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="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css"           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:
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:
<!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:
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:
<!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:
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="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css"           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:
<!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="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css"           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:
Bootstrap-Misc
Picked
Technical Scripter 2019
Bootstrap
Technical Scripter
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?
How to Add Image into Dropdown List for each items ?
How to make Bootstrap table with sticky table head?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?