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

StackOverflow https://stackoverflow.com//questions/22003563

Question

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.

Was it helpful?

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

OTHER TIPS

The container class has a width specified depending on the media query. Your content is within this div so its width is based upon it.

You can see this in the dev tools in all major browsers, find that element and view the CSS styles/properties.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top