Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Bootstrap 4 Basics (Retired) Getting to Know Bootstrap 4 Creating a Simple Page

This lesson does work with alpha.6. You must follow the links in the description they will give you updated code.

Just want to confirm this lesson works. You just need to go to the bootstrap site like in the video. the links in the description take you to the correct pages which contain updated code.

3 Answers

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher

Hello Dominic Davies

The current version of Bootstrap 4 (alpha 6) doesn't work the same as in the video. Here are the changes you'll need to make to get this to work:

  • Bootstrap no longer uses class names like this m-t-3 to define the location, size and type of spacing (padding or margin). They've decided to remove the first hyphen character, so the correct class name would be mt-3.
  • The spacing values discussed in the video no longer reflect full REM values. In other words, mt-3 does not add 3 rem to the top margin. It actually is just 1 rem. To get the spacing above the headline as seen in the video the top margin should be mt-5.
  • Adding a margin to the bottom of the headline no longer works -- due to a "collapsing margin" (Mastering Collapsing Margins) adding margin space to the bottom of the paragraph doesn't add any space. Instead use a class to add bottom padding to the paragraph: pb-3

The correct code for the headline and paragraph should be:

<h1 class="display-1 mt-5">Full Stack Conf</h1>
<p class="lead pb-3">Coming Soon, a One-day Conference About All Things JavaScript!</p>

I've updated the teacher's notes to describe these changes: https://teamtreehouse.com/library/enhancing-the-page and we'll be re-doing the affected videos once a stable beta version of Bootstrap 4 is released.

Dominic Davies
Dominic Davies
5,284 Points

Very happy with the updates

Dave McFarland
Dave McFarland
Treehouse Teacher

Great! Glad to hear it Dominic Davies. We'll update the entire course once the code stabilizes. I actually went through the course to update the teacher's notes. I hadn't really used Bootstrap before. It's pretty AMAZING!!!!

Dominic Davies
Dominic Davies
5,284 Points

Thanks for your work Dave, I'm getting through the material quickly. I couldn't believe the changes between the alpha versions!

Dave McFarland
Dave McFarland
Treehouse Teacher

No kidding! As I was going through it I was blown away with the changes. That's software development for you :)