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
Ivo Vieira
5,443 PointsBootstrap 4 Beta has been released and I think they removed the "pull" and "push", is that correct?
If that's the case, the "Important notes" under the "Teacher's notes" should be edited until the course is re-shot again.
2 Answers
Kevin Korte
28,149 PointsThat is correct, per the release notes: https://github.com/twbs/bootstrap/releases
- Updated the grid to drop push, pull, and offset in favor of new .order- modifiers and margin utilities.
Ivo Vieira
5,443 PointsThank you for answering, Kevin.
Yes, also the offsets were removed. They explained that they are using the .mr-auto class from flexbox v4. Until the "Important notes" are not amended or the course re-shot, I used to put the signup column to the right by using "ml-auto". So, the full div class should come like "<div class="col-md-6 col-xl-5 ml-auto">". https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns
They also removed the .hidden classes: https://getbootstrap.com/docs/4.0/migration/#utilities
So the part of the video describing how to hide the image for extra small viewports, "hidden-xs-down" is also outdated. For this part, I couldn't figure out a solution, so a temporarily help is very appreciated. I was playing with the display property but I didn't find the "xs" breakpoint and the "d-sm-none" value does exactly the opposite of our goal, displays the image for the small viewport but hides it for bigger ones. Any suggestion?
Quinton Dobbs
5,149 PointsI got it to work with:
<img class="mb-3 img-fluid rounded d-none d-sm-block" src="img/portpan.jpg">
after a few sessions of trial and error.
Kevin Korte
28,149 PointsYou bet Ivo, I checked this morning and this is on the radar of the treehouse staff to include some sort of update to this series, not sure if that's a new video or two, or notes, but they're aware of it.
In the meantime, I think the only way right now with the beta that I saw to hide an element on XS only is to have a lovely selector like <div class="d-none d-sm-block d-md-block d-lg-block d-xl-block">My Div</div>
Or, write your own media query and class, with is probably more along the lines of what I'd do in this case. Just write your own hidden-xs-down class or whatever you want it to be called.