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 Prototyping with Bootstrap Building a Header, Navigation, and Jumbotron Component

Posted by Mike West
Mike West
9,163 Points

[Solved] Jumbotron" not working in bootstrap.

Following along to Guil's video and noticing some really weird responses to the code I'm writing. The bootstrap file he's using is not responsive. The bootstrap files now come with a minified responsive file. However, when using this file, creating a main container class does not automatically center the content. Also, I can't use get the Jumbotron class to work. I went and read the docs and it appears that I have written it correctly. Any help? Here's my code...note: I'm using brackets and live preview (don't know if this affects anything)

<!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" media="screen">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <header class="page-header">
        <ul class="nav nav-pills pull-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About Ribbit</a></li>
          <li><a href="#">Treehouse</a></li>
        </ul>
        <h3>Ribbit</h3>
      </header>

      <div class="jumbotron">
        <h1>Self-destructing message app</h1>
        <p>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>
          <a href="#">Download the app</a>
          <a href="#" >Text me the link</a>
        </p> 
      </div>

      <div>
        <p>&copy; 2013 Ribbit - By Treehouse Island, Inc.</p>
      </div>
    </div>
  </body>
</html>
Mike West
Mike West
9,163 Points

For anyone who may have the same issue. I found a solution over at Stack Overflow:

Stack Overflow Link

Oddly enough the suggestion of downloading bootstrap again worked...The build is also responsive now as well...odd

1 Answer

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>Bootstrap Tutorial</h1>      
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
  </div>
  <p>This is some text.</p>      
  <p>This is another text.</p>      
</div>

</body>
</html>

Thats my code snippet try that one.