Images with full-width will scroll horizontally

Is there a way to fix the horizontal scroll issue?

<!DOCTYPE html>
    

<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

Navbar

  • Link
  • Link
  • Link
  • Link
<section class="boxes">
        <div class="container-fluid pl-0 pr-0">
            <div class="row">
                <div class="box col-lg-6"><img class="img-fluid" src="https://d22wsyl1zemnyu.cloudfront.net/images/frontendfront-logo-share.png"></div>
                <div class="box col-lg-6"><img class="img-fluid" src="http://www.wearedigitalalchemy.com/wp-content/uploads/2015/08/backend.jpg"></div>
            </div>
        </div>
    </section>

https://jsfiddle.net/evkuw4zd/

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Utilize the classes pl-0 pr-0 on box col-lg-6 and remove pl-0 pr-0 from container-fluid

<section class="boxes">
    <div class="container-fluid">
    <div class="row">
    <div class="box col-lg-6 pl-0 pr-0"><img class="img-fluid" src="https://d22wsyl1zemnyu.cloudfront.net/images/frontendfront-logo-share.png"></div>
    <div class="box col-lg-6 pl-0 pr-0"><img class="img-fluid" src="http://www.wearedigitalalchemy.com/wp-content/uploads/2015/08/backend.jpg"></div>
    </div>
    </div>
</section>


<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

</head>
<body>

  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">Navbar</a>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <!-- Navbar Left -->
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
            <!-- Navbar Right -->
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
    </nav>

<section class="boxes">
    <div class="container-fluid">
    <div class="row">
    <div class="box col-lg-6 pl-0 pr-0"><img class="img-fluid" src="https://d22wsyl1zemnyu.cloudfront.net/images/frontendfront-logo-share.png"></div>
    <div class="box col-lg-6 pl-0 pr-0"><img class="img-fluid" src="http://www.wearedigitalalchemy.com/wp-content/uploads/2015/08/backend.jpg"></div>
    </div>
    </div>
</section>

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

  <!-- Tether -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

  <!-- Bootstrap 4 -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

</body>
</html>

Answer №2

To make it work, remove the classes pl-0 and pr-0, and replace them with container-fluid. Here is the updated code:

<section class="boxes">
    <div class="container-fluid">
    <div class="row">
    <div class="box col-lg-6"><img class="img-fluid" src="https://d22wsyl1zemnyu.cloudfront.net/images/frontendfront-logo-share.png"></div>
    <div class="box col-lg-6"><img class="img-fluid" src="http://www.wearedigitalalchemy.com/wp-content/uploads/2015/08/backend.jpg"></div>
    </div>
    </div>
</section>

Answer №3

To remove the padding from the columns, you should utilize the no-gutters class on the row...

<section class="boxes">
    <div class="container-fluid px-0">
        <div class="row no-gutters">
            <div class="box col-lg-6"><img class="img-fluid" src="https://d22wsyl1zemnyu.cloudfront.net/images/frontendfront-logo-share.png"></div>
            <div class="box col-lg-6"><img class="img-fluid" src="http://www.wearedigitalalchemy.com/wp-content/uploads/2015/08/backend.jpg"></div>
        </div>
    </div>
</section>

Check out the demo:

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

ways to set a background color for a textarea element using bootstrap

How can I add a background color to my text area field in Bootstrap? <div class="form-group"> <div class="col-xs-12"> <textarea class="form-control" id="exampleTextarea" rows="6" placeholder="Message" style="background-color: #f ...

csstwitter-bootstrap

HR | extends all the way down the table, creating a vertical boundary

I am currently working on developing an Email Signature Generator. My goal is to extend the blue line (visible in the program) all the way down without affecting the layout of other elements. I suspect that because everything is contained within a table, a ...

htmlcss

Updating the CSS: Using jQuery to modify the display property to none

I am facing an issue with displaying an element that is defined as display:none in CSS. I tried to use the .show() function in jQuery, but it's not working as expected. Here's the code snippet: CSS .element { position: absolute; display: no ...

javascriptjqueryhtmlcsssettimeout

Dynamically Allocating Page Heights

I am tasked with creating an ASP.NET MVC page that will display a template of controls. The controls will be retrieved from an XML file. One issue I am facing is that the number of controls is not fixed, so the page height needs to be dynamic. Our site has ...

cssasp.net-mvc

Mastering the CSS Art of Working with Sprite Images and Their Positioning

I am currently working on an educational project as a front-end developer, where I aim to clone the Google homepage. To achieve this, I am utilizing Google's own sprite and here is the image of the sprite that I am using. https://i.stack.imgur.com/YT ...

htmlcsssasssprite

Display 'Div 1' and hide 'Div 2' when clicked, then reveal 'Div 2' and hide 'Div 1' when a different button is clicked

I need help figuring out how to make two separate buttons work. One button should display 'Div 1' and hide 'Div 2', while the other button should show 'Div 2' and hide 'Div 1' when clicked. My knowledge of jquery an ...

javascriptjqueryhtmlcss

I am having trouble with the browser detection not accurately identifying the browser I am currently using

Currently, I am working on a JavaScript code that will simply display the name of the browser being used to view the web page. Despite me using Safari, none of the navigators seem to recognize it as the current browser. The information displayed in my brow ...

javascripthtml

Clicking on a link with JQuery does not fire the action when the href attribute is set to "#open-site"

My navigation setup is as follows: <ul> <li><a href="index.html#open-site">Test</a></li> <li><a href="#open-site">Test</a></li> <li><a href="test.html#open-site"> ...

jqueryhtmlfunctionnavigationclick

Troubleshooting: AngularJS routing issue

I'm facing an issue with my AngularJS routing code. Here is the code snippet: /// <reference path="C:\Users\elwany\documents\visual studio 2015\Projects\spaapplication\spaapplication\scripts/angular.js" /& ...

javascripthtmlangularjs

What is the maximum width that can be set for an HTML input control

I'm working on a web page with a row that contains three controls. SomeText Input Button It looks something like this <div> SomeText <Input/> <img> </div> The image is currently floating to the right. ...

htmlcss

Lagging speeds in client-side template rendering using Rivets.js

I have a function that renders an array of around 1000 objects, but the html bindings are causing significant performance issues. It currently takes about 5 seconds to complete rivets.bind(). Does anyone have any recommendations for improving performance? ...

javascriptjqueryhtmltemplatingrivets.js

Limit the text input area in HTML to a fixed size, preventing any text from exceeding the specified boundary

Is there a way to create a fixed line text area that limits the user from typing beyond a certain number of lines and maximum width? My current CSS styling for this is as follows: .area-style { resize: none; width: 324px; height: 200px; m ...

javascriptcsshtmltextarea

A guide to resolving the issue of spacing out three adjacent elements in HTML/CSS

As I work on creating my personal website, I have encountered an issue with three elements that are supposed to be side-by-side. My desired structure is depicted in this link: https://i.sstatic.net/eQEf3.jpg However, the middle element is not responding t ...

htmlcss

Pass the values of both buttons to a different page using PHP

I am currently developing a system for a hospital. The data is sourced from an array and I need to pass the values from two buttons to another page. For example, on the initial page: 1 xyz First 2017-04-08 11:35:00 body checkup Generate Presc ...

javascriptphpjqueryhtmlarrays

Having trouble with the postcss-import grunt plugin?

Here is the layout of my project: my_project |-- css | -- main.css |-- css-dev | -- main.css |-- node_modules | -- bootstrap | -- dist | -- css | -- bootstrap.css |-- package.json `-- Gruntfile.js The contents of my Gr ...

javascriptcsstwitter-bootstrapgruntjs

Styles in print CSS are not effective in an Angular project

Currently, I am working on an Angular project where I need to generate a printable document using CSS. The challenge I am facing is ensuring that the date and title in the header do not print automatically when the document spans multiple pages. Additional ...

cssangularprinting

Place information from an input field into a specific row within a table

Utilizing Angular 4, I am developing a frontend application for a specific project. The interface features a table with three rows that need to be filled with data from an external source. https://i.stack.imgur.com/Dg576.png Upon clicking the "aggiungi p ...

htmlcssangulartypescript

What is causing myInterval to not be cleared properly?

const homeButton = document.getElementById('home'); window.myInterval = 0; const showHome = () => { console.log('showHome'); window.myInterval = setInterval(wait, 400) } const wait = () => { console.log('wait'); ...

javascripthtmlcsssetinterval

Change the formatting to eliminate the file extension while ensuring the page is still accessible

I have a subdomain with .php pages in it and I want to remove the .php extension. After researching on various forums, I came up with the following code: RewriteEngine On RewriteBase / RewriteCond %{THE_REQUEST} (\.php(.*)\sHTTP/1) RewriteRu ...

htmlmod-rewriteweb

Mistakes found in the 'com/badlogic/gdx/backends/gwt/GwtApplication.java file while working on an HTML 5 project

Just recently, I discovered the amazing framework known as Libgdx. As a newcomer to this framework, I am encountering a few challenges. After cloning the entire repository and running the gdx-setup-ui.jar file, I obtained 4 basic starter projects (my-gdx-g ...

htmlgwtlibgdx