The page is displaying a horizontal scrolling bar when utilizing bootstrap framework

Currently, I am in the process of designing a webpage that utilizes Bootstrap. To structure my page layout, I am utilizing the grid system and the col-lg-x class. Specifically, I have split the page into two sections with the code below:

<div class='container'>
  <div class='row'> 
    <div class='col-lg-7'></div>
    <div class='col-lg-5'></div>
  </div>
</div>

I have added content within these columns and adjusted the box-sizing property to border-box. Despite adhering to the guidelines of the Bootstrap grid system, I am still noticing a horizontal bar on the page. From what I understand, Bootstrap divides the page into 12 equal columns, so I am puzzled as to why this horizontal bar is appearing. Any insights or suggestions would be greatly appreciated.

htmlcsstwitter-bootstrap

Answer №1

Your CSS code may be conflicting with the bootstrap CSS, resulting in overlap. The classes '.col-lg-7' and '.col-lg-5' are both functioning responsively below 1200 pixels, so there should not be any horizontal or vertical scroll bars.

<div class='container'>
  <div class='row'>
    <div class='col-lg-7'>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
    <div class='col-lg-5'>
      <p>Contrary to popular belief, Lorem Ipsum is not simply random text. </p>
    </div>
  </div>
</div>

Visit this link for more information.

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

Header not displaying meta tags properly

I am currently utilizing Umbraco and taking advantage of the master page functionality. Within my master page, I have various templates that serve as its children. One of these child templates contains meta tags placed within the <head> section to e ...

html.netumbracofacebook-opengraphmeta-tags

How to centrally align tabs in Material-UI AppBar using ReactJS

I'm developing a React Application using Material-UI and facing difficulty in centering the 3 tabs within the blue AppBar. Currently, they are aligned to the left like this: (unable to embed images at the moment, apologies) This is the code snippet ...

cssreactjsmaterial-uiappbarcenter-align

Can a collapse that was saved in a separate file be displayed on the requested page?

Imagine having a navigation bar on your website's index page with four buttons, each leading to a different page. What if you wanted to bring all those separate pages together into one by using collapsible elements? That's the challenge this user ...

javascripthtmlbootstrap-5

What is the best way to define Bootstrap 5's CSS variables with the :root selector?

I am working with a Bootstrap 5 application that utilizes various web components, all styled with Bootstrap 5. I am looking to dynamically customize the theme within the parent component that integrates these web components. The basic structure of my setup ...

htmlcsstwitter-bootstrapbootstrap-5css-variables

Responsive and neatly arranged navigation links using Bootstrap 4

Currently undergoing the process of transitioning from Bootstrap 3.3 to 4.1, I find myself faced with two final complications. In Bootstrap 3.3, I had a responsive navbar without branding, where the links were evenly spaced. While I have managed to get my ...

cssbootstrap-4

What is the best way to create an animated, step-by-step drawing of an SVG path

I am interested in creating an animated progressive drawing of a line using CSS with SVG/Canvas and JS. You can view the specific line I want to draw here <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"> <!-- Created with cust ...

javascriptcsscanvassvg

What is the reason behind the removal of <section> tags by the html5lib sanitizer?

I'm currently grappling with this issue. It's interesting to note that within the sanitizer code of html5lib, <section> is not considered an acceptable element. Why is that so? Upon investigation, it seems that the primary reason for this ...

djangohtmlpython-2.7django-cmshtml5lib

React rendering: Injects an equals sign and quotation marks into the async attribute of <script> tag

I recently developed a basic web application using Next.js and React. One of the functional components (referred to as a "page" in Next.js) includes a script tag like this: <script async src="https://example.com/file.js"></script> However, upo ...

htmlreactjsnext.jsjsx

Once the AJAX callback is complete, the onblur event will revert back to the original field or the updated field

I am currently working with an AJAX callback: Here is the HTML snippet: <a onCLick="loadXMLDoc(id1,id2)">(Add)</a> This function triggers an AJAX method that replaces the "(Add)" text with a basic HTML input field. Subsequently, when there ...

javascripthtmlajaxcallback

JQuery not properly validating inputs with required attributes after creation

I am currently developing a contact form that includes an "alternative address" <div id='alt'> with toggleable visibility. Inside this div, there is a required <input> field. I encountered an issue where toggling #alt twice (thus hidi ...

javascriptjqueryhtmlcsscakephp

Achieve Perfect Alignment of Text Inside a Floating Div

Currently, I have a div aligned to the right inside another container. The text (date/time) within this right-aligned div needs to be vertically centered without using top padding. Whenever I apply top padding, it shifts my div downwards and disrupts its ...

htmlcss

Strange formatting in the internet explorer browser (IE)

I have encountered an issue with CSS animation elements on the home page. The animations appear correctly in Google Chrome, but there is a strange indentation problem when viewed in IE. I have tried several solutions without success. Although I am not a w ...

htmlcssinternet-explorer

Utilizing nprogress.Js for a Dynamic Progress Bar

I'm trying to create a progress bar similar to the one on YouTube using the nprogress.js plugin. However, I want the progress to start from the middle of the page, like this: start | --------------------------------------------> | end Instead of: ...

javascriptcss

How to create a full-width and full-height background image in a div using CSS

When using a bootstrap template, I encountered an issue with adding an image as a background. Here is the CSS code: background:url(../images/banner.png) no-repeat; background-size: 100%; The problem with these CSS rules is that the image gets clipped and ...

jqueryhtmlcssimagetwitter-bootstrap

Retrieve the text input from its respective radio button

There are two radio buttons, each accompanied by an input text field. When a user selects a radio button, they can also enter some corresponding text. My inquiry is: What is the best method to retrieve the entered text for the selected radio button? ...

javascriptjqueryhtml

Leverage Javascript to detect the operating system and dynamically incorporate external HTML content

I am trying to identify the operating system of a user and then dynamically load HTML content from another file based on their OS. I have incorporated jQuery scripts from the previous version of the site in my attempts, but they are not entirely effective. ...

javascripthtmljquerybootstrap-5

Ways to emphasize text in a h2 header without affecting other elements

One particular HTML block is causing me some trouble: <h2><span class="numbers">1.1 </span>header text</h2> It's important to note that I did not write this HTML code, so my options for changing it are limited. Howev ...

htmlcss

How can I align the text in a dropdown menu to the center on Safari?

How can I center the option text in a drop down menu using CSS? display: block; height: 60px; margin-left: 10%; margin-right: 10%; margin-top: 10px; min-height: 60px; text-align: center; The option text is centered in Firefox browser, but not in Safari. ...

javascripthtmlcsssafari

Issue with fixed positioning on iPad devices

A unique feature we implemented on our site is a small control that is positioned at the bottom of the screen. However, upon viewing the site on an iPad, the control does not stay fixed at the bottom but rather floats in the middle. What's the issue ...

htmlcssipadsafari

Struggling with Responsiveness: Challenges with Detailed Information and Image Grid Design

Encountering challenges in achieving the desired responsiveness for a grid layout consisting of details and an image. The layout displays correctly on desktop screens, with details on the left and the image on the right. However, on mobile screens, the ima ...

javascriptcssreactjsmaterial-ui