The row is larger than the container in Bootstrap

Question

I have a problem with the use of Bootstrap.

The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Landing Page</title>
  <!-- Bootstrap -->
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
  <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
  <link href="bootstrap/css/custom.css" rel="stylesheet" media="screen">
  <!-- Javascript -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="row" id="main_header">
    </div>
  </div>
</body>

</html>

But the result is that the row is larger than the container.

I leave you a picture to understand what I mean

In custom.css there are only the height and the colors of the div.

I made this jsfiddle and it works well, or bad my example? http://jsfiddle.net/GJS7c/ — SoldierCorp, Mar 31 '13 at 10:41
Take a look here https://stackoverflow.com/questions/18969051/bootstrap-3-why-is-row-class-is-wider-than-its-container — NoWar, Apr 11 '19 at 04:20

score 7 · Answer 1 · answered Mar 31 '13 at 10:43

The row is not larger than the container. It is caused by the responsive design, which sets row margin-left to -30px on resolutions larger than 1200px. If you not want this, add

<style type="text/css">
.row {
  margin-left: 0px;
}
</style>

before </head>.

Other issues :

Your header should be

<!DOCTYPE html>
<html>

You are using an oldschool HTML4 document definition. Use HTML5 (as bootstrap docs strongly recommend. With the above, your page will go in quirksmode in IE)

Also, use an updated jquery, your page will never work with 1.3 - "on" does not exists in 1.3, and bootstrap refers to jquery on many times. Use at least 1.7.1

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

The row is larger than the container in Bootstrap

1 Answers1