Space within a receptacle

As a newcomer to bootstrap5, I am encountering whitespace issues on the left side of my screen. While everything looks fine in full-screen mode, the whitespace around the image persists when I test responsiveness. https://i.sstatic.net/gZTq5.jpg

Despite trying various solutions such as adjusting overflow and setting height and width, the whitespace problem remains unsolved. Any assistance would be greatly appreciated, especially since I am still getting acquainted with Bootstrap.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="15777a7a61666167746555203b263b25387479657d7424">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="stylesheet" href="supertest.css">

</head>
<body>
    <div class="container-fluid g-0 m-0 p-0 ">
        <div class="row g-0">
            <div class="col-8 g-0 m-0 p-0">
                <img src="backgroundleft.jpg" alt="leftbg" class="img-fluid h-100 w-100">
            </div>

            <div class="col-4 overflow-hidden d-flex flex-column">
            
                <div class="text-center pt-5 mb-2">
                <img src="PUPLogo.png" alt="" class="w-25">
                </div>
                <h1 class="text-center">Reg<span>iTech</span></h1>
                <h2 class="px-5">Login</h2>
                <form>
                    <div class="form-group px-5 mb-3">
                      <input type="text" class="form-control" id="username" placeholder="Username">
                    </div>
                    <div class="form-group px-5">
                      <input type="password" class="form-control" id="password" placeholder="Password">
                    </div>
                    <div class="d-flex justify-content-center mt-3">
                    <button type="submit" class="btn w-50 ">Submit</button>
                    </div>
                  </form>

                  <div class="mt-3 text-center">
                    don't have an account yet ?
                  </div>
                <div class="row text-center mt-auto">
                    <div class="copyright">
                        Copyright@2022 | RegiTech | Developed DICT 3-1
                        </div>
                </div>
                </div>
                </div>
            </div>
        </div>





    </div>

    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="54363b3b20272026352414617a677a64793538243c3565">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>

htmlcssbootstrap-5whitespacecol

Answer №1

To enhance the responsiveness of the container, consider removing the image element and utilizing CSS to set it as a background image instead. By incorporating object-fit: cover;, you can achieve a scalable background image that adjusts accordingly.

Check out an example here: https://jsfiddle.net/fatchild/r70gLwu3/53/

The concept is to ensure the container does not display any white space by setting the background image of the container itself. The trick is to make the image 100% width and height of the viewport. This method may lead to distortion if the image is forced to fit the container's dimensions. To prevent this, the object-fit property ensures that the image maintains its aspect ratio without distorting or creating gaps.

  1. Remove the img element
  2. Add a new id attribute to the container element with id="bg-img"
  3. Add specific declarations for the new ID
#bg-img {
   object-fit: cover;
   background-image: url("http://uniacco.com/blog/wp-content/uploads/2019/12/shutterstock_1062917057.jpg");
   background-repeat: no-repeat;
   background-position: center;
   height: 100vh;
}

Note that local resources may not be visible on other devices. Therefore, when sharing examples, use random images from the internet to ensure they render correctly on all devices.

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

Integrate the user input data into a modal window using Bootstrap

Looking for a solution to a problem, I'm trying to implement a system on my website that sends messages to registered users. After creating a form with necessary information, clicking the send button should display a preview of the message before send ...

phphtmltwitter-bootstrap

The watermark feature in HTML may not appear when printed on every page

I'm facing an issue with adding a watermark style. The watermark displays only on the first page when attempting to print in Chrome. It works perfectly in Firefox and IE. <style type="text/css"> #watermark { color: #d0d0d0; font-size: 90pt; ...

javascripthtmlcss

Tips for wrapping text around an image using Bootstrap 5

I am having trouble getting my text to wrap around an image using the Bootstrap 5 grid system. I've attempted to use 'float: right' on the image, but it hasn't produced the desired result. The text should flow naturally around the imag ...

htmlcssbootstrap-5

Anti-aliasing with @font-face in Internet Explorer versions 7 through 9

Having some trouble getting @font-face to display correctly in IE, and I haven't found a solution yet. I've looked into this resource: but unfortunately it didn't work on my Windows 7 IE. Does anyone have a better suggestion? ...

cssfont-face

How can I customize the color of the title and property value in Handlebars?

Here is the list I am working with: <li>Equipment Area:{{equipment_area}}</li> <li>Equipment Type: {{equipment_type}}</li> <li>Manufacturer: {{manufacturer}}</li> <li>Model Number: {{model_number}}</li> < ...

htmlcssnode.jshandlebars.js

When printing a table in HTML/CSS, only the header will appear on the empty page

I'm struggling to figure out why there are two pages, one blank and one with just the table header in this document. The content looks fine otherwise, but I can't seem to remove these extra pages. Here is the full HTML code: <!DOCTYPE html& ...

htmlcssprinting

What methods can be used to modify the appearance of the cursor depending on its position?

Is there a way to change the cursor to a left arrow when on the left half of the screen and switch it to a right arrow when on the right half, using JavaScript? I am trying to achieve something similar to what is shown on this website. I attempted to acco ...

javascripthtmlcss

The placement of the div only shifts in Firefox

Looking to place a small 25px - 25px image at the end of a line of text? Using a DIV (re1DOC) to position the element can make it easier. However, the issue arises when the element displays correctly in IE & Chrome, but not in Firefox. The text shifts slig ...

htmlcss

Implement horizontal scrolling feature to code container

One cool feature on my blog is the codebox where I can insert snippets of HTML, CSS, and Javascript codes. Here's an example of how my CSS code looks: .post blockquote { background-image: url("https://dl.dropbox.com/u/76401970/All%20Blogger%20Tr ...

cssscrollblogger

Concealed Content Within Drawer Navigation

When using the Material UI permanent drawer component in different pages, I encountered an issue where the main content was getting hidden behind the drawer's toolbar and sidebar. I am unsure how to fix this problem. It seems like a styling issue, bu ...

javascriptcssreactjstypescriptmaterial-ui

How to optimize PHP scripts by using a single MySQL query instead of loops?

Below are the tables I am working with... Locations __________________________________________________________ ID Location Region Country 1 Newmarket Ontario Canada 2 Barrie ...

phphtmlmysqlsql

What is the best way to assign a jQuery variable to a PHP variable?

After spending some time searching and working on it, I still can't figure out the answer to this straightforward question. Here is the code I have been struggling with. <script> function calculate() { var total = (parseInt($('#stude ...

htmlajaxjquery

Is there a way to include an instance variable as a CSS rule in Rails?

Assume I have the following ActiveRecord class: ......... store :skin_properties, accessors: [ :background_color, :font_size, :font_family, :color ] ......... This class saves values in the format shown below: {"background_color"=> ...

cssruby-on-railsruby

Unusual behavior of diagonal viewBox in SVG

Trying to understand how the viewBox attribute works in SVG, but the code below is confusing me. Can someone please explain if this is a bug or the expected behavior of SVG? I can't seem to figure out what I'm doing wrong... <svg class="s ...

csssvgpositionviewboxsizing

How can one transfer information from a client to a server and complete a form using JavaScript?

Can the information be transferred from a client to the server using just JS, then fill out a form on the server, and finally redirect the client to view a pre-filled form? I am considering utilizing AJAX to send a JSON object, but unsure if it will be s ...

javascriptphphtmlajaxjson

Creating a smaller (child) div within a larger div (parent) using Bootstrap 5

I am looking to use bootstrap5 to create a smaller div in the bottom right corner of a parent div. Both divs need to be responsive as they will contain video content. According to the Bootstrap Utilities Docs, this can be achieved with the following code: ...

twitter-bootstrapbootstrap-5

Implementing Jquery to Repurpose a Function Numerous Times Using a Single Dynamic Value

Important: I have provided a functional example of the page on my website, currently only functioning for the DayZ section. Check it out here Update: Below is the HTML code for the redditHeader click event <div class="redditHeader grey3"> & ...

javascriptphpjqueryhtmljson

Sending JSON Data from C# to External JavaScript File without Using a Web Server

Trying to transfer JSON data from a C# (winforms) application to a static HTML/JavaScript file for canvas drawing without the need for a web server. Keeping the HTML file unhosted is preferred. Without involving a server, passing data through 'get&ap ...

javascriptc#jqueryjsonhtml

The Bootstrap glyphicon content breaks when using ASP.NET MVC minification

When working with asp.net, I noticed that minification tends to disrupt the display of bootstrap UTF symbols. For example, here is what it looks like in the original file: .glyphicon-edit:before { content: "\e065"; } And here is how it appears in ...

css.netasp.net-mvctwitter-bootstrapbundling-and-minification

Learn how to utilize interpolation within an *ngIf statement in Angular 2 in order to access local template

Consider the following scenario; <div *ngFor="item of items; let i = index;"> <div *ngIf="variable{{i}}">show if variable{{i}} is true</div> </div> Suppose I have variables named "variable0", "variable1",... Is there a way to ac ...

javascripthtmlangular