The content is overlapping with the Bootstrap footer

Hello everyone, I am new to the world of web development and currently working on creating my own website. However, I have run into a problem with the footer that I just can't seem to solve. I am using Bootstrap for styling, which I thought was great, but now I am facing an issue. When I "ZOOM IN" or resize the page to the iPad Pro dimensions, my content is overlapping with the footer and it's causing quite a scary sight. I've scoured the entire internet looking for a solution, but unfortunately, I haven't been able to find one yet. Can anyone please lend me a helping hand?

body {
    font-family: 'Poppins', sans-serif;
}

... (CSS code continues) ...

<!DOCTYPE html>
<html lang="en">
   <head>
      ... (HTML head section contents go here) ...
   </head>
   <body>
      <nav class="navbar navbar-expand-lg justify-content-end">
         ... (Navbar content and links go here) ...
      </nav>
      <div class="container full-height content">
         {% block content %}{% endblock %}
      </div>
      <footer class="site-footer mb-5">
         ... (Footer content and links go here) ...
      </footer>
   </body>
</html>

htmlcssbootstrap-4

Answer №1

To ensure your footer stays at the bottom without any content overlapping it, here is what you should do:

Wrap everything in the main container like this:

<div class="main">
   <nav class="navbar">...</nav>
   <div class="container">...</div>
   <footer class="site-footer">...</footer>
</div>

Here are the CSS rules for the .main:

.main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

To stretch the main container, remove the rule height: calc(100vh - 413px) and add the rule flex: 1 0 auto to .container.full-height. Like so:

.container.full-height {
    /*height: calc(100vh - 413px);*/
    flex: 1 0 auto;    
}

Then, push the footer down by adding the rule flex: 0 0 auto to .site-footer. Just like this:

.site-footer {
    ...
    flex: 0 0 auto;
}

Make sure you include the provided CSS and HTML structure as indicated above for proper layout and alignment.

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

Creating a Date Computation Tool that Adds Additional Days to a Given Date

I have a challenge where Date 0 represents the start date, Date 1 is the result date after adding a certain number of days (NDays). I am looking for help in JavaScript to calculate Date0 + NDays = Date1. Please assist me as my coding knowledge is quite l ...

javascripthtml

What is the best way to incorporate hyperlinks or text color modifications to a variable string in JavaScript?

I have a website that features a random on-load slideshow with text displayed in div containers for each slide. I am looking to enhance the functionality by adding links or changing the color of specific words within the text. You can view my current progr ...

javascriptjquerycssvariables

Watching a video play within a slider and transitioning seamlessly to an image once the video ends

I am currently facing an issue with a video playing inside a HeroCarousel slider. Before the slider, there is an image and after the slider, there is another image. This is my code: <div data-time="8000" data-prev-src="/media/splash/slider-left.png" ...

javascriptjqueryhtmlvideo

Ensuring that the two columns in a responsive grid have equal heights is essential for maintaining a

I am currently working on a responsive website with a main content area (.content-wrapper) and a sidebar area (.search-listing). My goal is to make sure that both columns have the same height. I attempted to achieve this using the following jQuery code: j ...

jqueryhtmlcss

How to adjust animation timing for various elements during a CSS 3D flip with a delay?

Here is a CSS flip setup that I have been working on in this fiddle: http://jsfiddle.net/6r82fzk6/ The Goal: I am trying to achieve a slower transition for the back element compared to everything else. The idea is to have the child element of the back fac ...

cssanimation3dtransition

Having difficulty incorporating a video into the background

After searching online and attempting two different methods, I am still unable to achieve the desired result. I want a video to cover the entire background of my webpage. Here is what I have tried: CSS - video#bgvid { position: fixed; top: 50%; ...

htmlcssvideobackground

Is there an issue with this bootstrap 5.2 tab code?

I am really struggling to figure this out. I've been trying to get bootstrap tabs to work, but for some reason, my custom tabs are not functioning properly. I must be overlooking something very simple: <ul class="nav nav-tabs" id=&quo ...

htmlbootstrap-5

Capturing information from a modifiable table using Javascript

Creating an HTML Editable table with the property CONTENTEDITABLE, each TD has a unique ID (even though it's a long process and I only have basic JS knowledge) to keep track of the information inside. The table is wrapped by a form. At the end of the ...

javascripthtmljsonfirebasedom-events

Use the double data type in MySQL to handle null values when blank form fields are submitted

Currently, I am facing an issue with a form that I have created to update a mysql database using PHP and HTML. In my MySQL database, I have set the data type as double (3,1). The problem arises when I submit data to the database and leave some form input f ...

htmlmysqlformsnulldouble

problem encountered when converting SVG HTML into SVG paths

Recently, I came across an interesting SVG file depicting a question mark enclosed in a circle. Intrigued by its design, I wanted to extract the paths from this SVG image so that I could integrate it directly into my codebase. Following some online tutoria ...

htmlcsssvggimp

Instant Access to a Precise Slide

Using a slider named mySlider or SL_Slider, which is powered by the MooTools library. When on the page with the slider, there is a simple script for the href to call the appropriate slide: <a href="javascript:mySlider.numPress(3);">link</a> ...

javascripthtmlmootools

Can you explain the connection between CSS and WebKit?

Lately, the tag "webkit" has caught my eye on various questions. These inquiries typically pertain to web-related topics like CSS, jQuery, website layouts, and cross-browser compatibility problems... But what exactly is "webkit" and how does it interact w ...

csswebkitcross-browserrendering-engine

Ways to display a series of images side by side to fill the entire width consistently

I need a solution to display multiple images in a box, all set to the same height and width of 154px x 125px. While this can be achieved, the issue arises when there isn't enough space for the final image, leaving blank areas. Is there a way to make t ...

htmlcssresponsive-design

How to play audio with a source path that includes the special character "%" in JavaScript

Having an issue with playing an audio file that has '%' in its name. I've tried using the tag <audio src="test%320.mp3" controls></audio>, but it seems like the file is not being found when I try to play it. Can anyone ...

javascripthtmlaudio

Incorporate various WebGrids with distinct styles on a single page without repetition

Essentially, I have my code within the view and I'm trying to avoid duplicating WebGrid instances. Model Overview public class UsersWithDetailsModels { public IEnumerable<ApplicationUser> ApplicationUsers { get; set; } public IEnumerab ...

htmlasp.netasp.net-mvcrazorwebgrid

Top method for customizing w2ui grid appearance

While utilizing the w2ui grid to showcase data in a table, I've found it to be quite effective. However, I'm not entirely happy with the appearance of the table itself. Are there any methods available for styling the table that don't involve ...

cssw2ui

The inclusion of the "was-validated" class did not initiate the validation process in Bootstrap

I am attempting to utilize the new validation feature in Bootstrap 4, but I am facing an issue with getting the popover to display when submitting with a validation error. Here is my form: <form id="runModelForm" class="needs-validation" novalidate> ...

jqueryvalidationbootstrap-4

Having trouble adding flexslider before a div element with jQuery

Hey there! I recently got flexslider from woothemes.com. The page structure I'm working with looks something like this: <div class="parentdiv anotherdiv"> <div class="child-div1">some buttons here</div> <div class="child-div2"& ...

javascriptjqueryhtmlcssflexslider

Guide on adding space between rows in a table using HTML and Bootstrap 5

In the current table containing my content, it appears like this: https://i.sstatic.net/Mm7qT.png. I wish to add space between each row to create distinct separation and achieve a look similar to this: https://i.sstatic.net/ARgR1.png I experimented with ...

htmlcssdatatablesbootstrap-5

Firefox: Issue with CSS aspect ratio not being supported in Firefox, unlike Chrome which works correctly

For my application, I am utilizing the display: grid property. My goal is to have the grid items always maintain a square shape by applying an aspect ratio of 1/1. While this works perfectly in Chrome, Firefox seems to ignore the aspect ratio code. Even co ...

cssreactjsfirefoxsassstyled-components