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
< 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.
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 >
< 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 >
< 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 >
< 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 >
< 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 =
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 >
< h2 class = "mx-5 mt-5" >
Putting image inside a Box
</ h2 >
< div class = "card mx-5 px-0 py-0 border" >
< img src = "..." alt = "Image Loading Failed" class = "card-img-top" />
</ div >
</ body >
</ html >
|
Output:
Last Updated :
19 Feb, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...