(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>© 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?