What causes a row to spill out of a liquid-filled container along the horizontal axis?

I need to add a footer to my website, but when I do, it causes the content to overflow on the x-axis. Removing the 15px margins in the .row class is not an option for me because that would require me to redo all of the CSS code.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<footer style="margin-top:20px;background-color:lightgrey">
    <div class="container-fluid" style="max-width:100%; margin:0px">
        <div class="row" style="margin:0px;width:100%">
            <div class="col-8" style="padding-bottom:10px !important; padding:40px">
                <h4 style="margin-top: 10px">About Us</h4>
                <p class="text-muted" style="margin-top:7px">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum placerat malesuada leo. Vestibulum rutrum erat non diam feugiat pulvinar.
                    Nam sit amet aliquam nibh. Vestibulum sed consequat elit. Ut sodales justo sit amet iaculis venenatis. Curabitur fermentum magna id nunc ullamcorper consectetur.
                    Cras quis odio quis elit aliquet vulputate in nec nulla. Donec placerat bibendum ligula eget fringilla. Quisque sem ligula, sodales at est vitae, consectetur tempor justo.
                </p>
            </div>
            <div class="col-2" style="padding-bottom:10px !important;padding:40px">
                <h4 style="margin-top: 10px">Quick Links</h4>
                <li style="list-style-type: none;">
                    <a href="/upload" style="margin-bottom:10px">Upload</a>
                </li>
                <li style="list-style-type: none;">
                    <a href="/profile/{{ current_user.user_url_id }}">My Profile</a>
                </li>
                <li style="list-style-type: none;">
                    <a href="/">Home</a>
                </li>
            </div>
            <div class="col-2" style="padding-bottom:10px !important;padding:40px; padding-left: 0px !important">
                <h4 style="margin-top: 10px">Irrelevant Links</h4>
                <li style="list-style-type: none;">
                    <a href="/terms">Terms and Conditions</a>
                </li>
            </div>
        </div>
    </div>
    <div class="container-fluid" style="width:100%">
        <div class="row" style="width:100%;background-color:lightgrey">
            <div class="col-12" style="padding-top:0px !important;padding-bottom: 0px !important;padding:40px">
                <hr>
                <p>© 2019 All Rights Reserved by Our Website</p>
            </div>
        </div>
    </div>
</footer>

htmlcssbootstrap-4overflow

Answer №1

container-fluid was originally removed from Bootstrap 3.0, but re-introduced in version 3.1.1

To solve this issue, you have two options:

Either use the updated version of Bootstrap style sheet,

Check out Demo with New Style Sheet in Fiddle Or manually add the class back in.

The .row class adds a 15px margin to the left and right sides. However, since .container-fluid spans the full width of the screen, the extra margin space can lead to overflow problems.

To resolve this issue, it's necessary to apply padding to the .container-fluid class

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

View Custom container class Demo in Fiddle

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

Display exclusively the provided value

Can someone please help me with printing in PDF style and displaying only the inputted value without showing the textbox or dropdown? Check out this image for reference I would like to achieve something similar, how can I do that? Any assistance would be ...

htmlcss

Mobile-responsive iFrame content is designed to adjust and fit appropriately on

While my iframe is responsive on both mobile and website, I am facing an issue where the content overflows (both overflow X and Y) from the width and height of the iFrame. Here's the scenario: in the mobile view (simulated using Google Chrome to mimi ...

javascripthtmlcssiframe

Toggle visibility of multiple DIVs with identical classes using radio buttons

I'm looking to streamline my use of radio buttons in HTML. How can I implement a single set of radio buttons at the top that will toggle the visibility of all DIVs with the same class on my webpage? <form> <input type="radio" name="csr_sel ...

javascriptjqueryhtmlforms

What is the best way to unselect the "all" selector if one of the inputs is no longer selected?

I am facing an issue with a search filter functionality. When all filters are selected and then deselected individually or together, the "all" button remains selected. I need help in ensuring that when any filter is deselected, the "all" button also gets d ...

javascriptjquerycsshtml

Is it possible to use Prettier in ESLint for formatting Markdown and CSS files?

At the moment, I have Prettier set up with ESLint using the configuration provided in my .eslintrc.json file: { "extends": ["react-app", "plugin:prettier/recommended"] } Everything works smoothly for linting and formatting JavaScript files. However, I ...

cssmarkdowneslintprettier

I am looking to swap out one div for another using jQuery

<div id="main"> <div id="abc"> <div> This div needs to be swapped out </div> </div> <div id="xyz" style="display:none"> <div> This is the replacing div ...

jqueryhtml

Using jQuery's append function, you can dynamically generate a dropdown list in PHP code

One of the challenges I'm facing is related to a button that, when clicked by a user, should append a dropdown list to the HTML. I am using PHP to retrieve data from a database and fill the dropdown list with it. However, upon trying out this code, it ...

phpjqueryhtml

Learn the steps to initiate a Vimeo video by simply clicking on an image

I have successfully implemented some code that works well with YouTube videos, but now I am looking to achieve the same effect with Vimeo videos. Does anyone have suggestions on how to do this? I need to replace the YouTube description with Vimeo, but I&ap ...

javascriptjqueryhtmlajax

The browser prevented the script located at “http://127.0.0.1:5500/assets/platform.png” from loading due to an invalid MIME type of “image/png”

Sorry if this question seems repetitive, but despite extensive searching, I haven't been able to find a solution to my specific problem. I am currently working on developing a basic JavaScript game, but I'm facing challenges when it comes to impo ...

javascripthtmlcanvasmimeliveserver

seeking a solution to simulate a variety of web browsers

Seeking a solution to preview my website on various browsers including IE7 and above, as well as different versions of Firefox. Although I am new to CSS, I previously tried installing software on my PC to assist with this task, which unfortunately caused ...

htmlcssinternet-explorer

Add a CSS class to a dropdown menu option in HTML and JavaScript (JQuery) if it has a specified ID

I am brand new to HTML and JQuery, and I'm struggling with setting a class for my select element when the currently selected option has an ID of "answer". This is crucial for checking the correctness of a multiple choice question. If achieving this i ...

javascriptjqueryhtmlcss

Is there a way to execute Javascript in Django without revealing static files?

When setting up payments on my Django site using Stripe, I realized that the .js file is visible under Sources in the developer tools when inspecting elements on any browser. This presents a potential security risk as anyone can access this file. How can ...

javascripthtmldjangosecuritystatic

The div element continuously wraps its content when the browser size is reduced

Is there a way to prevent a div from wrapping or shifting below when resizing the browser to the left? I want this specific box to remain fixed in its position, causing the user to use the horizontal scroll bar to view it while everything else on the pag ...

htmlcss

Can anyone help me with coloring Devanagiri diacritics in ReactJS?

I am currently working on a ReactJS project and I have come across an issue. I would like for the diacritic of a Devanagiri letter to be displayed in a different color than the letter it is attached to. For example: क + ी make की I was wondering ...

javascripthtmlcssreactjstypescript

The <iframe> generated by Create-React-App often hinders my ability to interact with or modify the application directly, requiring me to remove it using the browser's element editor

After conducting a global installation of create-react-app, I encountered an issue where instead of editing the rendered content directly in the browser while working on a project, there is a mysterious container created around my app. Upon closer examina ...

javascripthtmlreactjsiframecreate-react-app

CSS clearfix doesn't appear to be functioning properly

I've been experimenting with using clearfix instead of the clear both property, but it's not working as expected. Despite following tutorials, the issue persists. How can I troubleshoot this and make it function properly? * { marg ...

cssclearfix

Disappearing CSS Box Shadows

I'm attempting to replicate effect number 2 from a website I found, but I'm running into an issue. Whenever I add more HTML content to the page, the effect disappears. Here is a sample of what I have so far: http://jsfiddle.net/aHrB7/ Here is a ...

htmlcss

Access the value retrieved from a form on the previous page using PHP

I'm struggling with extracting values from radio buttons on a previous page. Currently, my HTML and PHP code works fine with the search bar, which is the first form below. However, I'd like to add radio button filters below the search bar. <s ...

javascriptphpjqueryhtml

Is there a way to locate ComputedStyle elements using Nokogiri?

I am currently using Ruby along with Nokogiri to parse through HTML documents. I am looking to select all nodes that match a CSS class with the style attribute display: none, but the CSS class is unknown in advance. For example: <html> <body&g ...

cssrubynokogiri

Implement various class versions tailored specifically for mobile browsers

While editing a Wordpress theme, I decided to include a content box within Bootstrap's <div class="well">. However, I soon encountered an issue where there was excess space in the content box on desktop view. To address this, I removed the paddi ...

htmlcsswordpresstwitter-bootstrap