issue with Bootstrap footer causing a horizontal line to appear

Check out this straightforward Bootstrap footer grid example here: 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 <!-- foooter -->
    <footer style="background-color: #0198d1;">
    <div class="row">
    <div class="col-4" style="background-color: #0198d1;">
    <span>test</span>
    </div>
    <div class="col-4 text-center" style="background-color: #0198d1;">
    <span>test</span>
    </div>
    <div class="col-4 text-right" style="background-color: #0198d1;">
    <span>test</span>
    </div>
    </div>
    </footer>
    <!-- END foooter -->

I'm puzzled by why it triggers the horizontal scrollbar in the browser and seeking solutions to remove it.

htmlcssbootstrap-4grid

Answer №1

Another alternative was also discovered 

<div class="container-fluid" >
...
</div>

Answer №2

The reason for the issue is that the width of the row is not declared. To resolve this, I have included col-12 to the row and adjusted the other div elements accordingly so they fit within their parent div without overflowing.
You can implement it like this:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<footer class="col-12">
  <div style="background-color: #0198d1;" class="row">
                <div class="col-4" style="background-color: #0198d1;">      <span>test</span>
                </div>
                <div class="col-4 text-center" style="background-color: #0198d1;">
                    <span >test</span>
                </div>
                <div class="col-4 text-right" style="background-color: #0198d1;">
                    <span>test</span>
                </div>
        </div>
     </footer>

Answer №3

Update the negative margin within <div class="row"> to 0px

Issue:

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px; 
    margin-left: -15px; 
}

Resolution

.row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: 0px!important; 
        margin-left:  0px!important; 
    }

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

Flashing Dropdown Navigation Bar on Internet Explorer and Firefox

Hey there! I have been working with a drop-down menu on various websites without any issues, but for some reason, it's acting up in this specific application (). The menu seems to flicker and is not properly positioned in Firefox and IE8-10, although ...

jquerycssdrop-down-menunavigation

Troubleshooting problem with CSS scaling on smartphones

I'm attempting to create a website (the first one I've ever designed) dedicated to my girlfriend's cat. However, when viewed on a mobile device, it doesn't look good. I've made an effort to adjust the meta viewport tag, but it does ...

htmlcss

How can I choose the link with specific text using XPath?

I attempted to utilize the following XPath: //*[contains(normalize-space(text()),'Jira')] I also tested: //*[contains(text(),'Jira')] In this specific HTML instance, there are spaces surrounding the text "Jira". This is causing an i ...

htmlxmlseleniumxpathselenium-webdriver

Creating a navigation menu that uses images to simulate borders instead of using traditional border styling in CSS

My goal is to create a menu with a design like this: | one | two | three | four| Through CSS and borders, it's possible to achieve a similar look by: .myContainer > ul > li{ border-right: 1px solid purple; } .myContainer > ul > li ...

css

What could be causing my difficulty in locating an HTML element using jQuery/JS string interpolation?

In my project, I have a set of div blocks each identified by a unique numerical id. For instance: https://i.sstatic.net/lYod8.png One of the tasks in my project is to select the 29th element following a specific chosen element. For example, if I choose t ...

javascriptjqueryhtmlcss

Struggling with passing values to onClickHandler because of MUI

I'm looking to create a category navigation menu that includes icons and labels. I attempted to do this using Chips: {categories.map((category) => ( <Chip key={category._id} ...

javascriptcssreactjsmaterial-ui

AngularJS child element hover effect on border

My directives have a hierarchical relationship and can be nested quite deeply. I want to add a border when hovering over one of the directives. When using :hover {}, the border appears on both the child and parent elements. Is there a more appropriate or ...

angularjscss

Preventing Unwanted Scroll with jQuery

I'm currently working on a project where I have several description blocks that are meant to fade in when the corresponding image is clicked. The fading effect works fine, but there's an issue with the page scrolling up each time a new image is c ...

javascriptjqueryhtmlcss

Utilizing Javascript to Open a New Tab from Drupal

I'm attempting to trigger the opening of a new tab when a specific menu link is clicked within a Drupal website. My initial approach was to incorporate JavaScript directly into the content of the page, but unfortunately this method has not been succes ...

javascriptjqueryhtmldrupaldrupal-7

unable to retrieve correct value upon click

Within my setup, there exists a slider with accompanying left and right buttons. Two event handlers are present for each button as demonstrated in the code below. Upon clicking and allowing the transition to complete its process, everything functions corr ...

javascriptjqueryhtml

I am currently implementing pagination for my data and it is functioning properly. However, I have noticed that when I search for specific data, it always appears on

My issue arises when I attempt to paginate my data and then search for specific information. The problem is that even if I am on page 3, the search results always display on page 1, making it difficult for me to locate the relevant data. What I want is for ...

javascripthtmlreactjsreact-nativereact-hooks

Namespace SyndicationElementExtension refers to

I'm trying to achieve the following output: <someNSalias:full-text>Good news everyone!</someNSalias:full-text> This is the code I have written: var element = new SyndicationElementExtension(field.Name, field.HasNamespace ? RssNs : strin ...

c#html.netrssrss2

Reloading PHP code within a container

I have implemented a script that refreshes my messages.php within a div every 60 seconds using the following code: <script> jQuery().ready(function(){ setInterval("getResult()",60000); }); function getResult(){ jQuery.post("messages.php",function ...

javascriptphpjqueryhtml

Tips for positioning text beneath an image in a visually appealing way

Looking to align text under a picture, like this: Previously, I attempted it this way, which was incorrect: This is my code: .test{ display:inline-block; } .test img{ display:block; } <span class="test"> <img src="http://cdn.sstatic. ...

htmlcss

Steps for showcasing the data entered in the input box

I am looking to enhance my skills in working with Angular and JavaScript. I would greatly appreciate any feedback on the issue I am facing here. My goal is for the text box input to display: "hello {name} , would you like to play a game? However, curr ...

javascripthtmlangularjs

Restricting thumbnail scrolling within the visible area in a jQuery/CSS Gallery/Slideshow

Is it possible to create a gallery slideshow feature where the selected thumbnail's image source will be displayed in the main image container? I believe I can implement that part successfully. Currently, my challenge is defining the thumbnail scroll ...

jquerycssgallery

Common cross-browser errors to watch for in websites

I've been keeping up with the latest CSS3 elements such as box-shadow and text-shadow: -moz-box-shadow: 10px 10px 5px #888; -webkit-box-shadow: 10px 10px 5px #888; However, in your experience, have you come across any common pitfalls or gotchas (rel ...

htmlcssbrowser

How to prevent the back button from functioning in Android devices

It's so frustrating always hitting a dead end and I really need a clear answer. How can I disable the hardware back button on my app? And where should I input the code to disable it? I simply want users of my app to navigate within the app without usi ...

androidjqueryhtmlcordova

Altering the appearance of the xy axis on a line chart in Chart.js version 4 by either removing it entirely or adjusting its color

I am facing an issue with my chart.js code where I am trying to remove both the axis lines from the graph but still display the grids (NOTE) ` const MAINCHARTCANVAS = document.querySelector(".main-chart") new Chart(MAINCHARTCANVAS, { type: 'line&apo ...

javascripthtmlcsschartschart.js

Desktop Safari displays Font-awesome icons with trimmed corners using a border-radius of 50%

While working on incorporating font awesome share icons into my project, I encountered an issue with getting a circle around them. After exploring various approaches, I opted for a CSS solution. Using React FontAwesome posed some challenges that led me to ...

javascriptcssreactjsborderfont-awesome