CODEWITHSUNDEEP
twitter-bootstrap-3
xotix
xotix

Reputation: 520

column offset in bootstrap 3 is always on the right

so I wanted to create a sidebar, then some space and the a content area. For the spacing between sidebar and content area, I wanted to use the .offset-- property from Bootstrap 3. But somehow, it doesn't work as excepted.

.main-content {
  height: 200px;
  background-color: green;
}

.sidebar {
  height: 200px;
  background-color: red;
}

.container {
  border: 1px solid blue;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Example</title>
</head>
<body>
  <div class="container main-container">
      <div class="row">
          <!-- Sidebar -->
          <div class="sidebar col-md-3">
            sidebar
          </div>
          <!-- Main Content -->
          <div class="main-content col-md-8 offset-md-1">
            content
          </div>
      </div>
  </div>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

To see what I mean, run the example and swithc to Full Page Mode. As you see, the offset is at the most right instead being between the sidebar and the container. It also doesn't matter if I add it to the sidebar or the main-content element.

What's wrong with my example?

Upvotes: 0

Views: 2084

Answers (1)

Arun CM
Arun CM

Reputation: 3435

Use col-md-offset-1 instead of offset-md-1 to the content div.

.main-content {
  height: 200px;
  background-color: green;
}

.sidebar {
  height: 200px;
  background-color: red;
}

.container {
  border: 1px solid blue;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Example</title>
</head>

<body>
  <div class="container main-container">
    <div class="row">
      <!-- Sidebar -->
      <div class="sidebar col-md-3">
        sidebar
      </div>
      <!-- Main Content -->
      <div class="main-content col-md-8 col-md-offset-1">
        content
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

</html>

Upvotes: 1

Related Questions