CODEWITHSUNDEEP
csstwitter-bootstrap
Felipe Ch.
Felipe Ch.

Reputation: 137

Bootstrap 3 - White space on right side

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>

Upvotes: 2

Views: 10797

Answers (2)

Anupam
Anupam

Reputation: 15620

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

Upvotes: 0

Raja Khoury
Raja Khoury

Reputation: 3195

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

Upvotes: 5

Related Questions