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

Posted by Loic Salou
Loic Salou
3,353 Points

Schedule is not working with beta.6

my "schedule" is not formatted correctly. Some classes disappeared in beta.6, such as pull-xs-right, so the result is that I show in a single row "Angular basics 10:00am Angie McAngular". 2 issues then: first, badge "10:00am" is not aligned rightmost, second, Angie McAngular appears on the same row instead of appearing on the row below.

I tried many classes in -BS4-beta.6 but I'm still unsuccessful, currently I have 

    <li class="list-group-item">
      <h4 class="list-group-item-heading">Angular basics 
        <span class="badge badge-info badge-pill float-sm-right">10:00am</span></h4>
      Angie McAngular
    </li>

Any help welcome ! Thanks

5 Answers

Nick van der Sangen
Nick van der Sangen
11,516 Points
Nick van der Sangen
Nick van der Sangen
11,516 Points

Hi Loic,

Here is my workaround per list-item:

<li class="list-group-item d-inline-block">
    <h4 class="mb-0 d-inline">Angular Basics</h4>
    <span class="badge-info badge-pill float-right text-white h5">10:00am</span>
    <span class="d-block">Angie McAngular</span>
</li>

Steps:

  1. I've added the display property utility 'd-inline-block' to the list-item which overrules (and corrects) the display value "flex".
  2. I've replaced the class 'list-group-item-heading' with 'mb-0'; After inspecting the CSS of the Bootstrap CDN I couldn't find any margin-resets on seaching "list-group-item-heading", hence my own interpretation.
  3. I've also added the display property 'd-inline' to the h4 so the badge-pill will be vertical aligned to the top.
  4. I've reordered the badge line after the h4 and added the class 'float-right'.
  5. I've also removed the class 'badge' and instead added the classes 'text-white' and 'h5' to match color and font-size.
  6. I've wrapped the speaker's name in a span-element and added the display property 'd-block' to display the name on a new line.

Hope this helps :)

Darrell Osborne
Darrell Osborne
23,146 Points
Darrell Osborne
Darrell Osborne
23,146 Points 
<div class="list-group">
    <div class="list-group-item justify-content-between">
       <div class="flex-column">
          <h4 class="mb-1">Angular Basics</h4>
          <p class="mb-1">Angie McAngular</p>
       </div>
       <span class="badge badge-default badge-pill">9:00am</span>
    </div>
</div>

Here's what I used in order to continue the flex-box method/direction that Bootstrap is headed toward. Basically, the row is a flex-container with the first item (div class="flex-column") being it's own flex-container in column view.

Just another idea for those searching.

Andrew Swift
Andrew Swift
6,600 Points
Andrew Swift
Andrew Swift
6,600 Points

Was trying to figure out the best way of doing this without getting fid of the flexbox properties, as I like the 'flexibility' and fluidity of flexbox opposed to inline-blocking or floating. Was totally stuck until I saw this comment.

Thanks Darrell!

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

Here is my code: it contains the latest bootstrap classes for the span. Only things that I added was a <div> to wrap the <h4> and speaker name so they appear <h4> on top and speaker on bottom and wrapped <span> in a <h4> tag so it appeared the same size

<!--  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 -->```
jornemoonen
jornemoonen
6,616 Points

Thanks Sarah, I had problems with the text not lined up where it should be in the schedule, but your hack worked perfectly!

Raymer Ramos
Raymer Ramos
7,683 Points
Raymer Ramos
Raymer Ramos
7,683 Points 
        <div class="list-group-item">
          <h4 class="d-inline-block w-100">Keynote: Internet of Things<span class="badge badge-pill badge-info float-right">09:00am</span></h4>
          <span class="text-muted">NodeStradamus</span>
        </div>

Note: span with text-muted is for aesthetics purposes!

Loic Salou
Loic Salou
3,353 Points
Loic Salou
Loic Salou
3,353 Points

Thanks Nick, I also ended in wrapping speaker's name so as to have it displayed on a new line. Your solution is indeed interesting. Thanks a lot!