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!

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

HTML

Posted by William Schott
William Schott
1,624 Points

Framework Basics Final Challenge 5/5

Having trouble with this one. Please help.

Give the div on line 44 Bootstrap's class for adding a border-radius on each side.

<!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="jumbotron">

  <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 hidden-xs">
        <div class="device pull-right"></div>
      </div>
    </div>
  </div>

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

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

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

    <div class="ft-copy col-sm-6">
      <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>

5 Answers

Alex Edwards
Alex Edwards
7,680 Points
Alex Edwards
Alex Edwards
7,680 Points

I've figured it out. It uses img-rounded.

Bernardo Bonança
Bernardo Bonança
10,773 Points
Bernardo Bonança
Bernardo Bonança
10,773 Points

Remember that having Bootstrap documentation handy helps a lot. I dont think its cheating since you also get to do it on real projects :P

Chris Scott
Chris Scott
7,673 Points
Chris Scott
Chris Scott
7,673 Points

You need to be a little creative and "think outside the box" for this one.

Alex Edwards
Alex Edwards
7,680 Points
Alex Edwards
Alex Edwards
7,680 Points

Can someone please help with this question. I read the Bootstrap documentation on rounded corners and tried those classes but it still doesn't work.

Joel Rivera
Joel Rivera
29,401 Points
Joel Rivera
Joel Rivera
29,401 Points

Not sure if you guys got the answer but this is what line 44 should look like. <div class="ft-icon camera img-rounded"></div> The class that's added is img-rounded and you can see it on the bootstrap documentation here http://getbootstrap.com/css/#images