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 Basics Responsive Layouts With the Bootstrap Grid Styling Content

Posted by James Ackerman
James Ackerman
14,099 Points

Content not aligning properly

I'm having trouble getting my content to wrap to the next line in this Bootstrap tutorial. I've double checked my code and looked for errors, but the content in <!-- Speakers --> and <!-- Schedule --> sections is pushed off to the right of the About, Expert Speakers, and What You'll Learn sections, whereas in the video Guil has it below these sections.

Can anyone see what I've done wrong? 

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Full Stack Conf</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  </head>
  <body>
    <div class="container pt-4">
      <!-- About -->
      <div class="row">
          <div class="col">
            <h3 class="mb-4">About Full Stack Conf</h3>
            <<img class ="mb-4 img-fluid rounded" src="images/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">
            <h3 class="mb-4">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">
            <h3 class="mb-4">What You'll Learn</h3>
              <ul>
                <li><strong>MongoDB</strong>: NoSQL database</li>
                <li><strong>Express</strong>: Framework for Node</li>
                <li><strong>React</strong>: JavaScript library</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><!-- About Content End -->

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

          <!-- Schedule -->
          <h1 class="display-4 text-center my-5 text-muted">Schedule</h1>
          [Conference Schedule Goes Here]
          <!-- Schedule Content End -->
        </div>
    </div><!-- Container Div End -->


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  </body>
</html>

2 Answers

Ciaran Wood
Ciaran Wood
Courses Plus Student 6,787 Points

It appears your closing tags on your divs are in the wrong place! The closing div you have where it says: </div><!-- About Content End --> is actually the closing tag of the third column, not the outer .row wrapper!

You need to move the closing div after <!-- Schedule Content End --> above <!-- Speakers --> comment. That way the .row wrapper no longer contains your h1 tags knocking them down below.

Here is your fixed code :)

https://codepen.io/WoodCiaran97/pen/POOxWP

James Ackerman
James Ackerman
14,099 Points
James Ackerman
James Ackerman
14,099 Points

Oh wow, thank you so much @ciaranwood! I guess my head wasn't in the game yesterday. I should have caught that fairly quickly, but it was giving me fits for almost a half hour, lol.