Search code examples
csstwitter-bootstrapwidthdevice-width

Why isn't bootstrap device-width using the entire width of my browser?

I'm trying to follow a Bootstrap tutorial but the first div I'm creating, that should be spanning the entire width of my browser/device, seems to be limited at ~1000 pixels. Any ideas as to why this is?

Here's my code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Testing the Bootstrap 3.0 Grid System</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <style>
    .col-xs-12 {
        height: 100px;
        background-color: blue;
        color:white;
        text-align: center;
    }
    </style>
</head>
<body>
    <div class="container">
    <div class="row">
        <div class="col-xs-12">.col-xs-12</div>
    </div>
</div>

</body>
</html>

Thanks in advance for any help.

Solution

  • If you're using the latest 3.1, you can use the container-fluid class instead of container like this..

    <div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">.col-xs-12</div>
    </div>
</div>

    3.1 full width: http://www.bootply.com/116382

    For Bootstrap 3.0.x you'd need to use a custom container like this...

    .container-full {
  margin: 0 auto;
  width: 100%;
}

    3.0 full width: http://www.bootply.com/107715