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 Enhancing the Page

Spacing not working?

I've added mt-3 and mb-3 as per the Bootstrap documentation and it's not working. I see other people are having this same issue and I can't find a solution online. Please help?

Dane Parchment
Dane Parchment
Treehouse Moderator 11,021 Points

Please show us the code so we can properly debug it.

hi

Try mb-5 because the p has already margin bottom defaut is mb-3

1 Answer

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher

Hi Holly Logan

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.