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
Dekin O'Sullivan
10,749 PointsHover styles don't work for the list items
Hi, At the beginning of the video, Guil changes the ul elements with a more fancy code snipet from the teacher's notes. But when I put that snipet in my code I do not get the hover styles + text is blue whereas his text is grey. Any thoughts?
My code:
<div class="col-lg-4">
<h3 class="m-b-2">What You'll Learn</h3>
<div 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>
</div>
</div>
Dekin O'Sullivan
10,749 PointsMark,
Thank you. However I kinda tried that and it didn't work either. The thing is that this is a code snipet directly from the video's Teacher's Notes and Guil uses it directly and gets a different effect. So he for ex. doesn't need a hover code line to get the hover effect in the video... But let s assume you are on the right path: how would you go about changing my code? I mean: I need the anchor tags in there: "a", so how do I go about changing them to "ul" elements?
Thanks
Dekin O'Sullivan
10,749 PointsOk, I found the answer. The bootstrap version (v.4) used by Guil in this video is still in development process (alpha). So the code he is using has changed since. One can now find the right code to get the same result at the same page of the bootstrap website but under "Anchors and buttons" (http://v4-alpha.getbootstrap.com/components/list-group/#anchors-and-buttons).
There.
4 Answers
Samuel Daw
Front End Web Development Techdegree Graduate 16,525 PointsIf you are using Bootstrop v4-alpha you can use either of the following code snippets:
Buttons to create actionable list group items with hover disabled:
<div class="col-md-4">
<h3 class="mb-2">What You'll Learn</h3>
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action"><strong>MongoDB</strong>: NoSQL database</button>
<button type="button" class="list-group-item list-group-item-action"><strong>Angular</strong>: JavaScript framework</button>
<button type="button" class="list-group-item list-group-item-action"><strong>Express</strong>: Framework for Node</button>
<button type="button" class="list-group-item list-group-item-action"><strong>Node.js</strong>: JavaScript environment</button>
<button type="button" class="list-group-item list-group-item-action"><strong>ES2015</strong>: Latest version of JavaScript</button>
<button type="button" class="list-group-item list-group-item-action"><strong>Babel</strong>: JavaScript compiler</button>
</div>
</div>
Or just the Basic List Group:
<div class="col-md-4">
<h3 class="mb-2">What You'll Learn</h3>
<ul class="list-group">
<li class="list-group-item"><strong>MongoDB</strong>: NoSQL database</li>
<li class="list-group-item"><strong>Angular</strong>: JavaScript framework</li>
<li class="list-group-item"><strong>Express</strong>: Framework for Node</li>
<li class="list-group-item"><strong>Node.js</strong>: JavaScript environment</li>
<li class="list-group-item"><strong>ES2015</strong>: Latest version of JavaScript</li>
<li class="list-group-item"><strong>Babel</strong>: JavaScript compiler</li>
</ul>
</div>
Mark Trevathan
8,153 PointsFunny story:
At the time of my writing of those comments I hadn't done the Bootstrap 4 course. So I hadn't realized that your code should have included Bootstrap. Therefore, I was trying to write it without it. And the funny part is, I needed help on this video so I checked this question and there I was, not helping in the slightest. My apologies! But it's still funny lol.
BUT...
I did find that the only thing you need to do in this video is to add the class "list-group-item-action" to the anchor tags with the class "list-group-item"
Hope that helps someone in the future!
Mark Trevathan
8,153 PointsThis is how I would do it:
<div class="col-lg-4">
<h3 class="m-b-2">What You'll Learn</h3>
<div class="list-group">
<ul>
<a href="#"><li class="list-group-item"><strong>MongoDB</strong>: NoSQL database</li></a>
<a href="#"><li class="list-group-item"><strong>Angular</strong>: JavaScript framework</li></a>
<a href="#"><li class="list-group-item"><strong>Express</strong>: Framework for Node</li></a>
<a href="#"><li class="list-group-item"><strong>Node.js</strong>: JavaScript environment</li></a>
<a href="#"><li class="list-group-item"><strong>ES2015</strong>: Latest version of JavaScript</li></a>
<a href="#"><li class="list-group-item"><strong>Babel</strong>: JavaScript compiler</li></a>
</ul>
</div>
</div>
Dekin O'Sullivan
10,749 PointsMany thanks Mark, I m sure that works to! As i said in my comment above, I also found the answer to why the teacher code snipet wasn't working.
Many thanks!
robertvandeweghe
8,120 PointsMark
As someone, maybe you noted, The instructor is using an older version. The Beta version of 4 is still being updated. For me, I noticed that properties like m-b-2 are now mb-2. It is frustrating but at the same time a "realistic" experience of having to learn something old and adapt to the new version of whatever language we are learning.
Nick van der Sangen
11,516 PointsThis isn't valid HTML:
Element 'a' not allowed as child of element 'ul' in this context.
Mark Trevathan
8,153 PointsOh, I did not see that. Must have posted it while I was writing up that HTML. No problem, good luck!
Mark Trevathan
8,153 PointsMark Trevathan
8,153 PointsWell those aren't technically list items. You would need the <ul> or <ol> tags with <li>'s inside. But if you would want the hover effect on those elements you would write something like: