Error: Bootstrap 4 Container Size Issue

I am having an issue with the width of my footer when using a Bootstrap 4 "Container". The Container does not cover the entire bottom of the screen as expected. Even changing it to Container-Fluid does not resolve the issue.

For reference, here is a JSFiddle link: https://jsfiddle.net/1Zero3Tech/6p1rg3ub/3/


<div class="container">
        <footer class="footer">
            <div class="row">
                <div class="col-6 text-left">
                    Some Text On The Left
                </div>
                <div class=" col-6 text-right">
                    Some Text On The Right
                </div>
            </div>
        </footer>
    </div>

.footer {
    position: absolute;
    bottom: 0;
    height: 60px;
    line-height: 60px;
    font-weight: 600;
    background-color: yellow;
}
cssbootstrap-4

Answer №1

It is recommended to use the <code>container
or container-fluid class to cover the content area, rather than defining the width.

I have made changes to the HTML structure so that the footer will now be responsible for controlling the width, while the container or container-fluid classes will manage the content area.

If you prefer a sticky footer, I have included a fixed class that makes the footer stick to the bottom of the page. However, you can remove this class if you don't want the footer to be sticky.

.footer {
  background-color: yellow;
  font-weight: 600;
  height: 60px;
  line-height: 60px;
}

.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<footer class="footer fixed">
  <div class="container-fluid">
    <div class="row">
      <div class="col-6 text-left">
        Some Text On The Left
      </div>
      <div class=" col-6 text-right">
        Some Text On The Right
      </div>
    </div>
  </div>
</footer>

Answer №2

Verified statements from j08691 and Paulie_D. Exclude position: absolute, and introduce negative margins on the main .container. Also consider testing the feasibility of making the primary .container stay fixed at the bottom.

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 mixin for a box-shadow value of none in LESS CSS

I'm encountering a challenge with implementing the box-shadow mixin in LESS css. Here's the mixin for box-shadow: .boxShadow (@x, @y, @blur, @spread: 0, @alpha) { -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); -moz-box-s ...

cssless

Utilizing an Asterisk/Wildcard in the Name of a CSS Selector

Have you ever encountered an advanced CSS rule that utilizes an asterisk in the selector name? I am currently working with Bootstrap and have multiple divs nested within a parent div like this: <div class="example"> <div class="col-sm-1"> ...

csstwitter-bootstrapcss-selectors

Discovered two instances of duplicate IDs within the elements

When using the same id names in two different form tags, I am encountering the following warnings: [DOM] Found 2 elements with non-unique id Below is a portion of my HTML code: <div class="modal-dialog"> <form action="" ...

javascripthtmljquerybootstrap-4html5-video

I'm looking to replicate the header design of the classic olx website. Is there anyone who can guide me on how to extend the search bar to match the original image?

Could use some help stretching my search input field to match the original picture. Any tips or suggestions on how to achieve this? I'm utilizing bootstrap and react.js for this project. Uploaded are the original image and my resulting image for compa ...

htmlcssinput

Can CSS be used to create curved dashed lines?

Is it possible to achieve dashed lines similar to the ones highlighted in the images below using only CSS? I have a responsive web page built with Bootstrap, and I need the dashed lines to adjust accordingly when the window width changes. https://i.sstat ...

javascripthtmlcsstwitter-bootstrap

My jquery filter is not functioning properly

I need help making the active class work on each category when clicked, shifting to the next one. I've tried implementing it but no luck so far. $(document).ready(function() { $('.list-inline-item').click(function() { const value = ...

htmljquerycss

The offcanvas menu in the NextJS Tailwind website does not handle hover or tap events properly when outside of the parent dimensions

My header includes an off-canvas menu that slides in from the right side. Everything seems to be working fine, except for one issue: when the menu is open and visible, the mouse and touch events pass through it to the content underneath. Check out the cod ...

cssreactjsnext.jstailwind-cssoff-canvas-menu

Is there a way to automatically scroll vertically to a specific line in HTML?

Trying to explain this is a bit tricky. I am looking to add an element to the HTML that prompts the browser to scroll vertically to its location automatically when loaded, similar to an anchor. So: | visible area | | content html | | content html | ...

javascriptjqueryhtmlcss

Adjustable / consistent box height

For hours, I've been attempting to make some divs the same height. Check out my JSfiddle here: https://jsfiddle.net/4cj5LbLs/15/ I experimented with using display: table; in the parent element and either display: table-cell; or display: table-colum ...

htmlcsslayout

Steps for dynamically loading the content of a Bootstrap 4 Modal

I am currently in the process of developing a website that will showcase a wide range of images. The design is set up as a landing page with all content contained within the main HTML page - there is only an index.html file for now. This website will serv ...

javascriptphpjqueryhtmlbootstrap-4

Ways to troubleshoot the CSS padding issue

I've been wrestling with this landing page for the past day and I just can't seem to get the form section right. Take a look at this link! The form at the bottom of the page is all over the place. Below is the CSS snippet that I have been using ...

htmlcssformscss-float

Modifying SVG outline colors using CSS

Why is the CSS color: #ffffff not applying to my SVG? This is how it currently looks: https://i.sstatic.net/qh7ng.png This is how I want it to look: https://i.sstatic.net/6tLo5.png Surprisingly, changing currentColor to #ffffff in the SVG itself works ...

htmlcsssvgsveltebootstrap-5

The loading bar animation doesn't begin at a blank slate

I'm currently working on a project that utilizes Django for the backend and Bootstrap for the frontend. I have to admit, I am quite inexperienced when it comes to front-end development; JavaScript seems like magic to me. One of the key features I nee ...

javascriptbootstrap-4

I attempted to initiate a transition using JavaScript, but unfortunately it failed to execute

Hey there! I'm just starting out with HTML, CSS, and JavaScript, and I've been trying to make a transition work using JavaScript. The element I'm working with is a "menu-icon" which is a span tag with a small image nested inside another div ...

javascriptcsscss-transitionstransform

Adjust the color of the entire modal

I'm working with a react native modal and encountering an issue where the backgroundColor I apply is only showing at the top of the modal. How can I ensure that the color fills the entire modal view? Any suggestions on how to fix this problem and mak ...

javascriptcsstypescriptreact-nativereact-native-modal

Creating CSS-in-JS Components in React JS without External Stylesheet interference

import React, { Component } from "react"; import './navbar.css' class NavBar extends Component { render() { return ( <div> navbar content </div> ); } } export default NavBar; If I were to ...

cssreactjs

The Troubles of Top Margins in CSS

Hey there, I'm a bit stumped on this issue. I've been trying to apply a 10px top margin to a paragraph inside a div, but instead of creating the space I want between elements, it just seems to push the whole containing div down by 10px. Here are ...

phphtmlcss

Angular 4 Bootstrap 4 Collapsible Navigation Bar

Struggling for a while now trying to achieve the exact functionality I desire. Within my Angular Universal App, there is a vertical navigation bar at the top that I want to make responsive for mobile devices. I am utilizing Bootstrap 4 Alpha 6 and ngx-boot ...

angularnavbootstrap-4

Proper positioning of popover ensures it does not exceed the boundaries of its parent

In my ngprime table, the header row contains a column field with a popover set to display at the top. However, it is covering the actual field instead of appearing above it. This issue arises because the popover cannot display outside of its parent div, ca ...

cssangularprimeng

Why are my custom material UI styles not showing up after the deployment?

I was attempting to customize a material UI element, specifically trying to increase the size of the icon. Below is the style code I used: export const Icon = styled(Box)({ color: "gray", position: "relative", "& ...

cssreactjsmaterial-ui