title: Bootstrap 3 columns are not staying put/disappearing
body: <p>I am working on a simple html page, making good use of bootstrap columns, and I am running into the weirdest issue. The columns are disappearing on me. Or at least when I look at firebug not going where they should be. I was hoping someone would know what ever stupid mistake I am making, or perhaps quirk I stumpled upon.</p>
  
  <p>Here is my embeded CSS:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;title&gt; test &lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;style&gt;
        /* define the headers for each section */
        h1 {
          margin: auto;
          padding-top: 10%;
          padding-bottom: 5%;
          text-decoration: underline;
        } h1:before {
          content: "\00a0\00a0";
        } h1:after {
          content: "\00a0\00a0";
        } span {
          color: #111;
          text-decoration: none;
          z-index: 1;
        }
  
        /* Define the Nav Bar */
        .navbar {
          padding-top: 5px;
          padding-bottom: 5px;
          background-color: #9fc;
          width: 100%;
          border: solid;
          border-bottom-width: 2px;
          border-color: white;
        } li:hover {
          background-color: #7da;
        }.dropbtn { /* Dropdown Button */
            padding: 16px;
            border: none;
            cursor: pointer;
        } .dropdown {   /* The container &lt;div&gt; - needed to position the dropdown content */
            position: relative;
            display: inline-block;
        } .dropdown-content { /* Dropdown Content (Hidden by Default) */
            display: none;
            position: absolute;
            background-color: #9fc;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            border: solid;
            border-top-width: 1px;
            border-left-width: 1px;
            border-right-width: 1px;
            border-color: white;
            z-index: 1;
        } .dropdown-content a {   /* Links inside the dropdown */
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            border: solid;
            border-bottom-width: 1px;
            border-color: white;
        } .dropdown-content a:hover {   /* Change color of dropdown links on hover */
          background-color: #f1f1f1
        }  .dropdown:hover .dropdown-content {   /* Show the dropdown menu on hover */
            display: block;
        }
  
        /* Home section of the page */
        .bg-head {
          min-height: 100vh;
          background-image: url(bgtest.jpg);
          overflow: auto;
        } .bg-head img {
          padding-top: 15vh;
          padding-bottom: 10px;
        } .bg-head p {
          background-color: white;
          opacity: 0.8;
          padding: 10px;
        } .bg-head .center {
              margin: auto;
        }
  
        /* Define the Section type 1 */
        .bg-1 {
          min-height: 100vh;
          background-color: #39f;
          color: #222;
          overflow: auto;
        } .bg-1 h1 { /* Underline color */
          color: #fff;
        } .bg-1 span { /* header text color */
          color: #222;
        } .bg-1 img {
          padding: 5px;
        }
  
        /* Define the Section type 2 */
        .bg-2 {
          min-height: 100vh;
          background-color: #222;
          color: #eee;
          overflow: auto;
        } .bg-2 h1 { /* Underline color */
          color: #39f;
        } .bg-2 span { /* header text color */
          color: #eee;
        }
  
        /* Define the Section type 3 */
        .bg-3 {
          min-height: 100vh;
          background-color: #fff;
          overflow: auto;
          color: #222;
        } .bg-3 h1 { /* Underline color */
          color: #39f;
        } .bg-3 span { /* header text color */
          color: #222;
        } .bg-3 iframe {
          height: auto;
          width: auto;
          padding: 10px;
          margin: auto;
        }
  
        .bg-footer {
          background-color: #444;
          color: #fff;
          height: 5em;
          padding-top: 2em;
          font-size: 1em;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body data-spy="scroll" data-target=".navbar"&gt;
  
      &lt;!-- Navbar --&gt;
      &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
        &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
            &lt;ul class="nav navbar-nav navbar-left"&gt;
              &lt;li&gt;&lt;a href="#Home"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#About"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#Interests"&gt;Interests and Specialities&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a  href="#Insurance"&gt;Insurance&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#Contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#Resources"&gt;Resources&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  
      &lt;!-- First Container --&gt;
      &lt;div id="Home" class="container-fluid bg-head"&gt;
        &lt;row&gt;
          &lt;div class="col-sm-4"&gt;&lt;/div&gt;
          &lt;div class="col-sm-4"&gt;
            &lt;img src="test1.png" class="img-responsive img-circle margin center" style="display:inline" alt="Parish Counseling Service" width="350" height="350"/&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-4"&gt; &lt;/div&gt;
        &lt;/row&gt;
  
        &lt;row&gt;
          &lt;div class="col-sm-2"&gt;&lt;/div&gt;
          &lt;div class="col-sm-8"&gt;
              &lt;p&gt;
                Fry! Quit doing the right thing, you jerk! Wow! A superpowers drug
                you can just rub onto your skin? You'd think it would be something
                you'd have to freebase. Well, then good news! It's a suppository.
                Okay, it's 500 dollars, you have no choice of carrier, the battery
                can't hold the charge and the reception isn't very…
                Fry! Quit doing the right thing, you jerk! Wow! A superpowers drug
                you can just rub onto your skin? You'd think it would be something
                you'd have to freebase. Well, then good news! It's a suppository.
                Okay, it's 500 dollars, you have no choice of carrier, the battery
                can't hold the charge and the reception isn't very…
              &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-2"&gt;  &lt;/div&gt;
        &lt;/row&gt;
      &lt;/div&gt;
  
      &lt;!-- Second Container --&gt;
      &lt;div id="About" class="container-fluid bg-1"&gt;
        &lt;row class="text-center"&gt;
          &lt;div class="col-sm-1"&gt;&lt;/div&gt;
          &lt;div class="col-sm-10"&gt;&lt;h1&gt;&lt;span&gt;About Me&lt;span&gt;&lt;/h1&gt;&lt;/div&gt;
          &lt;div class="col-sm-1"&gt;&lt;/div&gt;
        &lt;/row&gt;
        &lt;row&gt;
          &lt;div class="col-sm-3"&gt;&lt;/div&gt;
          &lt;div class="col-sm-6"&gt;
             &lt;img src="test2.png" class="img-responsive margin" align="left" alt="Greg" width="200" height="200"&gt;
            &lt;p&gt;
              Fry! Quit doing the right thing, you jerk! Wow! A superpowers drug
              you can just rub onto your skin? You'd think it would be something
              you'd have to freebase. Well, then good news! It's a suppository.
              Okay, it's 500 dollars, you have no choice of carrier, the battery
              can't hold the charge and the reception isn't very…
              Fry! Quit doing the right thing, you jerk! Wow! A superpowers drug
              you can just rub onto your skin? You'd think it would be something
              you'd have to freebase. Well, then good news! It's a suppository.
              Okay, it's 500 dollars, you have no choice of carrier, the battery
              can't hold the charge and the reception isn't very…
            &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-3"&gt;&lt;/div&gt;
        &lt;/row&gt;
      &lt;/div&gt;
  
      &lt;!-- Third Container (Grid) --&gt;
      &lt;div id="Interests" class="container-fluid bg-2"&gt;
        &lt;row class="text-center"&gt;
          &lt;div class="col-sm-1"&gt;&lt;/div&gt;
          &lt;div class="col-sm-10"&gt;&lt;h1&gt;&lt;span&gt;Areas of interests and specializations&lt;span&gt;&lt;/h1&gt;&lt;/div&gt;
          &lt;div class="col-sm-1"&gt;&lt;/div&gt;
        &lt;/row&gt;
        &lt;row&gt;
            &lt;div class="col-sm-2"&gt;&lt;/div&gt;
            &lt;div class="col-sm-4"&gt;
              &lt;ul&gt;
                &lt;li&gt;Daddy Bender, we're hungry.&lt;/li&gt;
                &lt;li&gt;There's one way and only one way to determine if an animal is intelligent.&lt;/li&gt;
                &lt;li&gt;Dissect its brain!&lt;/li&gt;
                &lt;li&gt;You mean while I'm sleeping in it?&lt;/li&gt;
                &lt;li&gt;Who am I making this out to?&lt;/li&gt;
                &lt;li&gt;We can't compete with Mom!&lt;/li&gt;
                &lt;li&gt;Her company is big and evil!&lt;/li&gt;
                &lt;li&gt;Ours is small and neutral!&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div class="col-sm-4"&gt;
              &lt;ul&gt;
                &lt;li&gt;Daddy Bender, we're hungry.&lt;/li&gt;
                &lt;li&gt;There's one way and only one way to determine if an animal is intelligent.&lt;/li&gt;
                &lt;li&gt;Dissect its brain!&lt;/li&gt;
                &lt;li&gt;You mean while I'm sleeping in it?&lt;/li&gt;
                &lt;li&gt;Who am I making this out to?&lt;/li&gt;
                &lt;li&gt;We can't compete with Mom!&lt;/li&gt;
                &lt;li&gt;Her company is big and evil!&lt;/li&gt;
                &lt;li&gt;Ours is small and neutral!&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div class="col-sm-2"&gt;&lt;/div&gt;
        &lt;/row&gt;
      &lt;/div&gt;
  
      &lt;!-- Forth Container (Grid) --&gt;
      &lt;div id="Insurance" class="container-fluid bg-1"&gt;
        &lt;row class="text-center"&gt;
          &lt;div class="col-sm-2"&gt;&lt;/div&gt;
          &lt;div class="col-sm-8"&gt;&lt;h1&gt;&lt;span&gt;Accepting fees and Insurance&lt;span&gt;&lt;/h1&gt;&lt;/div&gt;
          &lt;div class="col-sm-2"&gt;&lt;/div&gt;
        &lt;/row&gt;
        &lt;row&gt;
          &lt;div class="col-sm-3"&gt;&lt;/div&gt;
          &lt;div class="col-sm-6"&gt;
            &lt;p&gt;
              Morbo can't understand his teleprompter because he forgot how you say that letter that's shaped like a man wearing a hat. Oh Leela! You're the only person I could turn to; you're the only person who ever loved me.
              Anyone who laughs is a communist! There's no part of that sentence I didn't like! Tell them I hate them. Bite my shiny metal ass. So I really am important? How I feel when I'm drunk is correct.
              I found what I need. And it's not friends, it's things. Kids don't turn rotten just from watching TV. Kif, I have mated with a woman. Inform the men. Yes, except the Dave Matthews Band doesn't rock. Tell her she looks thin.
            &lt;/p&gt;
            &lt;p&gt;
              option1 &lt;br&gt;
              option1 &lt;br&gt;
              option1 &lt;br&gt;
              option1 &lt;br&gt;
            &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-3"&gt;&lt;/div&gt;
        &lt;/row&gt;
      &lt;/div&gt;
  
      &lt;!-- Fifth Container (Grid) --&gt;
      &lt;div id="Contact" class="container-fluid bg-3"&gt;
        &lt;row class="text-center"&gt;
          &lt;div class="col-sm-2"&gt;&lt;/div&gt;
          &lt;div class="col-sm-8"&gt;&lt;h1&gt;&lt;span&gt;Location and Contact Information&lt;span&gt;&lt;/h1&gt;&lt;/div&gt;
          &lt;div class="col-sm-2"&gt;&lt;/div&gt;
        &lt;/row&gt;
        &lt;row&gt;
          &lt;div class="col-sm-2"&gt; &lt;span&gt; &lt;/span&gt; &lt;/div&gt;
          &lt;div class="col-sm-8"&gt;
            &lt;row&gt;
                &lt;div class="col-sm-6"&gt; &lt;!-- Contact Email --&gt;
                  Bender?! You stole the atom.&lt;br&gt;
                  You lived before you met me?! &lt;br&gt;&lt;br&gt;
                  We're also Santa Claus! &lt;br&gt;
                  I had more, but you go ahead. &lt;br&gt;&lt;br&gt;
                  Professor, make a woman out of me.&lt;br&gt;
                &lt;/div&gt;
                &lt;div class="col-sm-6"&gt; &lt;!-- Embeded Map --&gt;
                  &lt;iframe
                    frameborder="0" style="border:0"
                    src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBV0yLhoKn-BsyktBdZpla1VKfOCikqzgQ&amp;q=Space+Needle,Seattle+WA" allowfullscreen&gt;
                  &lt;/iframe&gt;
                &lt;/div&gt;
            &lt;/row&gt;
            &lt;row&gt;
                &lt;form&gt;
                  &lt;div class="col-sm-4"&gt; &lt;!-- Name, Email, Subject --&gt;
                    &lt;div class="form-group"&gt;
                      &lt;input type="text" class="form-control" placeholder="Name"&gt;
                    &lt;/div&gt;
                    &lt;div class="form-group"&gt;
                      &lt;input type="text" class="form-control" placeholder="Email"&gt;
                    &lt;/div&gt;
                    &lt;div class="form-group"&gt;
                      &lt;input type="text" class="form-control" placeholder="Subject"&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-8"&gt; &lt;!-- Message, Send --&gt;
                    &lt;div class="form-group"&gt;
                      &lt;textarea class="form-control" rows="3" placeholder="Message" width="100%"&gt;&lt;/textarea&gt;
                    &lt;/div&gt;
                    &lt;div class="form-group"&gt;
                      &lt;button width="100%" type="submit" class="btn btn-default"  &gt;Send&lt;/button&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/form&gt;
            &lt;/row&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-2"&gt;&lt;span&gt; &lt;/span&gt;&lt;/div&gt;
        &lt;/row&gt;
      &lt;/div&gt;
  
      &lt;!-- Sixth Container (Grid) --&gt;
      &lt;div id="Resources" class="container-fluid bg-1 text-center"&gt;
        &lt;row&gt;
          &lt;div class="col-sm-2"&gt;&lt;/div&gt;
          &lt;div class="col-sm-8"&gt;&lt;h1&gt;&lt;span&gt;Resources&lt;span&gt;&lt;/h1&gt;&lt;/div&gt;
          &lt;div class="col-sm-2"&gt;&lt;/div&gt;
        &lt;/row&gt;
        &lt;row&gt;
          &lt;div class="col-sm-12"&gt;
            Bender, hurry! This fuel's expensive! &lt;br&gt;
             Also, we're dying! Soon enough. &lt;br&gt;&lt;br&gt;
             You lived before you met me?! &lt;br&gt;&lt;br&gt;
             Bender, hurry! This fuel's expensive! &lt;br&gt;
             Also, we're dying! Fry! &lt;br&gt;&lt;br&gt;
             Stay back! He's too powerful! &lt;br&gt;
             I guess if you want children beaten, you have to do it yourself.&lt;br&gt;&lt;br&gt;
             Bender, hurry! This fuel's expensive! &lt;br&gt;
              Also, we're dying! Soon enough. &lt;br&gt;&lt;br&gt;
              You lived before you met me?! &lt;br&gt;&lt;br&gt;
              Bender, hurry! This fuel's expensive! &lt;br&gt;
              Also, we're dying! Fry! &lt;br&gt;&lt;br&gt;
            &lt;/div&gt;
         &lt;/row&gt;
      &lt;/div&gt;
      &lt;footer class="container-fluid bg-footer text-center"&gt;
        No Worries
      &lt;/footer&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I used Futurama Stuff got the dummy material. Here is what I am seeing:</p>
  
  <p>Both should have a column of size 2 centering them
  bg-head
  <a href="https://i.stack.imgur.com/msCui.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/msCui.jpg" alt="Text Box should be centered"></a></p>
  
  <p>bg-3
  <a href="https://i.stack.imgur.com/8DvbU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8DvbU.png" alt="Whole section should be centered"></a></p>