Excess content from the Bootstrap container is spilling over and

Encountered an issue while developing a page using bootstrap5 relating to the positioning of the footer and main content container. Everything was functioning correctly until the addition of the footer:

Prior to adding the footer: https://i.sstatic.net/80gzR.png

After adding the footer: https://i.sstatic.net/2aoUJ.png

Including a snippet of simplified code here for reference (images and some styles might not be displayed properly):

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arimo&display=swap');

:root {
    --top-header-top-position: 0rem;
    --header-height: 3.5rem;
    ...
    };
};

*,
::before,
::after {
    box-sizing: border-box
}

.modal-backdrop {
...
/* Inserted CSS continues */
...
                </h3>
                    <div class="d-flex">
                        <a href="" class="text-white" style="text-decoration: none">Terms of service</a>
                    </div>
                    <div class="d-flex">
                        <a href="" class="text-white" style="text-decoration: none">Privacy policy</a>
                    </div>
                    <div class="d-flex position-absolute bottom-0 start-2">
                        <span>©2022 Vegaz All rights reserved</span>
                    </div>
                </div>
              
            </div>
        </div>
    
    </footer>
htmlcssfooterbootstrap-5

Answer №1

By setting a fixed height for the main containers using classes like height-100 and h-100, you are ensuring that they will always be a certain size, regardless of the actual content within them. This can lead to overflow issues where the content spills out beyond the confines of the container and into elements that follow it, such as the footer.

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

Incorrect synchronization in the SVG arrow animation

How come the arrow doesn't start moving at the same time as the line? Is there a synchronization issue? I want the arrow to begin its journey simultaneously with the line. .container{ width:100%; padding:0px; background-color: black; } .squig ...

htmlcsssvg-animate

I am experiencing issues with the interpolation of my SASS variables when they are placed into

I am relatively new to the Nuxt ecosystem and I must say it's an awesome package that really simplifies our lives. Currently, I am attempting to incorporate sass into my project. Despite following the steps outlined in the documentation, my build is ...

cssvue.jssassnuxt.js

What is the process for specifying the content type as application/json in an Ajax request?

Do you have a smart contract named GovtContract that functions properly when utilizing curl commands? $curl -X POST -H "Content-Type: application/json" localhost:3000/govtcontract/set -d '{"value":"5"}' | jq $curl -X GET -H ...

jqueryhtmljsonnode.jsajax

Changing the position of the icon in the bootstrap validator

I'm currently attempting to validate form fields in a web project. The goal is to achieve a specific result, similar to the image below: https://i.stack.imgur.com/EVeJf.png While I have made progress with a simple solution that almost meets the requi ...

javascriptjquerycsstwitter-bootstrapbootstrapvalidator

Managing selected ticket IDs in a table with AngularJS

I have a table that includes options for navigating to the next and previous pages using corresponding buttons. When I trigger actions for moving to the previous or next page (via controller methods), I store the IDs of checked tickets in an array $scope. ...

javascripthtmlangularjs

Safari browser is experiencing issues with the custom file upload script

My custom upload script allows users to easily select images for upload by clicking or dragging them into the designated box. A preview of the chosen image should appear, and this functionality works smoothly in Firefox and Chrome. However, I've encou ...

javascripthtmlcssfile-uploadinput

Using Column CSS Property with Google Maps in Chrome: A Potential Bug?

I'm facing an interesting issue and I could use some help understanding or fixing it. It seems like there might be a bug or a solution to this problem. I am currently working on a layout using the CSS3 property columns. Everything looks fine in Firefo ...

htmlcssgoogle-mapsgoogle-chrome

What is the best way to leverage environment variables in my CSS within the context of Next.js for defining the primary color scheme?

Is there a way to use an environment variable to specify the base color in my CSS? I am working with NEXTJS. All of my colors are defined as variables in my globals.css: @layer base { :root { ... --primary: #0096d0; --primary-bright: ...

cssnext.jscolorsenvironment-variablescss-variables

How can I make an absolutely positioned div slide down from a specific area on the page using jQuery's slideDown() function?

I have a website project in progress where the main image on the homepage is of a house with windows and a door. The idea is that when a user clicks on a window, a <div> should appear with some text. Similarly, clicking on the door should trigger a & ...

jquerycsshtmlcss-positionslidedown

Toggle the visibility of multiple divs by clicking on other divs

I have implemented a script on my webpage to toggle the visibility of certain divs by clicking on anchor tags. I found a solution that seems perfect for my needs, but unfortunately it is not working when I try to integrate it into my own website. I suspec ...

javascriptjqueryhtml

Implementing a SetTimeout Function in HTML

Is there a way to delay calling the mouseHoverTableRow() function until after hovering on tr for 3 seconds? I only want to call this function if the hover duration is at least 3 seconds, as it triggers an API request. How can I achieve this? <tr *ngF ...

htmlangular

The CSS design morphs as I adjust the browser size. Despite my limited coding experience of just a few weeks, I've encountered a challenging obstacle

Hi there, I've been searching on W3 and various other sources but haven't found a solution to my problem. I have managed to create the layout I want, however, it starts falling apart when I resize the browser window. I'm relatively new to co ...

htmlcss

Adjust the vertical scaling of a container in CSS Grid to maintain aspect ratio similar to an <img>

I am attempting to recreate a demonstration where the house image scales as the viewport height decreases. However, instead of using an <img>, I would like to use a container that also includes absolutely positioned content (unable to provide all the ...

htmlcsscss-grid

Strategies for patiently waiting for an object to appear before loading the HTML

After logging into my service, I download data from a REST API, and based on that data, I display certain tabs. However, I am experiencing issues with loading the HTML content once the data has been retrieved. The ngif directive at the beginning of the H ...

htmlangulartypescript

Toggle the visibility of images with input radio buttons

Explanation I am attempting to display an image and hide the others based on a radio input selection. It works without using label, but when I add label, it does not work properly. The issue may be with eq($(this).index()) as it ends up selecting a differ ...

javascriptjqueryhtmlcss

Alter the position of the anchor object in the center using JavaScript upon page load

When my page loads, I want to automatically jump to a specific anchor tag and ensure that the anchor object is centered in the window. Initially, I implemented a basic function to achieve this: <body onload="goToAnchor();"> <script type="text/ja ...

javascriptjquerycssanchoronload

Upon executing `$('div')`, an empty array is returned

My goal is to retrieve all the div classes on a page using jQuery $('div');. However, the page does not natively support jQuery, so I am loading it through external links until $ === jQuery evaluates to true. Even on Stack Overflow where jQuery ...

javascriptjqueryhtmlgoogle-chrome

"Utilizing Bootstrap 5 Icons with the Power of Pseudo Elements

Back when Bootstrap was utilizing Glyphicons, it was possible to switch your font to Glyphicons Halflings and then utilize the ::before pseudo element to show a unicode character before each list item. This unicode character tended to look more pleasing th ...

bootstrap-5

Rearrange items in a display: contents wrapper using CSS Grid

I'm having trouble positioning descendants in a root grid while they are enclosed in a container with display: contents. The issue I am facing is that one element is not being correctly placed within the grid: .wrapper { width: 80ch; margin: a ...

htmlcsscss-grid

JavaScript code for displaying mouse positions and Geolocation using OpenLayers, along with a Geocodezip demonstration

I have attempted to merge Geolocation and Mouse Position Display (longitude/latitude; outside of map) from the OpenLayers and geocodezip site, but I am facing issues. The Mouse Position Display works correctly, however, Geolocation does not seem to work. U ...

javascripthtmlcssopenlayers