Bootstrap 3 fluid container not 100% width

css twitter-bootstrap width containers fluid-layout

44,003

Solution 1

.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

Solution 2

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>

Solution 3

 <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>

44,003

Author by

Admin

Updated on July 09, 2022

Comments

Admin almost 2 years

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.

Admin almost 10 years

The Bootstrap core CSS file already contains margin: 0; for the body tag. Adding width: 100%; did not do the trick unfortunately.
K.Raj. almost 10 years

you can use media query too.
Admin almost 10 years

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.
Maciej Kowalski over 7 years

Please try always to add at least small comment on how the code in the answer relates to the question.Thanks