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 Using Bootstrap Components Building the Schedule with a List Group

Posted by William Ray Noble
William Ray Noble
22,190 Points

Content appearing as columns not rows

Hello, I appear to have the same code as the instructor. I copied and pasted the code from the teacher's notes into mine. However, Speaker, the schedule, and the register my button are appearing next to each other as columns and not rows as is shown in the video. My text editor is not displaying any errors indication that I don't have closing tag somewhere. Thanks!

<h1 class="display-4 text-center my-5 text-muted">Schedule</h1>

      <ul class="list-group">
        <li class="list-group-item">
          <div class="d-flex justify-content-between">
            <h5 class="mb-1">Keynote: Internet of Things</h5>
            <span class="badge badge-pill badge-info p-2">9:00am</span>
          </div>
          <p class="mb-1">NodeStradamus</p>
        </li>
        <li class="list-group-item">
          <div class="d-flex justify-content-between">
            <h5 class="mb-1">React Basics</h5>
            <span class="badge badge-pill badge-info p-2">10:00am</span>
          </div>
          <p class="mb-1">Vivianne McVue</p>
        </li>
        <li class="list-group-item">
          <div class="d-flex justify-content-between">
            <h5 class="mb-1">Hey, Mongo!</h5>
            <span class="badge badge-pill badge-info p-2">11:00am</span>
          </div>
          <p class="mb-1">Jay Query</p>
        </li>
        <li class="list-group-item list-group-item-success">
          <div class="d-flex justify-content-between">
            <h5 class="mb-1">Lunch</h5>
            <span class="badge badge-pill badge-info p-2">12:00pm</span>
          </div>
          <p class="mb-1">Free pizza for everyone!</p>
        </li>
        <li class="list-group-item">
          <div class="d-flex justify-content-between">
            <h5 class="mb-1">Introducing ES2015</h5>
            <span class="badge badge-pill badge-info p-2">1:00pm</span>
          </div>
          <p class="mb-1">Ecma Scriptnstuff</p>
        </li> 
        <li class="list-group-item">
          <div class="d-flex justify-content-between">
            <h5 class="mb-1">Getting Started With Redux</h5>
            <span class="badge badge-pill badge-info p-2">2:00pm</span>
          </div>
          <p class="mb-1">Robbie Redux</p>
        </li> 
        <li class="list-group-item">
          <div class="d-flex justify-content-between">
            <h5 class="mb-1">What's Babel?</h5>
            <span class="badge badge-pill badge-info p-2">3:00pm</span>
          </div>
          <p class="mb-1">Json Babel</p>
        </li>        
      </ul>
      <!-- /schedule -->

      <!-- Callout Button -->
      <button type="button" class="btn btn-outline-info btn-lg d-block mx-auto my-5">Don't Miss Out, Register Here</button>
      <!-- /Callout Button -->
rydavim
rydavim
18,813 Points
rydavim
rydavim
18,813 Points

If you're using Workspace, could you post a snapshot? It will help to see all of your code working together.

Edit: If I use the workspace files from the video and copy-paste the code above into it, it all works as expected. If you're not using workspace, it might be harder to troubleshoot. A screenshot of what you're seeing may be helpful.

William Ray Noble
William Ray Noble
22,190 Points

@rydavim, I'm not using workspaces and I have not been successful in integrating a screenshot into the question format.

2 Answers

Agop Karoghlanian
Agop Karoghlanian
Courses Plus Student 9,058 Points

You're missing a closing div tag at the end of the speakers section. Add a </div> at the end of that section and your problem will be solved.

rydavim
rydavim
18,813 Points
rydavim
rydavim
18,813 Points

Without seeing how it works as a whole, it's difficult to help. I can suggest trying a couple of things.

Check to ensure the version of Bootstrap you're using is the same as the one used in the videos.

Try inspecting the element using the developer tools of your browser. Does it look like there's any weird spacing or overlap? Do the elements have the expected amount of padding and margins?

I think Bootstrap might have a clearfix for floats. You could try that to see if there's some gremlin in there.

The problem is almost certainly not in the HTML. I would also try double-checking whatever other CSS or JavaScript files you might be working with.

Good luck, and let me know if there's anything else specific I might be able to help with.