Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Framework Basics Build a Website with Bootstrap Building with Bootstrap

Romain Galli
Romain Galli
4,584 Points
Posted by Romain Galli
Romain Galli
4,584 Points

Can't figure out why I get Bummer on Build a Website with Bootstrap Stage 3

Here is my code: Bootstrap Class to showcases key content is "hero-unit" right? What is wrong?!

<!-- Headline --> <div class="hero-unit">

  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <h1>Self-destructing messages are only a hop away.</h1>
        <p class="lead">Learn how to build this fun little app by signing up for a Treehouse account today! We'll teach you how to build both apps from scratch!</p>
        <p class="lead">Or download the app and try it first.</p>
        <p class="lead">
          <a class="btn btn-default btn-lg" href="#" data-icon="&#xe001;">iOS</a>
          <a class="btn btn-default btn-lg" href="#" data-icon="&#xe002;">Android</a>
        </p>
      </div>
      <div class="col-sm-6">
        <div class="device pull-right"></div>
      </div>
    </div>
  </div>

</div><!-- End Headline -->

Any help much appreciated! Thx

index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Ribbit - A Treehouse Project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

    <!--Navbar -->
    <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <a class="main-logo pull-left" href="#">Ribbit</a>
      </div>
    </div><!-- End navbar -->

    <!-- Headline -->
    <div class="hero-unit">

      <div class="container">
        <div class="row">
          <div class="col-sm-6">
            <h1>Self-destructing messages are only a hop away.</h1>
            <p class="lead">Learn how to build this fun little app by signing up for a Treehouse account today! We'll teach you how to build both apps from scratch!</p>
            <p class="lead">Or download the app and try it first.</p>
            <p class="lead">
              <a class="btn btn-default btn-lg" href="#" data-icon="&#xe001;">iOS</a>
              <a class="btn btn-default btn-lg" href="#" data-icon="&#xe002;">Android</a>
            </p>
          </div>
          <div class="col-sm-6">
            <div class="device pull-right"></div>
          </div>
        </div>
      </div>

    </div><!-- End Headline -->

    <!-- Feature Content -->
    <div class="container">
      <div class="row ft">

        <div class="hidden-xs">
          <div class="ft-icon camera"></div>
        </div>

        <div class="ft-copy">
          <h2>Securely delete photos &amp; video based on a timer</h2>
          <p>
            Learn how to write the code that downloads and displays messages, photos, and videos that timeout after a few seconds. Then create the code that deletes them from the back-end to make them "self destruct."
          </p>
        </div>

      </div>

    </div><!-- End Feature Content -->

  </body>
</html>

2 Answers

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Hi Romain,

The component in bootstrap for key content is the jumbotron

Romain Galli
Romain Galli
4,584 Points
Romain Galli
Romain Galli
4,584 Points

Ha ok! My mistake. According to BS the Hero unit is a also a way to showcase key content:

Hero unit "A lightweight, flexible component to showcase key content on your site."

Thanks for the quick response anyway!!