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 the Hero Component

Prath M
Prath M
9,631 Points
Posted by Prath M
Prath M
9,631 Points

I followed the video exactly but my column containing the jumbotron message is squished to the left. How do I fix it?

The part with "Self-destructing messages..." in the first "col-sm-6" is squished to the left as though it were in mobile view. I am pretty sure I followed the video exactly but I can't seem to make it span the entire width of the jumbotron (3:16 in the video).

  <!-- Jumbotron -->
    <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>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>Or download the app and try it first.</p>
          <p>
            <a href="#">iOS</a>
            <a href="#">Android</a>
          </p>
          </div>

          <div class="col-sm-6">
            <div class="device pull-right"></div>
          </div>

        </div>
      </div>
    </div><!-- End Jumbotron -->
Dan Oswalt
Dan Oswalt
23,438 Points

Can you share your css?

2 Answers

Prath M
Prath M
9,631 Points
Prath M
Prath M
9,631 Points

I figured it out! Guil accidentally typed "sol-sm-6" for the first column. The first column is NOT supposed to span the jumbotron--meaning that my CSS is actually correct. Oh Guil, you rascal...

Dan Oswalt
Dan Oswalt
23,438 Points

:)

david carter
david carter
9,677 Points
david carter
david carter
9,677 Points

Just an FYI , Bootstrap uses a grid template which divides an element in 12 sections or columns. Any element with class col-sm-6 will occupy 50% of its parent element, and float left. Your HTML looks fine, as long as you wanted to divide the .row div into two equally-sized columns with the "Self destructing message.." and links in the left column, and the .device pull-right div on the right column.. additionally, the .pull-right class will cause that element to float: right