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

CSS Bootstrap 4 Basics (Retired) Getting to Know Bootstrap 4 Enhancing the Page

Posted by Holly Logan
Holly Logan
7,142 Points

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,075 Points
Dane Parchment
Dane Parchment
Treehouse Moderator 11,075 Points

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

grunt
grunt
1,386 Points

hi

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

1 Answer

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher
Dave McFarland
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.