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 Bootstrap 4 Basics (Retired) Using Bootstrap Components Building a Navbar

Ben Ahlander
Ben Ahlander
7,528 Points
Posted by Ben Ahlander
Ben Ahlander
7,528 Points

Why is my nav bar not recognizing the bootstrap?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Full Stack Conf</title>
    <!-- bootstrap css -->

  </head>
  <body>

<!--    navbar-->
   <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#about">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#speakers">Speakers</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#schedule">Schedule</a>
      </li>
    </ul>
    <a class="navbar-brand"> presented by treehouse </a>
  </div>
</nav>

    <!--    navbar-->

    <div class="container pt-5">
  <div class="row">
    <div class="col-md-4 push-lg-4">
      <h3 class="mb-4">About Full Stack Conf</h3>
      <img class="mb-3 img-fluid rounded hidden-xs-down" src="img/pdx.jpg" alt="Portland">
<p>The beautiful city of Portland, Oregon will be the host city for Full Stack Conf!</p>
<p>Explore the future of JavaScript with a lineup of industry professionals. Discover new techniques to advance your career as a web developer.</p>
    </div>
    <div class="col-md-4 pull-lg-4">
     <h3>Expert Speakers</h3>
<p>Our expert speaker lineup was just announced, so don't wait too long before grabbing your tickets!</p>
<p>Want to meet the international JavaScript community and share skills with some of the world's top experts, hackers, and makers? Be the first to know what to expect for the future of JavaScript.</p>
<p>Full Stack Conf is committed to being inclusive and welcoming for everyone. We look forward to another intensive day of learning and sharing.</p>
    </div>
    <div class="col-md-4">
      <h3>What You'll Learn</h3>
<ul>
  <li><strong>MongoDB</strong>: NoSQL database</li>
  <li><strong>Angular</strong>: JavaScript framework</li>
  <li><strong>Express</strong>: Framework for Node</li>
  <li><strong>Node.js</strong>: JavaScript environment</li>
  <li><strong>ES2015</strong>: Latest version of JavaScript</li>
  <li><strong>Babel</strong>: JavaScript compiler</li>
</ul>
    </div>
  </div>

      <!-- speakers -->
<h1 class="display-4 text-center my-5 text-muted">Speakers</h1>
[Speaker bios go here]

<!-- schedule -->
<h1 class="display-4  text-center my-5 text-muted">Schedule</h1>
[Conference schedule goes here]

</div>

    <!-- signup form -->
<hr>
<div class="col-md-6 col-xl-5 offset-xl-2">
  <div class="col-md-6">
    <p><strong>About Treehouse</strong></p>
    <p>Treehouse brings affordable technology education to people everywhere to help them achieve their dreams and change the world.</p>
  </div>
 <div class="col-md-6 col-xl-5 offset-xl-2">
    <p><strong>Stay up-to-date on Full Stack Conf</strong></p>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Email">
      <span class="input-group-btn">
        <button class="btn btn-primary" type="button">Sign up</button>
      </span>
    </div>
  </div>
</div>
<hr><!-- /signup form -->


 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  </body>
</html>

3 Answers

Tray Denney
PLUS
Tray Denney
Courses Plus Student 12,884 Points
Tray Denney
Tray Denney
Courses Plus Student 12,884 Points

Looks like you could fix this by linking the Bootstrap CSS in between the opening and closing head tags. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Full Stack Conf</title>
    <!-- bootstrap css -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  </head>
Ben Ahlander
Ben Ahlander
7,528 Points
Ben Ahlander
Ben Ahlander
7,528 Points

if i do that can i delete the links to the bootstrap cdn at the bottom?

Also, do you know why my image is expanding into the other 2 columns?

Tray Denney
Tray Denney
Courses Plus Student 12,884 Points
Tray Denney
Tray Denney
Courses Plus Student 12,884 Points

Yes. Typically you put the CSS links in the header with your custom CSS as the very last CSS link while the JS links go right above the closing body tag. Check and see if adding the Bootstrap CSS links in the header fixes the columns issue. If not then you can post your HTML/CSS and I will take a look to see why they are expanding into the other columns. :)

Ben Ahlander
Ben Ahlander
7,528 Points
Ben Ahlander
Ben Ahlander
7,528 Points 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Full Stack Conf</title>
    <!-- bootstrap css -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  </head>
  <body>

<!--    navbar-->
   <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#about">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#speakers">Speakers</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#schedule">Schedule</a>
      </li>
    </ul>
    <a class="navbar-brand"> presented by treehouse </a>
  </div>
</nav>

    <!--    navbar-->

    <div class="container pt-5">
  <div class="row">
    <div class="col-md-4 push-lg-4">
      <h3 class="mb-4">About Full Stack Conf</h3>
      <img class="mb-3 img-fluid rounded hidden-xs-down" src="img/pdx.jpg" alt="Portland">
<p>The beautiful city of Portland, Oregon will be the host city for Full Stack Conf!</p>
<p>Explore the future of JavaScript with a lineup of industry professionals. Discover new techniques to advance your career as a web developer.</p>
    </div>
    <div class="col-md-4 pull-lg-4">
     <h3>Expert Speakers</h3>
<p>Our expert speaker lineup was just announced, so don't wait too long before grabbing your tickets!</p>
<p>Want to meet the international JavaScript community and share skills with some of the world's top experts, hackers, and makers? Be the first to know what to expect for the future of JavaScript.</p>
<p>Full Stack Conf is committed to being inclusive and welcoming for everyone. We look forward to another intensive day of learning and sharing.</p>
    </div>
    <div class="col-md-4">
      <h3>What You'll Learn</h3>
<ul>
  <li><strong>MongoDB</strong>: NoSQL database</li>
  <li><strong>Angular</strong>: JavaScript framework</li>
  <li><strong>Express</strong>: Framework for Node</li>
  <li><strong>Node.js</strong>: JavaScript environment</li>
  <li><strong>ES2015</strong>: Latest version of JavaScript</li>
  <li><strong>Babel</strong>: JavaScript compiler</li>
</ul>
    </div>
  </div>

      <!-- speakers -->
<h1 class="display-4 text-center my-5 text-muted">Speakers</h1>
[Speaker bios go here]

<!-- schedule -->
<h1 class="display-4  text-center my-5 text-muted">Schedule</h1>
[Conference schedule goes here]

</div>

    <!-- signup form -->
<hr>
<div class="col-md-6 col-xl-5 offset-xl-2">
  <div class="col-md-6">
    <p><strong>About Treehouse</strong></p>
    <p>Treehouse brings affordable technology education to people everywhere to help them achieve their dreams and change the world.</p>
  </div>
 <div class="col-md-6 col-xl-5 offset-xl-2">
    <p><strong>Stay up-to-date on Full Stack Conf</strong></p>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Email">
      <span class="input-group-btn">
        <button class="btn btn-primary" type="button">Sign up</button>
      </span>
    </div>
  </div>
</div>
<hr><!-- /signup form -->



<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

  </body>
</html>
Tray Denney
PLUS
Tray Denney
Courses Plus Student 12,884 Points
Tray Denney
Tray Denney
Courses Plus Student 12,884 Points

Alright. So the issue with the Navbar was that you were missing some containers. Try this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Full Stack Conf</title>
    <!-- bootstrap css -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  </head>
  <body>

<!--    navbar-->
 <nav class="navbar navbar-light bg-faded">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Navbar</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Speakers</a></li>
        <li><a href="#">Schedule</a></li>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

    <!--    navbar-->

    <div class="container pt-5">
  <div class="row">
    <div class="col-md-4 push-lg-4">
      <h3 class="mb-4">About Full Stack Conf</h3>
      <img class="mb-3 img-fluid rounded hidden-xs-down" src="img/pdx.jpg" alt="Portland">
<p>The beautiful city of Portland, Oregon will be the host city for Full Stack Conf!</p>
<p>Explore the future of JavaScript with a lineup of industry professionals. Discover new techniques to advance your career as a web developer.</p>
    </div>
    <div class="col-md-4 pull-lg-4">
     <h3>Expert Speakers</h3>
<p>Our expert speaker lineup was just announced, so don't wait too long before grabbing your tickets!</p>
<p>Want to meet the international JavaScript community and share skills with some of the world's top experts, hackers, and makers? Be the first to know what to expect for the future of JavaScript.</p>
<p>Full Stack Conf is committed to being inclusive and welcoming for everyone. We look forward to another intensive day of learning and sharing.</p>
    </div>
    <div class="col-md-4">
      <h3>What You'll Learn</h3>
<ul>
  <li><strong>MongoDB</strong>: NoSQL database</li>
  <li><strong>Angular</strong>: JavaScript framework</li>
  <li><strong>Express</strong>: Framework for Node</li>
  <li><strong>Node.js</strong>: JavaScript environment</li>
  <li><strong>ES2015</strong>: Latest version of JavaScript</li>
  <li><strong>Babel</strong>: JavaScript compiler</li>
</ul>
    </div>
  </div>

      <!-- speakers -->
<h1 class="display-4 text-center my-5 text-muted">Speakers</h1>
[Speaker bios go here]

<!-- schedule -->
<h1 class="display-4  text-center my-5 text-muted">Schedule</h1>
[Conference schedule goes here]

</div>

    <!-- signup form -->
<hr>
<div class="col-md-6 col-xl-5 offset-xl-2">
  <div class="col-md-6">
    <p><strong>About Treehouse</strong></p>
    <p>Treehouse brings affordable technology education to people everywhere to help them achieve their dreams and change the world.</p>
  </div>
 <div class="col-md-6 col-xl-5 offset-xl-2">
    <p><strong>Stay up-to-date on Full Stack Conf</strong></p>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Email">
      <span class="input-group-btn">
        <button class="btn btn-primary" type="button">Sign up</button>
      </span>
    </div>
  </div>
</div>
<hr><!-- /signup form -->



<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

  </body>
</html>

You can customize how you want but the main differences are the

<nav class="navbar navbar-light bg-faded">
  <div class="container-fluid">
Tray Denney
Tray Denney
Courses Plus Student 12,884 Points
Tray Denney
Tray Denney
Courses Plus Student 12,884 Points

Also the toggle classes are changed in my example.

Ben Ahlander
Ben Ahlander
7,528 Points
Ben Ahlander
Ben Ahlander
7,528 Points 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Full Stack Conf</title>
    <!-- bootstrap css -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  </head>
  <body>

<!--    navbar-->
 <nav class="navbar navbar-light bg-faded">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Navbar</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Speakers</a></li>
        <li><a href="#">Schedule</a></li>

    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
    <a class="navbar-brand" href="http://teamtreehouse.com"> Presented by Treehouse </a>
</nav>

    <!--    navbar-->

    <div class="container pt-5">
  <div class="row">
    <div class="col-md-4 push-lg-4">
      <h3 class="mb-4">About Full Stack Conf</h3>
      <img class="mb-3 img-fluid rounded hidden-xs-down" src="img/pdx.jpg" alt="Portland">
<p>The beautiful city of Portland, Oregon will be the host city for Full Stack Conf!</p>
<p>Explore the future of JavaScript with a lineup of industry professionals. Discover new techniques to advance your career as a web developer.</p>
    </div>
    <div class="col-md-4 pull-lg-4">
     <h3>Expert Speakers</h3>
<p>Our expert speaker lineup was just announced, so don't wait too long before grabbing your tickets!</p>
<p>Want to meet the international JavaScript community and share skills with some of the world's top experts, hackers, and makers? Be the first to know what to expect for the future of JavaScript.</p>
<p>Full Stack Conf is committed to being inclusive and welcoming for everyone. We look forward to another intensive day of learning and sharing.</p>
    </div>
    <div class="col-md-4">
      <h3>What You'll Learn</h3>
<ul>
  <li><strong>MongoDB</strong>: NoSQL database</li>
  <li><strong>Angular</strong>: JavaScript framework</li>
  <li><strong>Express</strong>: Framework for Node</li>
  <li><strong>Node.js</strong>: JavaScript environment</li>
  <li><strong>ES2015</strong>: Latest version of JavaScript</li>
  <li><strong>Babel</strong>: JavaScript compiler</li>
</ul>
    </div>
  </div>

      <!-- speakers -->
<h1 class="display-4 text-center my-5 text-muted">Speakers</h1>
[Speaker bios go here]

<!-- schedule -->
<h1 class="display-4  text-center my-5 text-muted">Schedule</h1>
[Conference schedule goes here]

</div>

    <!-- signup form -->
<hr>
<div class="col-md-6 col-xl-5 offset-xl-2">
  <div class="col-md-6">
    <p><strong>About Treehouse</strong></p>
    <p>Treehouse brings affordable technology education to people everywhere to help them achieve their dreams and change the world.</p>
  </div>
 <div class="col-md-6 col-xl-5 offset-xl-2">
    <p><strong>Stay up-to-date on Full Stack Conf</strong></p>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Email">
      <span class="input-group-btn">
        <button class="btn btn-primary" type="button">Sign up</button>
      </span>
    </div>
  </div>
</div>
<hr><!-- /signup form -->



<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

  </body>
</html>

Do you know why the "presented by Treehouse" is bellow and not on the right side?

Also, do you know why the image is not keeping in its column and is expanding to fill all 3 columns?

Tray Denney
Tray Denney
Courses Plus Student 12,884 Points
Tray Denney
Tray Denney
Courses Plus Student 12,884 Points

For the "presented by Treehouse" being below, that is because you did not put it in the correct spot. Try :

<!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Speakers</a></li>
        <li><a href="#">Schedule</a></li>
       <a class="navbar-brand" href="http://teamtreehouse.com"> Presented by Treehouse </a>
     </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

For the image you will need to create a custom CSS style sheet (link it below the Bootstrap style sheets), target the img element and give it a height and width property of 100%.

The "presented by Treehouse" will not be on the right side so you will need to target that in your custom with an ID and float it to the right. Bootstrap may have a float-right class but you will need to check the documentation for that.