Eliminating padding or margin for figures in Bootstrap on smaller screens

I've been struggling to create a fullscreen image on small devices without any margin or padding. Unfortunately, the solutions suggested in this thread didn't work for me.
Below is the code I'm currently using (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>

Despite my efforts, there seems to be some residual margin on the sides of the image. How can I completely eliminate it for screens equal to or smaller than sm?

htmlcssbootstrap-4

Answer №1

When the picture fills the screen completely, but doesn't match the aspect ratio of the screen, it can result in a skewed image. To address this issue, I customized the Bootstrap link style and made some adjustments. Would you mind testing 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>

You can test the modified layout using the image provided below:

https://i.stack.imgur.com/kkZV9.png

Answer №2

For those using Bootstrap 5 and looking to display an image with the perfect aspect ratio for the browser screen, simply implement the code below:

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e28c8b848f888a9d8ca6809c809cc1">[email protected]</a>/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>

Answer №3

Bootstrap automatically adjusts margins and padding for the body, container, and navbars when the screen size is 480px or lower using media queries.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for sending PHP variables together with a Typeahead variable

I have simplified this code as much as possible. I have a typeahead variable that is functioning correctly. However, I also need to pass two unrelated variables $php_var1 and $php_var2 along with the typeahead variable. These PHP variables are initialized ...

javascriptphphtmlajax

Problems with navigation alignment in Flask website due to HTML, CSS, and

Here's a snapshot of my current website design: website I'm attempting to place the Login & Sign up buttons in line with the rest of the navigation bar. I've tried various methods without success so far. My attempts include adjusting text a ...

htmlcssflask

How can I make the scrollbar invisible in the sticky header of a Material UI Table?

In my React project, I have implemented a Material-UI Table with a fixed header. The issue I am facing is that the scrollbar in the table header overlaps it and I want to hide it while still displaying it in the body of the table. I have attempted to modi ...

cssreactjshtml-tablematerial-uiscrollbar

PHP receive apostrophe from $_GET array

Similar Question: “slash before every quote” issue Hello there, I am currently attempting to utilize $_GET in order to transmit the contents of a text box to another php file. However, whenever I include single (') or double (") quote ...

phphtml

Typescript tutorial: Implementing a 'lambda function call' for external method

The Issue Just recently diving into Typescript, I discovered that lambda functions are utilized to adjust the value of this. However, I find myself stuck on how to pass my view model's this into a function that calls another method that hasn't b ...

javascripthtmlknockout.jslambdatypescript

The problem with clearing floats in IE7 (as well as 6)

Currently, I am facing an issue where I have a list that I want to split into three columns by using the float left property and then clearing the first column. Everything seems to be working fine in IE8 and FF, however, IE7 is causing the second column t ...

cssinternet-explorer-7

Inject environment variable into SCSS file while using webpack

I'm new to webpack and I need help with reading a specific value, which is the env variable from the webpack.config.js file, in a sass file. This will allow me to have different CSS styles based on the environment. For example: If the env is set to ...

javascriptcsswebpacksass

Different ways to swap table cells using only CSS

Does anyone know how to switch the positions of table cells using only CSS? I have three divs set up like this: #content { width: 1000px; display: table; float: none; vertical-align: top; border: 1px solid red; } #left { float: left; } #ri ...

htmlcsscss-tables

Challenges with Hangman in JavaScript

As a beginner in JavaScript, I recently developed a simple hangman-like game. However, I encountered some challenges that I need help with. One issue is related to my lettersGuessed array. Currently, the array displays every time a key is pressed and repea ...

javascriptjqueryhtml

Is it possible to resize the background-image style?

When using the regular img tag in HTML, you can specify the width and height, and the browser will scale the image. If the dimensions are not too different from the original, the result is usually decent. For example, you can scale the avatar image to 32x ...

htmlcss

Unable to display menu content text using jQuery

Currently experimenting with jQuery to create a dynamic submenu. The goal is to have a sub menu appear when the main menu is clicked, and then disappear when an item in the sub menu is selected, revealing additional information within a div. Unfortunately, ...

javascriptjqueryhtmlcssmenu

Is there a way to position text to the right of an image?

Looking for some help with aligning text to the right of an image within a hyperlink. I want the hyperlink to fill the rectangle and achieve a specific layout similar to attachment1, but currently getting something different like attachment2. If anyone ha ...

css

How can you conceal an HTML element when the user is using an iOS device?

I need the code to determine if a user is using an iOS device and, if not, hide the HTML input type "Play" button. So, I'm uncertain whether my iOS detection is correct, the hiding of the "Play" button in the code, or both: <!DOCTYPE html> < ...

javascriptjqueryioshtml

Determine the TR id when a button within a TD element is clicked using JavaScript/jQuery

Currently seeking a method to generate a unique identifier for use as a parameter in a JavaScript function. Specifically interested in extracting the id of the first td element if feasible. <tr id='it'><td id="#nameiron">Jason</td ...

javascriptjqueryhtml

Tips for adjusting the item count in mat-autocomplete

For quite some time now, I've been attempting to adjust the number of items in a mat-autocomplete without any luck. My project involves using material.angular.io Below is a snippet of my code import { Component, OnInit } from '@angular/core&a ...

htmlcssangularangular-material

Retrieve the element that is currently being hovered over within the same nested selector

I am facing a challenge in selecting the currently hovered element with a nested selector. The ".frmElement" class is used as the selector. When I hover over the ".frmElement" element at a certain level, all the previous selector elements display the hover ...

javascriptjqueryhtmlcss

Tips for choosing a particular list item using jQuery: retrieve the attribute value of 'value' and showcase it on the webpage

I have a task that requires the following: Implement an event listener so that when you click on any list item, the value of its "value" attribute will be shown next to this line. In my HTML, I have an ordered list with 8 list items. The values range fro ...

javascriptjqueryhtmljquery-selectorsjquery-events

What factors does YouTube take into consideration when determining the dimensions for the generated iframe code?

Currently, I am working on a feature that allows our users to embed videos on their websites using iframe code. I want this feature to function similar to how YouTube handles it. However, I'm facing an issue where the iframe size generated by YouTube ...

htmliframe

A way to insert a line break in an HTML document without using the <br> tag is

<div id="unique_1" class="unique" style={{display:"flex"}} > <div class="item1">11</div> <div class="item2">77</div> <div class="item3">22</div&g ...

cssreactjsflexboxinline

Choosing an option in react-select causes the page to unexpectedly shift

Encountering a problem with a mobile modal developed using react-select. The selectors are within a div with fixed height and overflow-y: scroll. Upon selecting an option for the 'Choose observer' select, the entire modal briefly jumps down in th ...

javascriptcssreactjsreact-select