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

Andrea Monty
Andrea Monty
2,724 Points
Posted by Andrea Monty
Andrea Monty
2,724 Points

"JavaScript" topics are blue after changing the code

I changed my code for my <ul> accordingly with Bootstrap Alpha 6. The "What You'll Learn" section works like it should but the text is blue instead of black. Is there a way to change the text back to black?

<ul class="list-group">
                  <a href="#" class="list-group-item"><strong>MongoDB</strong>: NoSQL database</a>
                  <a href="#" class="list-group-item"><strong>Angular</strong>: JavaScript framework</a>
                  <a href="#" class="list-group-item"><strong>Express</strong>: Framework for Node</a>
                  <a href="#" class="list-group-item"><strong>Node.js</strong>: JavaScript environment</a>
                  <a href="#" class="list-group-item"><strong>ES2015</strong>: Latest version of JavaScript</a>
                  <a href="#" class="list-group-item"><strong>Babel</strong>: JavaScript compiler</a>

             </ul>
Edward Ries
Edward Ries
7,388 Points

We need to see your css for list-group-item class.

example css to change color of a link. I haven't tested it but I believe it should work.

a.list-group-item:link {color: #fff;} a.list-group-item:active {color: #fff;} a.list-group-item:visited {color: #fff;} a.list-group-item:hover {color: #fff;}

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

This is written into the HTML with Bootstrap Alpha 6. My apologies for not specifying.

1 Answer

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

According to the bootstrap docs here: https://v4-alpha.getbootstrap.com/components/list-group/#links-and-buttons

you're missing the list-group-item-action class on every anchor element that is a child of the list group. If I where a betting man, I'd place money that that class controls at least the text color.

Also, side note, your HTML isn't correct. You have an unordered list, but no list items. I would also follow the bootstrap docs, and if you're needed anchors like you have below, your unordered list should be changed to a div with the same class.

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

Thank you Kevin! If you had bet you would have hit the jackpot!! I did need the "action" included. lol And I missed in video that Guil took out the <ul> . I don't have the exact same looking "box" he has but now all my text is black. I had been reading and piecing together because the video is old and of course Bootstrap has changed a lot since. My eyes were getting tired and I didn't catch all of it. Thanks again!

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

Sounds great Andrea, I can only image how much bootstrap has probably changed since these videos were recording. I haven't been keeping close tabs on it, but I have been watching the bootstrap changelog and I've heard of some pretty big changes and omissions made as of late.

Happy coding!