0

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.

madth3
  • 7,275
  • 12
  • 50
  • 74
Tim
  • 741
  • 1
  • 10
  • 16

2 Answers2

1

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • That did it (container-fluid, that is), thanks! What's the point of restricting the width of the container class? – Tim Feb 25 '14 at 02:55
0

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.

Brocco
  • 62,737
  • 12
  • 70
  • 76