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

mansoor ali
mansoor ali
5,662 Points
Posted by mansoor ali
mansoor ali
5,662 Points

BORDER radius

how to insert the border radius in bootstrap

<!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="border-radius ft-icon camera col-sm-6"></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>

this is my code i am struck in border radius

pls give me the correct code for this task

7 Answers

mansoor ali
mansoor ali
5,662 Points
mansoor ali
mansoor ali
5,662 Points

this is the correct 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 col-sm-6">

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

Andrew Whitfield
Andrew Whitfield
5,239 Points

Hi Monsoor,

You have to do some of this work yourself, too. What is on line 44 of the above code. If you can't locate line 44, then you won't be able to get a lot of success with the various code challenges. So, let's try to make sure you can find the parts that are referred to in the exercise.

Can you please identify just line 44 and then identify from the CSS which class name, which will look something like a dot followed by a name and a space and an opening curly bracket.

If you can identify what those are, then it's easier to show you how to apply the class to the existing line, but copying and pasting isn't a solution to learning.

Andrew Whitfield
Andrew Whitfield
5,239 Points
Andrew Whitfield
Andrew Whitfield
5,239 Points

Hi Mansoor,

You've got quite a few elements on that example.

Let's say you wanted to add a border radius to this element:

<div class="container">...</div>

Then, your css might look something like this:

.container {
    -webkit-border-radius: 10px; /** newer webkit browsers **/
    -khtml-border-radius: 10px; /** older webkit browsers **/
    -moz-border-radius: 10px; /** older gecko browsers **/
    -o-border-radius: 10px; /** older opera browsers **/
    border-radius: 10px; /** all modern browsers, including IE9+, but see below **/
}

However, as you can expect, IE presents some issues.

These are made clearer by David Walsh, if you look at the section on IE9 and older browsers. There is an alternative approach here with Jon Raasch's .htc solution.

One thing to also bear in mind is that just because a feature is available in CSS3, it doesn't mean that you have to make every browser look the same. As long as the renderings are consistent with the user experience in the browsers on which they are delivered, you should consider CSS3 features as non-critical enhancements, as far as is possible to do.

Andrew Whitfield
Andrew Whitfield
5,239 Points
Andrew Whitfield
Andrew Whitfield
5,239 Points

What is the elements to which you want to add a border radius and what style properties are you seeking to set?

mansoor ali
mansoor ali
5,662 Points
mansoor ali
mansoor ali
5,662 Points

i need to set the rounded corner of this element

mansoor ali
mansoor ali
5,662 Points
mansoor ali
mansoor ali
5,662 Points

i need to set the rounded corner of this element

mansoor ali
mansoor ali
5,662 Points
mansoor ali
mansoor ali
5,662 Points

Challenge task 5 of 5

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

Bummer! Make sure you're giving the div on line 44 Bootstrap's class for rounded corners

<!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="border-radius ft-icon camera col-sm-6"></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>

mansoor ali
mansoor ali
5,662 Points
mansoor ali
mansoor ali
5,662 Points

thankyou so much

i have no idea for this

thankyou

Andrew Whitfield
Andrew Whitfield
5,239 Points
Andrew Whitfield
Andrew Whitfield
5,239 Points

HI Monsoor, I think the issue is one of comprehension.

It appears that you're asked to USE the class in the bootstrap CSS file.

Do you know what the class is from the CSS file that has the border-radius property listed?

If so, go down to line 44 of the html and add the class name between the quotes where it has class="...". That is all it means, I believe.

But you will need to open the tab where it shows the Bootstrap CSS first, find the class name and then edit the 44th line of the html to include that class name.

mansoor ali
mansoor ali
5,662 Points
mansoor ali
mansoor ali
5,662 Points

give me the correct code for 44 of the html line

Andrew Whitfield
Andrew Whitfield
5,239 Points

What's currently on line 44, I'll use that to update you. I can't see the line numbers at the moment.

Also, what's the class from Bootstrap?

If you can identify those, then I can help you put them together.

Scott Lundgren
PLUS
Scott Lundgren
Courses Plus Student 12,521 Points
Scott Lundgren
Scott Lundgren
Courses Plus Student 12,521 Points

Rewatch the video on Adding the Feature Icons starting at 3 minutes and 15 seconds into the video.

Steven Del Rio
Steven Del Rio
17,746 Points
Steven Del Rio
Steven Del Rio
17,746 Points

Hi,

Simply add 'img-rounded' to line 44