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
Nate Jonah
20,981 Points

Just 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.

Ash Scott
Ash Scott
435 Points

Good shout! Guil Hernandez "just a heads up" ;) Nate Jonah

Mine works fine with btn-primary-outline. That's weird.

Nate Jonah
Nate Jonah
20,981 Points

The 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
Guil Hernandez
Treehouse Teacher

Thanks for the heads up, Nate Jonah. I just added the changes to the teacher's notes of the video. :)

Vince Leung
Vince Leung
4,730 Points

Awesome 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