Issue with horizontal scrolling in Bootstrap's .container > .row

I've explored various solutions for the same issue:

  1. 2013 Stackoverflow Question
  2. 2013 GitHub Problem

However, none of them seem to be effective for me except for the less than ideal workaround of 

body { overflow-x: hidden;}

Despite downloading the latest version of Bootstrap (v3.3.4) from their website which includes the .container-fluid class meant to address this issue, I am still encountering the problem. This led me to wonder if others have also experienced a similar issue. The problem arises on my localhost (using MAMP), and I have yet to test it on a production server due to my confusion about the persistent nature of this problem. Hence, I am reaching out through this question as previous concerns were raised years ago.

My code arrangement is quite basic (utilizing the container class as well):

<div class="container-fluid">
    <div class="row">
      <div class="col-md-3 column">
      </div>
      <div class="col-md-6 column">
      </div>
      <div class="col-md-3 column">
      </div>
    </div>
</div>
htmlcsstwitter-bootstraptwitter-bootstrap-3overflow

Answer №1

Make some changes to the bootstrap CSS:

.row{ padding-left: 0; padding-right: 0;}

.container{
    .row{margin-left: -20px; margin-right: -20px;}
}

Give it a shot.

Answer №2

While troubleshooting a different bootstrap problem, I stumbled upon this solution. Even though it may be outdated, I wanted to provide an answer for those who encounter similar issues in the future.

The issue lies in placing the row after the container in your code.

If you are trying to nest rows, your current approach is incorrect based on the provided code snippet. If your goal is to have your screen at 100% width, simply rearrange your .row element to come before .container-fluid.

<div class="row">
  <div class="container-fluid">
    <div class="col-md-3 column">
      </div>
      <div class="col-md-6 column">
      </div>
      <div class="col-md-3 column">
      </div>
    </div>
</div>

Although the question is somewhat vague, implementing this adjustment should resolve the issue.

Answer №3

Dealing with the identical problem, none of the suggestions mentioned earlier proved to be effective...

All I did was add: overflow: hidden to the parent div that contains all my containers and it resolved the issue seamlessly.

In this instance, the parent div in question was 

<div class="hfeed site" id="page">

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

JQuery and CSS can be used to create a div overlay without impacting the positions of other divs on the

Is there a way to make a div overlay other divs (like a dropdown list) without affecting the positions of other divs? I have a #hidden div that appears when you hover over a #HoverMe div, but it moves the position of other divs when hovered. How can I ...

javascriptjquerycssasp.net-mvc

Content missing after centered banner

Seeking help! I need to figure out how to center text after a container. Whenever I try, it ends up either behind the banner picture or misaligned. I want both the banner and the text example to be centered, but placing the text in the right position has b ...

csshtml

Execute a function only once when using it in conjunction with ng-repeat in AngularJS

I need a way to ensure that a specific function is only called once when used in conjunction with ng-if and ng-repeat. <td ng-if="!vm.monthView && vm.yearView=='contract-year'" nginit="vm.ContractYearBaselines()" class="baseline-data ...

javascriptangularjshtml

Unable to submit form within a while loop in PHP table

After making some changes to my form, I noticed that only the hidden input field is being submitted when I try to submit the form. It's strange because it was working perfectly fine before. while ($row = mysqli_fetch_array($gettimesheets)) { $dat ...

phphtml

What is the best way to add borders to my website design?

As someone brand new to the world of HTML and CSS, please be patient with me as I learn the ropes. :) Currently, I am in the process of building my own website to gain experience in web development. From the beginning, I envisioned a centered, light grey ...

htmlcss

Guide on making a semi-transparent overlay with JavaScript in ReactJS

In my ReactJS project, I am working on an API request. After making the request, I want to display a transparent overlay on the current webpage along with Material UI's circular progress indicator (view it here: http://www.material-ui.com/#/components ...

javascripthtmlcssreactjsmaterial-ui

The elements are stacked on top of each other, but unfortunately, the scroll

While scrolling the page, I encounter a small issue where the elements stack on top of each other. Additionally, when I perform a search, the elements move with the keyboard. I have attached screenshots to illustrate the problem. My goal is to have the cat ...

htmlcssflexbox

Enhance your website with a MultiItem Bootstrap Carousel SlideShow next to a Basic SlideShow feature

As I'm designing a website, my goal is to showcase products using sliders. I've implemented both a simple Carousel slideshow and a multi-item Slide Show on the same page. The multi-item Slide Show has a specific CSS class associated with it. The ...

htmlcsstwitter-bootstrapasp.net-corebootstrap-4

Tips for disabling the Enter key event specifically (without the combination of Shift+Enter) in a contenteditable field

I'm trying to incorporate the contenteditable attribute in my code, but I've run into an issue. I would like for pressing (shift + enter) to move to the next line (Note: I only want shift + enter to trigger this action), and when I press the ent ...

jqueryhtml

What is the process of generating a tree menu using data from a MySQL database?

Looking to build a dynamic menu tree using PHP and MySQL data. In my MySQL table, I have the following fields: CREATE TABLE IF NOT EXISTS sys_menu ( menu_code varchar(16) COLLATE utf8_unicode_ci NOT NULL, menu_name varchar(64) COLLATE utf8_unicode_ci ...

phpmysqlhtmlmenu

Real-time web page parsing in JAVA is dynamic and constantly evolving

My goal is to create a GUI application in Java that retrieves data from sports live score pages. I am new to this, so please excuse any basic questions. Essentially, I want to extract information from sites like: http://www.futbol24.com/Live/ http://liv ...

javaparsinghtml

Increase the size of the box-shadow so that it extends beyond the boundaries

Can we create a wider box-shadow in CSS than the actual HTML element it is being applied to, while maintaining the same height as the element? Increasing the spread of the shadow typically increases the height as well. In the provided code snippet, the max ...

htmlcss

Is there a way to modify the variable in order to switch the font of the heading every second using CSS and JavaScript?

I'm trying to create a heading that changes fonts every second, but I'm having trouble changing the variable to set it to another font. Check out my code here. Despite watching tutorials, everything seemed too confusing. var root = document.q ...

javascripthtmlcss

What could be causing the unequal sizes of my flex children?

After some investigation, I have discovered that the issue I'm experiencing only occurs on certain devices, indicating it may be related to the viewport size. In the code provided, the parent element has a fixed height and width, while the children a ...

cssreactjstailwind-css

Just sent out an email including an attachment with HTML content or a webpage link to access on Google

My email recipients primarily use Gmail as their email service provider. To address this, I saved the contents of this page as an HTML file named index.html and stored it on my drive for easy sending. However, the issue lies in the fact that the page does ...

htmlemailgoogle-apps-scriptgoogle-sheetsgoogle-drive-api

the components progress down the line

For my right column implementation, I decided to use CSS position:relative and put different elements inside in position:absolute as shown below: <!-- Right Column --> <div class="col-xs-3 pl18" style="position:relative;"> <!-- Withou ...

jqueryhtmlcss

changing CSS styles

I'm struggling with what seems like a simple issue and can't find a solution anywhere. The HTML element I have is <div class="box"> It originally has this rule in its stylesheet: .box { width: 40%; } My Custom CSS sheet overwrites the o ...

htmlcss

Is it possible to use an :after background-image to layer on top of the following element?

Seeking assistance on adding an image as a :after element to a navigation bar. The goal is for the image to cover the top portion of the next section according to the design. I have set the :after element as position: absolute with a top: 100%, but it app ...

htmlcsspseudo-element

Chrome clip-path creates a white horizontal line shape that resembles a paperclip

Having an issue with horizontal white lines appearing through a div with clip-path set and background image in Chrome. Any suggestions on how to fix this? Check out the screenshot for reference: Screenshot showing the horizontal white line bug If you nee ...

cssgoogle-chromeclip-path

Interactive Radio Buttons with Visual Images

I'm exploring how to implement a set of images that function similar to radio buttons. The idea is that when a user clicks on an image, a check mark would be displayed below it to indicate selection. I think I can achieve this using an onclick event a ...

c#jqueryasp.nethtmlcss