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

HTML

Posted by james white
james white
78,399 Points

Css Framework Basics Building with Bootstrap Challenge

Challenge Link:

http://teamtreehouse.com/library/framework-basics/build-a-website-with-bootstrap/building-with-bootstrap

This is a very hard challenge after a long series of videos and it's only one section of a very long course:

http://teamtreehouse.com/library/framework-basics

The Bootstrap docs are incredibly dry.

Help on this challenge is both scattered and incomplete so I'm going to take pity on those struggling to get through at least this challenge.

I had to step away from it several times (got so frustrated) and come back to it over several weeks to complete all five parts of the challenge:

Challenge Task 1 of 5

First, give the .main-logo element Bootstrap's class for floating left.

Challenge Task 2 of 5

We need to give the first div in the 'Headline' section Bootstrap's class for showcasing key content on a site.

Challenge Task 3 of 5

Give the column on line 31 a class that will hide it in extra small devices

Challenge Task 4 of 5

Find the row on line 41. Give each child div of .row a column class that spans 6 columns in small devices and up.

Challenge Task 5 of 5

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

The code:

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

        <div class="col-sm-6 hidden-xs"> 
        <div class="ft-icon camera img-rounded">
        </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>

```html

Happy Bootstrapping! :thumbsup:

5 Answers

JASON RASHIDNIA
JASON RASHIDNIA
3,197 Points
JASON RASHIDNIA
JASON RASHIDNIA
3,197 Points

Img-rounded are you kidding? That was never mentioned. I was sitting here for hours trying to figure it out. THANK YOU James.

Brad van Eden
Brad van Eden
9,110 Points
Brad van Eden
Brad van Eden
9,110 Points

Thank you James! :)

Ja'Nel Johnson
Ja'Nel Johnson
10,314 Points
Ja'Nel Johnson
Ja'Nel Johnson
10,314 Points

THANK YOU!

Marie Urbina
Marie Urbina
7,168 Points
Marie Urbina
Marie Urbina
7,168 Points

Thank you James. I didn't see "img-rounded" when I looked online for the answer, either. Wherever did you find it? :) Thanks so much.

Nelson Lourenco
Nelson Lourenco
1,766 Points
Nelson Lourenco
Nelson Lourenco
1,766 Points

Wow thanks James!

Just want to reiterate my disappointment with this quiz.

Task 4/5 does not validate to correct unless you put the "col-sm-6" in the arbitrary order of the answer above!

And as another poster mentioned above, "img-rounded" for "adding a border-radius on each side" Give me a break.