Bootstrap 3 - White space on right side

Question

I have a basic code that's showing a white space on the right side of the page, inspecting it I could find thats the problem is generated when I put a div inside of < .. row > < .. container >

Here the Index:

<?php include('mod/header.php'); ?>

<div class="row"> <!-- Las imagenes son de medida 1 por 1/2 (Rectangular) -->
    <div class="container">
        <div class="col-lg-3 col-md-3 col-sm-4"> <!-- When I add this, the white space appears -->
            <a href="#" class="thumbnail">
                <img src="images/default/thumbnailRect.png">
            </a>
        </div>
    </div>
</div>

<?php include('mod/footer.php'); ?>

The only css code that I have is:

@import url(bootstrap.min.css);
body {
    background-image: url('../images/backgroundPattern.png');
    background-repeat: repeat;
    overflow-x: hidden;
}

Maybe relevant code of header and footer: Header.php

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ...

    <title>...</title>

    <link href="css/style.css" rel="stylesheet">
  </head>

  <body> 
    <nav class="navbar navbar-default">
        ... common bootstrap navbar ...
    </nav>

Footer.php

<footer>
    <div class="container-fluid">
        <div class="row footer">
            <div class="col-xs-4 col-sm-3 col-md-2">
                ...
            </div>
            <div class="col-xs-4 col-sm-3 col-md-2">
                ...
            </div>
            <div class="col-xs-4 col-sm-3 col-md-2">
                ...
            </div>
            <div class="col-xs-4 col-sm-3 col-md-2">
                ...
            </div>
            <div class="col-md-12">
                <h6 style="text-align: left;" class="text-muted">Title &copy 2015 - Some text</h6>
            </div>
        </div>
    </div>
</footer>

I added header and footer just for you to see it but I'm convinced that the problem is between

<div class="row"> <!-- Las imagenes son de medida 1 por 1/2 (Rectangular) -->
    <div class="container">

    </div>
</div>

score 5 · Accepted Answer · answered Apr 20 '15 at 13:36

5

Container should be the parent element of a row not the other way around

answered Apr 20 '15 at 13:36

Raja Khoury

3,015
1
20
19

2

For a brilliant, visual explanation of container, row, column for Bootstrap, including a discussion of this and other problems, read this (no I didn't write it): http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works – james Jun 14 '15 at 02:37
@james Thanks for Sharing James! – Raja Khoury Jun 15 '15 at 19:14

score 0 · Answer 2 · answered Mar 29 '18 at 05:59

I had a very similar issue recently which took me quite sometime to figure out. For me, it was not the usual row/container issue. I was using a form-control to render checkboxes manually. In Bootstrap, all textual elements with form-control have width:100% by default. Having many checkboxes online was causing them to spill over (invisibly) and causing this large white gap on the right. Surprisingly, it wasn't easy to debug this using Chrome Dev tools either.

I am now using the following solution to set the width to auto; (this answer helped):

<input class="form-control form-control-inline" type="checkbox" ... ... .. />

and

.form-control-inline {
  width: auto;
}

Hope it helps someone who landed here via Google with the same issue

Bootstrap 3 - White space on right side

2 Answers2