The issue

I am thinking about implementing Bootstrap 3 into my project and I am testing out some of its functionalities and properties before switching to this front-end framework.

The weird thing I noticed is that a fluid Bootstrap container doesn't actually span 100% of the viewport width (notice the 1px line on the right of the pink Bootstrap element):

This is what my HTML looks like. It's basically the default Bootstrap template.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Page title</title>
        <link rel="stylesheet" href="css/bootstrap.css"> <!-- Core CSS -->
        <link rel="stylesheet" href="css/test.css"> <!-- Custom CSS -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="full-width">This is not bootstrap</div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    This is Bootstrap
                </div>
                <div class="col-md-9">
                    This is Bootstrap too
                </div>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

Obviously I use the standard, latest CSS version of bootstrap and my own custom CSS:

.full-width {
    width: 100%;
    background-color: #808080;
}
.col-md-3 {
    background-color: #4f4;
}
.col-md-9 {
    background-color: #f4f;
}

Why isn't this fluid container spanning 100% of the width? Although it's just 1px it will definitely break up my page design.

Issue recreation

I created a jsfiddle on request concerning this issue: http://jsfiddle.net/J6UE5

To recreate my issue resize the viewport using Safari (7.0.5) on a Mac running OS X 10.9.4. You'll notice the 1px line on the right side of the pink container appearing and disappearing while resizing. Once the green and pink container are stacked (Bootstrap behavior) the 1px line disappears and everything is 100% width.

Bakelite answered 26/7, 2014 at 11:6 Comment(1)

Can you override the container CSS's padding? – Sequence 30/9, 2014 at 22:39

.container element adds padding of 15px in Bootstrap.

.row has negative left and right margins of 15px, and

.column has 15px padding.

Override the containers padding values in your CSS (and make sure to place them after your boostrap code so it properly overwrites).

.container { 
  padding: 0px;
}

More explanation on how containers, container-fluids, rows, and columns work here

http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

Sequence answered 30/9, 2014 at 22:44 Comment(0)

Have you added this line in your custom css file !

body {
       width: 100%;
       margin: 0%;    
}

/***********************************************************************************/

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Page title</title>
        <link rel="stylesheet" href="css/bootstrap.css"> <!-- Core CSS -->
        <link rel="stylesheet" href="css/test.css"> <!-- Custom CSS -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <style type="text/css">
            .full-width {
                max-width:100%;
                top:0;
                left:0;
                min-height: 100%;
                min-width: 1024px;
                background-color: #808080;
            }
            .col-md-3 {
                background-color: #4f4;
            }
            .col-md-9 {
                background-color: #f4f;
            }

            body {
                width: 100%;
                margin: 0%;
            }
        }
    </style>

    </head>
    <body>
        <div class="full-width">This is not bootstrap</div>
        <div class="container-fluid">
            <div class="col-md-12">
            <div class="row">
                <div class="col-md-3">
                    This is Bootstrap
                </div>
                <div class="col-md-9">
                    This is Bootstrap too
                </div>
            </div>
        </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

Dudgeon answered 26/7, 2014 at 11:30 Comment(2)

The Bootstrap core CSS file already contains margin: 0; for the body tag. Adding width: 100%; did not do the trick unfortunately. – Bakelite 26/7, 2014 at 11:44

you can use media query too. – Dudgeon 26/7, 2014 at 12:6

 <div class="row" style="margin-left: -30px; padding: 0px;  background-color: rgba(255, 3, 53, 0.49);">
     <div class="col-lg-12">
           <p style="color: green;">Foo</p>
         </div>
</div>

Georgie answered 23/1, 2017 at 22:57 Comment(1)

Please try always to add at least small comment on how the code in the answer relates to the question.Thanks – Karli 23/1, 2017 at 23:29

trying to recreate that issue and cannot seem to

try change the bootstrap css, bootstrap.css to bootstrap.min.css

edit: are there any other css files you are pulling in a quick http://www.bootply.com/OOpfKfAAMh shows its working fine, no 1px white space on the side

Didi answered 26/7, 2014 at 13:7 Comment(1)

Unfortunately I can't get the bootply link to work. It shows an application error. I created a fiddle for people to look at. Try to recreate it - if possible - using Safari (7.0.5) on a Mac with OS X 10.9.4. jsfiddle.net/J6UE5. – Bakelite 28/7, 2014 at 9:26

The issue

Issue recreation

Recommended topics

Hot tags