Issue: An unwanted horizontal scrollbar is generated upon inserting an image into a column using the Bootstrap 4 grid system

As a complete beginner in coding and web development, I'm facing a problem that I need help solving:

I attempted to insert an image into the column within my Bootstrap 4 grid layout. However, upon adding the image, a horizontal scrollbar mysteriously appears on the screen, causing confusion.

This screenshot illustrates the issue: https://gyazo.com/c383ecb9180181349363e0636047867c

<div class="container">
<div class="row">
    <div class="col-6">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div class="col-6">
        <img src="https://images.unsplash.com/photo-1585600270404-543d0eac85e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3042&q=80">
    </div>
</div>

The second issue arises when I attempt to resolve the initial problem by using the "img-fluid" class for the image. Although this removes the horizontal scrollbar, switching the container to container-fluid to cover the full width of the screen while utilizing the "px-0" class to eliminate extra padding results once again in pesky horizontal scrollbars appearing.

<div class="container-fluid px-0">
<div class="row">
    <div class="col-6">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div class="col-6">
        <img class="img-fluid" src="https://images.unsplash.com/photo-1585600270404-543d0eac85e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3042&q=80">
    </div>
</div>

htmlcssbootstrap-4

Answer №1

The main issue causing the problem is the lack of any restrictions on the 'width' of the image, leading to its excessive size and triggering the appearance of a horizontal scroll bar.

To address this common issue, Bootstrap offers a solution in the form of the 'img-fluid' class.

To prevent the horizontal scroll bar from showing up, simply apply the 'img-fluid' class to the image as demonstrated below.

The secondary issue related to the usage of container-fluid px-0 can be resolved by utilizing the px-lg-5 class instead of px-0. (px-lg-5 is ideal for wide sections or outer-most divs)

See an example in action with 'img-fluid' and container-fluid px-lg-5 classes:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
          crossorigin="anonymous">
    <title>Bootstrap - responsive image</title>
  </head>
  <body>
    <div class="container-fluid px-lg-5">
      <div class="row">
          <div class="col-6">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </div>
          <div class="col-6">
              <img class="img-fluid" 
                   src="https://images.unsplash.com/photo-1585600270404-543d0eac85e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3042&q=80">
          </div>
      </div>
  </body>
</html>

Result:

https://i.sstatic.net/rKeYk.png

For further details: https://getbootstrap.com/docs/4.0/content/images/

Answer №2

If you prefer not to have scrolling on your page, one option is to set overflow: hidden on the second column container. Alternatively, you can adjust the height and width of the image to prevent scrolling and ensure that the entire image is visible.

 <div class="col-6">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 </div>
 <div class="col-6" style="overflow: hidden">
   <img height="100px" width="100px" src="https://images.unsplash.com/photo-1585600270404-543d0eac85e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3042&q=80" />
 </div>

For more information on the overflow property, visit https://www.w3schools.com/css/css_overflow.asp, and for details on image attributes, check out https://www.w3schools.com/html/html_images.asp

To address the second issue, simply include margin:0 in the <div class="row">

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

Mobile devices are failing to display the logo as expected

Can anyone help me figure out why the logo is not displaying on mobile devices? I've already tried resetting my phone's network and web browser, as well as reducing the size of the logo from 100px to 80px. Despite these efforts, the logo still wo ...

htmlcss

What is the best way to invoke a jQuery function with a dynamic ID?

I am a newcomer to JQuery and need assistance with calling a function on click for an image with a dynamic ID. While I have come across posts about calling a function using the ID, I am struggling to find one that addresses working with a dynamic ID. Is i ...

jqueryhtml

What is the technology powering A.nnotate.com?

Can you explain the process by which services such as A.nnotate.com, Scribd, and Google Docs convert PDFs, .doc files, or other documents into HTML? Additionally, could you detail how their annotation systems function? ...

htmlpdfannotationsscribddocument-conversion

Preventing window.load events from firing in JavaScript

Recently, I was playing around with a chrome extension that I had developed on various websites. The purpose of the extension was to print out the web address of the site once the entire page loaded completely. However, when I looked at the plugin's J ...

javascriptjqueryhtml

Remove a specific div element using the keyword "this" in Javascript

Is there a way to generate a new div by pressing a button, with an option to delete that specific div by clicking on another button within it? I want each new div created by the first button to have its own unique delete button that will only remove its ...

javascripthtmlthis

Classic design of the shadow element

I have main.js and index.html below class CustomTagA extends HTMLElement { constructor() { super(); const shadow = this.attachShadow({mode: 'open'}); const wrapper = document.createElement('h1'); ...

javascripthtmlcssshadow-dom

Displaying data from a PHP form

I'm working on a table that is populated with data from my controller. The issue I am facing is that only the first record, in this case Sephen C. Cox, does not redirect me when I click the "add employee" button. For all other records, the button work ...

phphtml

A guide to integrating the YouTube player and Facebook API with Bootstrap 3

Hello everyone! Hey there, I'm Cody, a student and amateur web designer. I recently got the opportunity to work on a website for a family friend. I've been using bootstrap3 to ensure the site is responsive, but I've run into an issue while ...

htmlcssfacebookyoutubeembed

What is the best method to extract the text inside a <p> tag within an iframe using Selenium in Python?

Examining a section of code within the webpage I am currently working on, I came across the following snippet - <div class="A"> <iframe id="frameA"> #document <html style> <head></head> ...

pythonhtmlseleniumselenium-webdriver

Injecting sinon js into an application within an iFrame: a step-by-step guide

I am looking to implement ajax requests testing in my application. The application is running within an iframe, and my goal is to have the iframe's wrapper page test the application using sinon (which will send the response). I attempted to include ...

javascriptajaxhtmliframesinon

Update the jQuery script tag with new content - rewrite everything

I am facing an issue with jquery. I need to change the link to src only when "document.write" is present. Below is my code: myscript.js document.write("TEST ABCD"); test.html <html> <body> <button id="example">click me</button&g ...

javascriptjqueryhtml

What is the best way to trigger a JavaScript onclick event for a button that is located within a dropdown menu on an HTML page

I've implemented a feature that resizes the font size within a text area based on the selected font size. It was functioning flawlessly... until I decided to place the font size selection in a drop-down menu, which caused the feature to stop working. ...

javascripthtmlcss

Terminate a browser tab with the click of an HTML button

I'm facing an issue with my HTML button - I need it to close the tab upon clicking. Unfortunately, the common methods seem to no longer work on newer versions of Chrome and Firefox. I've tried using these two solutions but they did not work: & ...

javascripthtmlbrowser

JavaScript salary calculation function not functioning properly

Once the user inputs the employee's name and the number of hours they worked on the HTML form, the submit button captures this information and stores it in variables for calculating their pay. The script also factors in overtime pay. Despite feeling l ...

javascripthtmlfunction

JavaScript encountered an issue when trying to display HTML content

Through my PHP code, I am attempting to create a popup window that displays the content of an HTML file. However, after adding script tags, no HTML content is displayed. When I tried echoing out $row2, only the word 'array' appeared on the screen ...

phpjavascripthtmlajax

Tips for defining the width of columns that adapt to different screen sizes in Bootstrap version 4

Utilizing Bootstrap 3, I can effortlessly create a responsive table with adjustable columns using the grid system. Additionally, I have the ability to hide certain columns on smaller devices. For instance, consider this example where the table consists of ...

csstwitter-bootstrapresponsivenessbootstrap-4

Steps to display a specific div section upon selecting a dropdown option and clicking the submit button using jQuery

I'm having an issue displaying a specific div section when selecting an option from a dropdown menu. I've written the code below, but it doesn't seem to be working. Can anyone please assist me with this? My actual requirement is that I only ...

javascripthtmljquerycssbootstrap-4

Can you recommend a resource that provides a comprehensive breakdown of which CSS elements are compatible with each internet

Can anyone recommend a comprehensive resource, such as a book or website, that provides a complete list of CSS elements and their compatibility with the major web browsers? Specifically, I am interested in information regarding compatibility with IE8 and F ...

htmlcssbrowsercross-browser

The tooltip for the jQuery slider-bar is lagging behind the slider handle

In customizing a jQuery slider bar from a tutorial by Thoriq Firdaus for use in a Django Python application, I found that the original size and range of the slider were too small for my needs. I needed to set the range to min: -100 and max: +100. Modifying ...

jquerycssjquery-uitooltipjquery-slider

The PDF format is experiencing compatibility issues when used with the CSS property for page breaks after:

My PDF with CSS page breaks is not functioning properly, as the pages are not breaking as intended. Removing position:absolute solves the issue but leaves space after each page. I suspect it may be a CSS problem, but I'm unsure. If the issue lies wit ...

javascripthtmlcsspdfphantomjs