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 the Schedule with a List Group

Mark Lawson
Mark Lawson
6,148 Points
Posted by Mark Lawson
Mark Lawson
6,148 Points

Schedule snippet

I have been working on this for a while. I am not getting the same out put. The persons name is sitting in the middle of the schedule, rather than underneath the heading. Is the code out of date? Can someone help?

Thanks

Sarah Dillon
Sarah Dillon
10,704 Points
Sarah Dillon
Sarah Dillon
10,704 Points

Here is what I ended up with. The span class in the snippet is wrong and it works out best to wrap the h4 and speaker name together and then wrap the span in a separate h4 tag

 <!--  Schedule  -->
        <h1 class="display-4 text-center my-3 text-muted">Schedule</h1>
        <ul class="list-group">
           <li class="list-group-item justify-content-between">
              <div>
                  <h4 class="list-group-item-heading">Keynote: Internet of Things</h4>
                  NodeStradamus
              </div>
            <h4><span class="badge badge-default badge-pill">9:00am</span></h4>
           </li>
           <li class="list-group-item justify-content-between">
              <div>
              <h4 class="list-group-item-heading">Angular Basics </h4>
              Angie McAngular
              </div>
              <h4><span class="badge badge-default badge-pill">10:00am</span></h4>
           </li>
           <li class="list-group-item justify-content-between">
              <div>
              <h4 class="list-group-item-heading">Hey, Mongo! </h4>
              Jay Query
              </div>
              <h4><span class="badge badge-default badge-pill">11:00am</span></h4>
           </li>
           <li class="list-group-item justify-content-between list-group-item-success">
              <div>
              <h4 class="list-group-item-heading ">Lunch Break</h4>
              Free pizza for Everyone!
              </div>
              <h4><span class="badge badge-default badge-pill">12:00pm</span></h4>
           </li>

            <li class="list-group-item justify-content-between">
              <div>
                 <h4 class="list-group-item-heading">Introducing ES2015</h4>
                 Ecma Scriptnstuff
              </div>
              <h4><span class="badge badge-default badge-pill">1:00pm</span></h4>
           </li>

            <li class="list-group-item justify-content-between">
              <div>
                 <h4 class="list-group-item-heading">Gettin' MEAN </h4>
                 Geo "Lo" Cation
              </div>
              <h4><span class="badge badge-default badge-pill">2:00pm</span></h4>
           </li>

            <li class="list-group-item justify-content-between">
              <div>
                 <h4 class="list-group-item-heading">What's Babel? </h4>
                 Json Babel
              </div>
              <h4><span class="badge badge-default badge-pill">3:00pm</span></h4>
           </li>
        </ul> <!-- /schedule -->```

1 Answer

Thomas Dimnet
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Dimnet
Python Development Techdegree Graduate 43,629 Points
Thomas Dimnet
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Dimnet
Python Development Techdegree Graduate 43,629 Points

Hey Mark,

here is my solution which works as well :)

<!-- schedule -->
      <h1 class="display-4 text-center my-5 text-muted">Schedule</h1>
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
          <div class="d-flex w-100 justify-content-between">
            <h4 class="mb-1">Keynote: Internet of Things</h4>
            <h4 class="badge badge-info badge-pill">9:00am</h4>
          </div>
          <small>NodeStradamus</small>
        </a>
        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
          <div class="d-flex w-100 justify-content-between">
            <h4 class="mb-1">Angular Basics</h4>
            <h4 class="badge badge-info badge-pill">10:00am</h4>
          </div>
          <small>Angie McAngular</small>
        </a>
        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
          <div class="d-flex w-100 justify-content-between">
            <h4 class="mb-1">Hey, Mongo!</h4>
            <h4 class="badge badge-info badge-pill">11:00am</h4>
          </div>
          <small>Jay Query</small>
        </a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-success flex-column align-items-start">
          <div class="d-flex w-100 justify-content-between">
            <h4 class="mb-1">Lunch Break</h4>
            <h4 class="badge badge-info badge-pill">12:00am</h4>
          </div>
          <small>Free pizza for everyone</small>
        </a>
        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
          <div class="d-flex w-100 justify-content-between">
            <h4 class="mb-1">Introducing ES2015</h4>
            <h4 class="badge badge-info badge-pill">1:00pm</h4>
          </div>
          <small>Ecma Scriptnstuff</small>
        </a>
        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
          <div class="d-flex w-100 justify-content-between">
            <h4 class="mb-1">Gettin' MEAN</h4>
            <h4 class="badge badge-info badge-pill">2:00pm</h4>
          </div>
          <small>Geo "Lo" Cation</small>
        </a>
        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
          <div class="d-flex w-100 justify-content-between">
            <h4 class="mb-1">What's Babel?</h4>
            <h4 class="badge badge-info badge-pill">3:00pm</h4>
          </div>
          <small>Json Babel</small>
        </a>

      </div>
      <!-- End: schedule -->