Can't get bootstrap offsetting classes to work

(entry re-edited)
I am new to bootstrap 3.0. I am struggling to learning the skills of offsetting classes in Bootstrap 3.0. For some extremely frustrating reason, I cannot get the the classes to work. This is straight from the BootStrap site.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Boot Strap Test</title>
    <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="css/main.css">
   
  </head>
  <body>
    <header>
      


        <nav style="float:right">

              <ul class="nav nav-pills">
              <li><a href="home.html"  >Home</a></li> <!-- put this in a example of "GT" layout using appropriate classes  -->
              <li><a href="left_sidebar.html"  >Left Sidebar</a></li>
              <li><a href="right_sidebar.html" >Right Sidebar</a></li>

              <li role="presentation" class="dropdown">
                <a class="dropdown-toggle" class="selected"  data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                  Column Excercises<span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                   <li><a href="off-setting.html">Offsetting</a></li>
                   <li><a href="nest-column.html">Nested</a></li>
                   <li><a href="4-column.html">4 Columns</a></li>
                   <li><a href="index.html" >3 Columns Gallery</a></li>
                </ul>
              </li> <!-- END DROPDOWN -->

              </ul> <!-- END NAV PILLS -->

          </nav>


    </header>
      


      <div class="container">


        <div class="row" id="gallery">

          <div class="col-md-4">
            <a class="thumbnail" href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p> Experimentation with color and texture.</p>
            </a>
          </div>

          <div class="offset-md-4 col-md-4">
            <a class="thumbnail" href="img/numbers-02.jpg">
              <img  src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </div>

        </div><!-- END ROW HERE -->

        <div class="row">
          <div class="col-md-3 offset-md-3">
            <a class="thumbnail" href="img/numbers-06.jpg">
              <img  src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of glows.</p>
            </a>
          </div>

          <div class="col-md-6 offset-md-3">
            <a class="thumbnail" href="img/numbers-06.jpg">
              <img class="img-responsive" src="img/numbers-06.jpg" alt="">
              <p>Trying to create a style of glows.</p>
            </a>
          </div>

        </div> <!-- END ROW HERE -->

        <div class="row">
          <div class="col-md-6 offset-md-3">
            <a class="thumbnail" href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of glows.</p>
            </a>
          </div>


        </div> <!-- END ROW HERE -->


      </div> <!-- END CONTAINER  -->




      <footer>

        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Nick Pettit.</p>
      </footer>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  </body>
</html>

The two “divs” nested in the first “row” are always next to each other no matter what the screen size. I can’t make that invisible div separate the two making better spacing. Why?

The first, second and third “row” those two “divs” the classes are right next to each other, flush left. Why?
All other classes that I am doing on my site work except these offsetting rows.

What am I doing wrong?

The sum of their col-span seems to be 8 while the other rows are 6 columns. Is that an error? I guess the second div should have “col-md-2” but I know nothing about Bootstrap.

I think you need to post the relevant css output together with your html for us to be able to see the problem.

Edit) Found this SO topic that might have some info: http://stackoverflow.com/questions/37427245/bootstrap-4-accepting-offset-md-instead-col-offset-md-naming-convention-bug/

I read your link. It’s interesting to see the debate of accuracy of that BootStrap documentation.
It refers to the same webpage I am referring to, but I am confused because I have seen online video lesson tutorials Lynda.com use bootstrap offset classes just fine (Yes, they were in BootStrap 3). Hence, my confusion. How could it be shown in a online video tutorial, but for some unknown reason not work based off current (supposedly accurate) Bootstrap documentation here?

You are correct I reviewed the documents and found a link here that shows the correct class name for the version of BootStrap I have (3.3.7) here.

I was using the v4 boostrap class within a older version of Bootstrap and didn’t even know it. That was the problem. I used col-md-offset-3 instead of offset-md-3 and it works fine. So frustrated that on the bootstrap page there is no label that the page is talking about using Boostrap Version 4 (not my bootstrap version!) EXCEPT in the url…ugh!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.