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
Nate Jonah
20,981 PointsJust a heads up, people!
The video in question (Adding Buttons and Button Groups): https://teamtreehouse.com/library/bootstrap-4-basics/using-bootstrap-components/adding-buttons-and-button-groups
When I pasted the code for the first button, I noticed it was grey on mine and not white with a blue outline. I realised that the code in the video does not match the code on the Bootstrap website.
In Guil's video, on the Bootstrap website, the code under "Outline Buttons" looks like this:
<button type="button" class="btn btn-primary-outline">Primary</button>
<button type="button" class="btn btn-secondary-outline">Secondary</button>
<button type="button" class="btn btn-success-outline">Success</button>
<button type="button" class="btn btn-info-outline">Info</button>
<button type="button" class="btn btn-warning-outline">Warning</button>
<button type="button" class="btn btn-danger-outline">Danger</button>
But on the actual Bootstrap website, the code under "Outline Buttons" (where the classes don't work) looks like this:
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
Make sure the colour keyword is in the middle, and the word "outline is at the end for the class.
Marc Sanchez
20,039 PointsMine works fine with btn-primary-outline. That's weird.
Nate Jonah
20,981 PointsThe Bootstrap in the video (and I'm assuming the one you're using) is 4.0.0-alpha.2 but the latest one on the website is 4.0.0-alpha.3
2 Answers
Guil Hernandez
Treehouse TeacherThanks for the heads up, Nate Jonah. I just added the changes to the teacher's notes of the video. :)
Nate Jonah
20,981 PointsThanks Guil!
Vince Leung
4,730 PointsAwesome guys, thanks i was scratching my head for a while for this one too! Thanks everyone. Good call on the 4.0.0-alpha.3
Ash Scott
435 PointsAsh Scott
435 PointsGood shout! Guil Hernandez "just a heads up" ;) Nate Jonah