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) Responsive Layouts with the Bootstrap Grid Styling Content

Posted by raghava Dandanayakula
raghava Dandanayakula
Courses Plus Student 334 Points

m-b-2 and all other utilities are not working for me please help me out

bootstrap utilities are not working like m-b-2 etc..

Diana Rooks
Diana Rooks
25,134 Points

Would you mind sharing your html and which browser you're using? Do you have any screenshots of classes not displaying properly?

Mark Houston
Mark Houston
11,782 Points

Not working for me either. I can't find reference to these utilities on getbootstrap.com which makes me think this might be out of date.

4 Answers

Lisa Hillebrand
Lisa Hillebrand
1,781 Points
Lisa Hillebrand
Lisa Hillebrand
1,781 Points

I had the issue as well. It seems like you have to use the format {property}{sides}-{size} in Bootstrap 4. This means that you have to write mb-2 instead of m-b-2.

As size, you can add 0, 1, 2, 1.5 and 3. If you want to add more sizes, you'll have to modify the Sass file.

http://v4-alpha.getbootstrap.com/utilities/spacing/

Gareth Bromser-Kloeden
Gareth Bromser-Kloeden
9,938 Points
Gareth Bromser-Kloeden
Gareth Bromser-Kloeden
9,938 Points

I had the same problem, in my case it was because I was loading Bootstrap 3 instead of 4. You won't find it on the normal Bootstrap website since 4 is still considered alpha.

Make sure you're using 4, here's the CDN I'm using that works:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

From: http://v4-alpha.getbootstrap.com/getting-started/introduction/

lauraniebel
lauraniebel
4,685 Points
lauraniebel
lauraniebel
4,685 Points

Thanks, I had a similar issue and your solution worked! Cheers!

Christian Higgins
Christian Higgins
15,758 Points

Thank you, you helped me out too!

Rastko Jovic
Rastko Jovic
14,883 Points

Thanks a lot! Works fine now.

Ariel Buchwald
Ariel Buchwald
3,048 Points
Ariel Buchwald
Ariel Buchwald
3,048 Points

First off, as has been stated, make sure you are using the Bootstrap 4 alpha instead of Bootstrap 3.

It seems there have been some changes to Bootstrap 4 since these videos. As Lisa said, when Guil uses m-b-2 (margin bottom 2rem), it is now current to use mb-2 instead, without the first hyphen.

Another one I've noticed: There is no longer an img-rounded class, but rather simply rounded for rounding edges on an image element.

John Ireland
John Ireland
6,585 Points
John Ireland
John Ireland
6,585 Points

Let it also be known that you can throw your own inline styles in there to achieve the same effect. Inline styles aren't best practice, but for the sake of learning this, its been necessary for me. I had to throw in a style="text-align: center" to get the headers to center on the page, as the classes he is providing are not working properly.