Bootstrap - Removing padding or margin for figures when screen size is smaller

Question

I am trying to have an image that covers the whole screen (without margin or padding) on small devices. Techniques propsed on this post unfortunately did not work for me.
Here is the code I currently have. (tested on https://jsfiddle.net/).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">


</head>
<body>
  <div class="container-fluid bg-primary">
  <div class="row">
  <div class="col-md-9">
  <div class="image-wraper">
    <figure class="figure">
            <img
                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img%20(73).jpg"
                class="figure-img img-fluid rounded shadow-3 mb-1"
                alt="Taking up Water with a Spoon"
                style="height: 100%; width: 100%; object-fit: cover;"
            />
            <figcaption class=" figure-caption">A caption for the above image.</figcaption>
        </figure>
  </div>
    
  </div>
  <div class="col-md-3">
    ... 
  </div>
  </div>
        
</div>
</body>
</html>

There is still a margin on the left and right. How can I remove it on screen less than or equal to sm ?

Sercan · Answer 1 · 2021-12-14T19:34:57.200

The picture fills the screen completely, but since the aspect ratio does not fully match the aspect ratio of the screen, I got the following result. I also applied my own style by canceling the Bootstrap link. Can you test it?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        body{
            margin: 0px !important;
        }

        img {
            position: absolute;
            width: 100%;
        }

        .img-fluid {
            max-width: 100%;
            height: auto;
        }

        .figure-style {
            margin: 0px !important;
        }
    </style>
</head>

<body>
    <div class="row align-items-center">
        <div class="col-lg-12">
            <figure class="figure-style">
                <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img%20(73).jpg"/>
            </figure>
        </div>
    </div>
</body>
</html>

Application test image is available below:

Thank you @Sercan. This effectively covers the whole screen. But I forgot to say that it should be inside a `
`. — Kyv, Dec 14 '21 at 20:29
Just to double check @Kyv .... If you have it inside a `col-9` then by default it is never going to stretch the entire screen width but only three quarters of it... Eg col-9 out of of 12 possible columns and 12 will be full width full width as @SercanSebetçi suggested in his code above — Cutey from Cute Code, Dec 15 '21 at 10:28

score 0 · Answer 2 · answered Dec 14 '21 at 19:29

If you have an image with an aspect ratio suitable for browser screen in Bootstrap 5, you can apply the following code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    </style>
</head>

<body>
    <img src="https://mdbcdn.b-cdn.net/img/new/slides/041.jpg" class="img-fluid" alt="Wild Landscape" />
</body>
</html>

score 0 · Answer 3 · answered Dec 16 '21 at 12:18

0

Using media query, By default Bootstrap adjusts margins/padding to the body, container and navbars at 480px.

@media(max - width: 480 px) {
   ...
}

answered Dec 16 '21 at 12:18

lakshna S

255
1
5

Bootstrap - Removing padding or margin for figures when screen size is smaller

3 Answers3