Bootstrap 3列不会保持放置/消失

时间:2017-06-13 01:30:38

标签: html css twitter-bootstrap

我正在开发一个简单的html页面,充分利用了bootstrap列,我遇到了最棘手的问题。列正在消失在我身上。或者至少当我看到萤火虫没有去他们应该去的地方时。我希望有人能够知道我犯的是什么愚蠢的错误,或者也许是我被愚弄的怪癖。

这是我的嵌入式CSS:



<!DOCTYPE html>
<html lang="en">
  <head>
    <title> test </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
      /* 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 <div> - 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;
      }
    </style>
  </head>
  <body data-spy="scroll" data-target=".navbar">

    <!-- Navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav navbar-left">
            <li><a href="#Home">Home</a></li>
            <li><a href="#About">About</a></li>
            <li><a href="#Interests">Interests and Specialities</a></li>
            <li><a  href="#Insurance">Insurance</a></li>
            <li><a href="#Contact">Contact</a></li>
            <li><a href="#Resources">Resources</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- First Container -->
    <div id="Home" class="container-fluid bg-head">
      <row>
        <div class="col-sm-4"></div>
        <div class="col-sm-4">
          <img src="test1.png" class="img-responsive img-circle margin center" style="display:inline" alt="Parish Counseling Service" width="350" height="350"/>
        </div>
        <div class="col-sm-4"> </div>
      </row>

      <row>
        <div class="col-sm-2"></div>
        <div class="col-sm-8">
            <p>
              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…
            </p>
        </div>
        <div class="col-sm-2">  </div>
      </row>
    </div>

    <!-- Second Container -->
    <div id="About" class="container-fluid bg-1">
      <row class="text-center">
        <div class="col-sm-1"></div>
        <div class="col-sm-10"><h1><span>About Me<span></h1></div>
        <div class="col-sm-1"></div>
      </row>
      <row>
        <div class="col-sm-3"></div>
        <div class="col-sm-6">
           <img src="test2.png" class="img-responsive margin" align="left" alt="Greg" width="200" height="200">
          <p>
            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…
          </p>
        </div>
        <div class="col-sm-3"></div>
      </row>
    </div>

    <!-- Third Container (Grid) -->
    <div id="Interests" class="container-fluid bg-2">
      <row class="text-center">
        <div class="col-sm-1"></div>
        <div class="col-sm-10"><h1><span>Areas of interests and specializations<span></h1></div>
        <div class="col-sm-1"></div>
      </row>
      <row>
          <div class="col-sm-2"></div>
          <div class="col-sm-4">
            <ul>
              <li>Daddy Bender, we're hungry.</li>
              <li>There's one way and only one way to determine if an animal is intelligent.</li>
              <li>Dissect its brain!</li>
              <li>You mean while I'm sleeping in it?</li>
              <li>Who am I making this out to?</li>
              <li>We can't compete with Mom!</li>
              <li>Her company is big and evil!</li>
              <li>Ours is small and neutral!</li>
            </ul>
          </div>
          <div class="col-sm-4">
            <ul>
              <li>Daddy Bender, we're hungry.</li>
              <li>There's one way and only one way to determine if an animal is intelligent.</li>
              <li>Dissect its brain!</li>
              <li>You mean while I'm sleeping in it?</li>
              <li>Who am I making this out to?</li>
              <li>We can't compete with Mom!</li>
              <li>Her company is big and evil!</li>
              <li>Ours is small and neutral!</li>
            </ul>
          </div>
          <div class="col-sm-2"></div>
      </row>
    </div>

    <!-- Forth Container (Grid) -->
    <div id="Insurance" class="container-fluid bg-1">
      <row class="text-center">
        <div class="col-sm-2"></div>
        <div class="col-sm-8"><h1><span>Accepting fees and Insurance<span></h1></div>
        <div class="col-sm-2"></div>
      </row>
      <row>
        <div class="col-sm-3"></div>
        <div class="col-sm-6">
          <p>
            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.
          </p>
          <p>
            option1 <br>
            option1 <br>
            option1 <br>
            option1 <br>
          </p>
        </div>
        <div class="col-sm-3"></div>
      </row>
    </div>

    <!-- Fifth Container (Grid) -->
    <div id="Contact" class="container-fluid bg-3">
      <row class="text-center">
        <div class="col-sm-2"></div>
        <div class="col-sm-8"><h1><span>Location and Contact Information<span></h1></div>
        <div class="col-sm-2"></div>
      </row>
      <row>
        <div class="col-sm-2"> <span> </span> </div>
        <div class="col-sm-8">
          <row>
              <div class="col-sm-6"> <!-- Contact Email -->
                Bender?! You stole the atom.<br>
                You lived before you met me?! <br><br>
                We're also Santa Claus! <br>
                I had more, but you go ahead. <br><br>
                Professor, make a woman out of me.<br>
              </div>
              <div class="col-sm-6"> <!-- Embeded Map -->
                <iframe
                  frameborder="0" style="border:0"
                  src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBV0yLhoKn-BsyktBdZpla1VKfOCikqzgQ&q=Space+Needle,Seattle+WA" allowfullscreen>
                </iframe>
              </div>
          </row>
          <row>
              <form>
                <div class="col-sm-4"> <!-- Name, Email, Subject -->
                  <div class="form-group">
                    <input type="text" class="form-control" placeholder="Name">
                  </div>
                  <div class="form-group">
                    <input type="text" class="form-control" placeholder="Email">
                  </div>
                  <div class="form-group">
                    <input type="text" class="form-control" placeholder="Subject">
                  </div>
                </div>
                <div class="col-sm-8"> <!-- Message, Send -->
                  <div class="form-group">
                    <textarea class="form-control" rows="3" placeholder="Message" width="100%"></textarea>
                  </div>
                  <div class="form-group">
                    <button width="100%" type="submit" class="btn btn-default"  >Send</button>
                  </div>
                </div>
              </form>
          </row>
        </div>
        <div class="col-sm-2"><span> </span></div>
      </row>
    </div>

    <!-- Sixth Container (Grid) -->
    <div id="Resources" class="container-fluid bg-1 text-center">
      <row>
        <div class="col-sm-2"></div>
        <div class="col-sm-8"><h1><span>Resources<span></h1></div>
        <div class="col-sm-2"></div>
      </row>
      <row>
        <div class="col-sm-12">
          Bender, hurry! This fuel's expensive! <br>
           Also, we're dying! Soon enough. <br><br>
           You lived before you met me?! <br><br>
           Bender, hurry! This fuel's expensive! <br>
           Also, we're dying! Fry! <br><br>
           Stay back! He's too powerful! <br>
           I guess if you want children beaten, you have to do it yourself.<br><br>
           Bender, hurry! This fuel's expensive! <br>
            Also, we're dying! Soon enough. <br><br>
            You lived before you met me?! <br><br>
            Bender, hurry! This fuel's expensive! <br>
            Also, we're dying! Fry! <br><br>
          </div>
       </row>
    </div>
    <footer class="container-fluid bg-footer text-center">
      No Worries
    </footer>
  </body>
</html>
&#13;
&#13;
&#13;

我用Futurama Stuff得到了虚拟材料。这就是我所看到的:

两者都应该有一个大小为2的列 BG-头 Text Box should be centered

BG-3 Whole section should be centered

1 个答案:

答案 0 :(得分:1)

我从未见过<row>标签。

如果你使用带有div的bootstrap行类,这将有效。将<row>替换为<div class="row">(并将</row>替换为</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
  /* 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 <div> - 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;
  }
</style>
</head>

<body data-spy="scroll" data-target=".navbar">

  <!-- Navbar -->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-left">
          <li><a href="#Home">Home</a></li>
          <li><a href="#About">About</a></li>
          <li><a href="#Interests">Interests and Specialities</a></li>
          <li><a href="#Insurance">Insurance</a></li>
          <li><a href="#Contact">Contact</a></li>
          <li><a href="#Resources">Resources</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- First Container -->
  <div id="Home" class="container-fluid bg-head">
    <div class="row">
      <div class="col-sm-4"></div>
      <div class="col-sm-4">
        <img src="test1.png" class="img-responsive img-circle margin center" style="display:inline" alt="Parish Counseling Service" width="350" height="350" />
      </div>
      <div class="col-sm-4"> </div>
    </div>
    <div class="row">
      <div class="col-sm-2"></div>
      <div class="col-sm-8">
        <p>
          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…
        </p>
      </div>
      <div class="col-sm-2"> </div>
    </div>
  </div>

  <!-- Second Container -->
  <div id="About" class="container-fluid bg-1">
    <row class="text-center">
      <div class="col-sm-1"></div>
      <div class="col-sm-10">
        <h1><span>About Me<span></h1></div>
        <div class="col-sm-1"></div>
      </row>
      <row>
        <div class="col-sm-3"></div>
        <div class="col-sm-6">
           <img src="test2.png" class="img-responsive margin" align="left" alt="Greg" width="200" height="200">
          <p>
            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…
          </p>
        </div>
        <div class="col-sm-3"></div>
      </row>
    </div>

    <!-- Third Container (Grid) -->
    <div id="Interests" class="container-fluid bg-2">
      <row class="text-center">
        <div class="col-sm-1"></div>
        <div class="col-sm-10"><h1><span>Areas of interests and specializations<span></h1></div>
        <div class="col-sm-1"></div>
      </row>
      <row>
          <div class="col-sm-2"></div>
          <div class="col-sm-4">
            <ul>
              <li>Daddy Bender, we're hungry.</li>
              <li>There's one way and only one way to determine if an animal is intelligent.</li>
              <li>Dissect its brain!</li>
              <li>You mean while I'm sleeping in it?</li>
              <li>Who am I making this out to?</li>
              <li>We can't compete with Mom!</li>
              <li>Her company is big and evil!</li>
              <li>Ours is small and neutral!</li>
            </ul>
          </div>
          <div class="col-sm-4">
            <ul>
              <li>Daddy Bender, we're hungry.</li>
              <li>There's one way and only one way to determine if an animal is intelligent.</li>
              <li>Dissect its brain!</li>
              <li>You mean while I'm sleeping in it?</li>
              <li>Who am I making this out to?</li>
              <li>We can't compete with Mom!</li>
              <li>Her company is big and evil!</li>
              <li>Ours is small and neutral!</li>
            </ul>
          </div>
          <div class="col-sm-2"></div>
      </row>
    </div>

    <!-- Forth Container (Grid) -->
    <div id="Insurance" class="container-fluid bg-1">
      <row class="text-center">
        <div class="col-sm-2"></div>
        <div class="col-sm-8"><h1><span>Accepting fees and Insurance<span></h1></div>
        <div class="col-sm-2"></div>
      </row>
      <row>
        <div class="col-sm-3"></div>
        <div class="col-sm-6">
          <p>
            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.
          </p>
          <p>
            option1 <br>
            option1 <br>
            option1 <br>
            option1 <br>
          </p>
        </div>
        <div class="col-sm-3"></div>
      </row>
    </div>

    <!-- Fifth Container (Grid) -->
    <div id="Contact" class="container-fluid bg-3">
      <row class="text-center">
        <div class="col-sm-2"></div>
        <div class="col-sm-8"><h1><span>Location and Contact Information<span></h1></div>
        <div class="col-sm-2"></div>
      </row>
      <row>
        <div class="col-sm-2"> <span> </span> </div>
      <div class="col-sm-8">
        <row>
          <div class="col-sm-6">
            <!-- Contact Email -->
            Bender?! You stole the atom.<br> You lived before you met me?! <br><br> We're also Santa Claus! <br> I had more, but you go ahead. <br><br> Professor, make a woman out of me.<br>
          </div>
          <div class="col-sm-6">
            <!-- Embeded Map -->
            <iframe frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBV0yLhoKn-BsyktBdZpla1VKfOCikqzgQ&q=Space+Needle,Seattle+WA" allowfullscreen>
                </iframe>
          </div>
        </row>
        <row>
          <form>
            <div class="col-sm-4">
              <!-- Name, Email, Subject -->
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Name">
              </div>
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Email">
              </div>
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Subject">
              </div>
            </div>
            <div class="col-sm-8">
              <!-- Message, Send -->
              <div class="form-group">
                <textarea class="form-control" rows="3" placeholder="Message" width="100%"></textarea>
              </div>
              <div class="form-group">
                <button width="100%" type="submit" class="btn btn-default">Send</button>
              </div>
            </div>
          </form>
        </row>
      </div>
      <div class="col-sm-2"><span> </span></div>
    </row>
  </div>

  <!-- Sixth Container (Grid) -->
  <div id="Resources" class="container-fluid bg-1 text-center">
    <row>
      <div class="col-sm-2"></div>
      <div class="col-sm-8">
        <h1><span>Resources<span></h1></div>
        <div class="col-sm-2"></div>
      </row>
      <row>
        <div class="col-sm-12">
          Bender, hurry! This fuel's expensive! <br>
           Also, we're dying! Soon enough. <br><br>
           You lived before you met me?! <br><br>
           Bender, hurry! This fuel's expensive! <br>
           Also, we're dying! Fry! <br><br>
           Stay back! He's too powerful! <br>
           I guess if you want children beaten, you have to do it yourself.<br><br>
           Bender, hurry! This fuel's expensive! <br>
            Also, we're dying! Soon enough. <br><br>
            You lived before you met me?! <br><br>
            Bender, hurry! This fuel's expensive! <br>
            Also, we're dying! Fry! <br><br>
          </div>
       </row>
    </div>
    <footer class="container-fluid bg-footer text-center">
      No Worries
    </footer>
  </body>
</html>