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

Micah Points
Micah Points
8,399 Points
Posted by Micah Points
Micah Points
8,399 Points

Labels replaced by tags in Bootstrap?

The link for "Labels" in the Teacher's Notes appears to be broken. IN the Bootstrap 4 documentation "Labels" does not appear to exist anymore. The closest concept that appears in the List-Group area appears to be "Tags". Is this the same as "Labels" and can we interchange them?

9 Answers

Christian Hals
Christian Hals
11,811 Points
Christian Hals
Christian Hals
11,811 Points

Yes, label has been renamed to tag in the new version of Bootstrap. There are several similar errors with this course so I find that looking through this changelog - http://v4-alpha.getbootstrap.com/migration/ (and the Bootstrap documentation was very helpful in debugging).

I added the classes "tag tag-info tag-pill pull-xs-right" to the span elements to achieve the same thing as Guil in the video.

Sandra Vu
Sandra Vu
3,525 Points
Sandra Vu
Sandra Vu
3,525 Points

Dear Christian

This is my code for the exercise. The class "tag-info" does not work. The tag does not get the intended styling. I tested the code with Chrome and Firefox. <li class="list-group-item"> <h4 class="list-group-item-heading">Internet of Things<span class="tag tag-info tag-pill pull-xs-right">9:00am</span></h4>
NodeStradamus </li>

maxmelon
maxmelon
6,897 Points
maxmelon
maxmelon
6,897 Points

In v4.0.0-alpha.6 "labels"/"tags" have been again replaced by "badges", "pull" and "float" classes removed. After some adjustments, I came up with this code for the Schedule section that works in the current version of Bootstrap:

```html
      <!-- schedule -->
  <h1 class="display-4 text-center my-3 text-muted">Schedule</h1>
  <ul class="list-group">
    <li class="list-group-item 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="mb-1"><span class="badge badge-info badge-pill">9:00am</span></h4>
       </div>
      Nodestradamus
    </li>
    <li class="list-group-item flex-column align-items-start">
       <div class="d-flex w-100 justify-content-between">
        <h4 class="list-group-item-heading">Angular Basics</h4>
        <h4 class="mb-1"><span class="badge badge-info badge-pill">10:00am</span></h4>
       </div>
      Angie McAngular
    </li>
    <li class="list-group-item flex-column align-items-start">
       <div class="d-flex w-100 justify-content-between">
        <h4 class="list-group-item-heading">Her, Mongo!</h4>
        <h4 class="mb-1"><span class="badge badge-info badge-pill">11:00am</span></h4>
       </div>
      Jay Query
    </li>
     <li class="list-group-item list-group-item-success flex-column align-items-start">
       <div class="d-flex w-100 justify-content-between">
        <h4 class="list-group-item-heading">Lunch</h4>
        <h4 class="mb-1"><span class="badge badge-info badge-pill">12:00pm</span></h4>
       </div>
      Free Pizza for Everyone!
    </li>
    <li class="list-group-item flex-column align-items-start">
       <div class="d-flex w-100 justify-content-between">
        <h4 class="list-group-item-heading">Introducing ES2015</h4>
        <h4 class="mb-1"><span class="badge badge-info badge-pill">1:00pm</span></h4>
       </div>
      Ecma Scriptnstuff
    </li>
    <li class="list-group-item flex-column align-items-start">
       <div class="d-flex w-100 justify-content-between">
        <h4 class="list-group-item-heading">Gettin' MEAN</h4>
        <h4 class="mb-1"><span class="badge badge-info badge-pill">2:00pm</span></h4>
       </div>
      Geo "Lo" Cation
    </li>
    <li class="list-group-item flex-column align-items-start">
       <div class="d-flex w-100 justify-content-between">
        <h4 class="list-group-item-heading">What's Babel?</h4>
        <h4 class="mb-1"><span class="badge badge-info badge-pill">3:00pm</span></h4>
       </div>
      Json Babel
    </li>
  </ul>
  <!-- /schedule -->
      ```
Nicolaj Iversen
Nicolaj Iversen
4,130 Points
Nicolaj Iversen
Nicolaj Iversen
4,130 Points

This works too for bootstrap 4 alpha6. - Added "w-100" and "float-right".

             <li class="list-group-item justify-content-between">
                    <h4 class="list-group-item-heading w-100">Internet of things <span class="badge badge-info badge-pill float-right">9:00am</span></h4>
                    Nostradamus
              </li>
Andrea Monty
Andrea Monty
2,724 Points
Andrea Monty
Andrea Monty
2,724 Points

Thank you Benjamin! I am so glad you posted this! Much appreciation!

Brian Foley
Brian Foley
8,440 Points
Brian Foley
Brian Foley
8,440 Points

Thank you very much!

Alan McClenaghan
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Alan McClenaghan
Full Stack JavaScript Techdegree Graduate 56,501 Points
Alan McClenaghan
.a{fill-rule:evenodd;}techdegree seal-36
Alan McClenaghan
Full Stack JavaScript Techdegree Graduate 56,501 Points

Building on the good work of Christian and Franklyn above, the current valid code for the Schedule section should look something like this:

<!-- Schedule    -->
      <h1 class="display-4 text-xs-center my-3 text-muted">Schedule</h1>
      <ul class="list-group">
          <li class="list-group-item">
              <h4 class="list-group-item-heading">Keynote: Internet of Things <span class="tag tag-info tag-pill float-sm-right">9:00am</span></h4>
              NodeStradamus
          </li>
          <li class="list-group-item">
              <h4 class="list-group-item-heading">Angular Basics <span class="tag tag-info tag-pill float-sm-right">10:00am</span></h4>
              Angie McAngular
          </li>
          <li class="list-group-item">
              <h4 class="list-group-item-heading">Hey, Mongo! <span class="tag tag-info tag-pill float-sm-right">11:00am</span></h4>
              Jay Query
          </li>
          <li class="list-group-item list-group-item-success">
              <h4 class="list-group-item-heading">Lunch <span class="tag tag-info tag-pill float-sm-right">12:00pm</span></h4>
              Free pizza for everyone!
          </li>
        <li class="list-group-item">
              <h4 class="list-group-item-heading">Introducing ES2015 <span class="tag tag-info tag-pill float-sm-right">1:00pm</span></h4>
          Ecma Scriptnstuff
        </li>
        <li class="list-group-item">
              <h4 class="list-group-item-heading">Gettin' MEAN <span class="tag tag-info tag-pill float-sm-right">2:00pm</span></h4>
          Geo "Lo" Cation
        </li>
        <li class="list-group-item">
              <h4 class="list-group-item-heading">What's Babel? <span class="tag tag-info tag-pill float-sm-right">3:00pm</span></h4>
          Json Babel
        </li>
      </ul>
      <!-- /Schedule    -->

Changes to look out for are: m-y-3 is now my-3

<span class="label label-info label-pill pull-xi-right"> is now <span class="tag tag-info tag-pill float-dm-right">

Franklyn Roth
Franklyn Roth
16,770 Points
Franklyn Roth
Franklyn Roth
16,770 Points

Yes labels have been replaced by "tags" 1<span class="tag tag-info tag-pill pull-xs-right">1 got it working correctly for me

Sandra Vu
Sandra Vu
3,525 Points
Sandra Vu
Sandra Vu
3,525 Points

would love to hear your opinion, Christian. Thanks

Christian Hals
Christian Hals
11,811 Points
Christian Hals
Christian Hals
11,811 Points

Hi Sandra,

Are you using the latest Boostrap v4.0.0-alpha.4? Could you please share your workspace?

I noticed you are missing the <span class="hidden-xs-down">, but since I don´t have access to your entire code it´s difficult to tell exactly what´s going on.

Here is my code for the Internet of Things list item.

         <li class="list-group-item">
          <h4 class="list-group-item-heading">Keynote:<span class="hidden-xs-down"> Internet of Things</span><span class="tag tag-info tag-pill pull-xs-right">9:00am</span></h4>
          Node Stradamus
        </li>
WOUTER COX
WOUTER COX
872 Points
WOUTER COX
WOUTER COX
872 Points

These classes worked for me to pull the labels to the right and make them pill-shaped: <span class="tag label-pill label-info pull-xs-right">9AM</span>

Christopher McRoy
Christopher McRoy
17,295 Points
Christopher McRoy
Christopher McRoy
17,295 Points

The most recent version of Bootstrap has changed "labels" to "tags". However, your code will only work depending on the Bootstrap version you are referring to in your code.

If you linked to an older version of Bootstrap (ie. you copied from the Treehouse Project Files download), you will still need to use the "labels" code as seen in the video.

If you copied from the Bootstrap CDN and are using the site's most recent version (ie. 4.0.0-alpha.5 is the version I'm using), then you will need to make sure you use "tags" instead of labels.

Hope this clears up any remaining confusion!

Sandra Vu
Sandra Vu
3,525 Points
Sandra Vu
Sandra Vu
3,525 Points

Thanks Christopher!

Andrea Monty
Andrea Monty
2,724 Points
Andrea Monty
Andrea Monty
2,724 Points

Bootstrap Alpha 6 dropped .badges. Now use .tags. In Migration docs of Alpha 6